@justifi/webcomponents 5.6.1 → 5.7.0

package/dist/collection/ui-components/pagination-menu/pagination-menu.js

@@ -1,19 +1,19 @@
 import { h, Host } from "@stencil/core";
 import { ExtendedPagingDefaults } from "../../api/Pagination";
-import { buttonDisabled, buttonLink, paginationItemIconNext, paginationItemIconPrevious, paginationItemText } from "../../styles/parts";
+import { paginationButton, paginationButtonDisabled, paginationButtonIconNext, paginationButtonIconPrevious, paginationButtonText } from "../../styles/parts";
 export class PaginationMenu {
     constructor() {
         this.paging = ExtendedPagingDefaults;
         this.params = {};
     }
     render() {
-        return (h(Host, { key: 'f34109c682d25608ec0443c87677f1be2fe282a0' }, h("nav", { key: '4193a8d85e3e247df506918ebc1860816ae56739', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: 'd69181b137ea096d505dffd8592f5983abd651c5', class: "pagination m-0" }, h("li", { key: '26948939a517b7d5674d4100b82cb8bfd23197d1', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("button", { key: '05946ad1aa69a13c63088d85bb594e7bbe4859b2', class: "page-link", onClick: (e) => {
+        return (h(Host, { key: '7b821154b627026ef8624af6e4759e2176004676' }, h("nav", { key: '7990aee285d0cc3e6f83cb59bb216439e5364df5', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '02c68163934ce1aabf4abd607cc28e549e20ebe1', class: "pagination m-0" }, h("li", { key: 'aab661ae85fc61eecd230d058f135483796769c0', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("button", { key: 'ef42a41831a9890186c333418b161877761674e1', class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickPrevious(this.paging.start_cursor);
-            }, part: this.paging.has_previous ? buttonLink : buttonDisabled }, h("span", { key: '7b1c5029503b9fbbfaad817ea1b3d28056e1f187', class: "me-1", part: paginationItemIconPrevious }, "\u00AB"), h("span", { key: '88fe14b4d757d126beffaa9a9b1fe679160029a8', part: paginationItemText }, "Previous"))), h("li", { key: 'd1c2d678b47e82c7ede6a90a3f230c243aaad8e4', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("button", { key: 'aff77d59aee0b21d5e4e68120effbb234453942b', class: "page-link", onClick: (e) => {
+            }, part: this.paging.has_previous ? paginationButton : paginationButtonDisabled }, h("span", { key: 'a898a92687e4a5fec37d9dab4208430260a9f274', class: "me-1", part: paginationButtonIconPrevious }, "\u00AB"), h("span", { key: 'ecc2eeedc064d405ad178b9a98ed088e12f1b2fb', part: paginationButtonText }, "Previous"))), h("li", { key: '56569cd9f9803ead8b1180e2f982a98d7009be1f', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("button", { key: 'c39d389ab89609e8ce11b3dd81eb5c4a50d3521f', class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickNext(this.paging.end_cursor);
-            }, part: this.paging.has_next ? buttonLink : buttonDisabled }, h("span", { key: '260c9af01293dbd83add85af7703d8b27b089351', part: paginationItemText }, "Next"), h("span", { key: '9122c2d8dbf78ddcc771359d9b36ba3036dc9be0', class: "ms-1", part: paginationItemIconNext }, "\u00BB")))))));
+            }, part: this.paging.has_next ? paginationButton : paginationButtonDisabled }, h("span", { key: '6a01458a048a524931b03df6a964fa4a0ac403ac', part: paginationButtonText }, "Next"), h("span", { key: 'f4cb3d084647c00dff30b99f751180564463443f', class: "ms-1", part: paginationButtonIconNext }, "\u00BB")))))));
     }
     static get is() { return "pagination-menu"; }
     static get properties() {

package/dist/collection/ui-components/table/index.js

@@ -0,0 +1,5 @@
+export * from './table';
+export * from './table-empty-state';
+export * from './table-error-state';
+export * from './table-loading-state';
+export * from './event-types';

package/dist/collection/ui-components/{table-empty-state.js → table/table-empty-state.js}

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { tableEmpty } from "../styles/parts";
+import { tableEmpty } from "../../styles/parts";
 export const TableEmptyState = (props) => {
     const { columnSpan, isEmpty } = props;
     if (!columnSpan || !isEmpty) {

package/dist/collection/ui-components/{table-error-state.js → table/table-error-state.js}

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { tableError } from "../styles/parts";
+import { tableError } from "../../styles/parts";
 export const TableErrorState = (props) => {
     const { columnSpan, errorMessage } = props;
     if (!columnSpan || !errorMessage) {

package/dist/collection/ui-components/{table-loading-state.js → table/table-loading-state.js}

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import Spinner from "./spinner";
-import { tableCell } from "../styles/parts";
+import Spinner from "../spinner";
+import { tableCell } from "../../styles/parts";
 export const TableLoadingState = (props) => {
     const { columnSpan, isLoading } = props;
     if (!columnSpan || !isLoading) {

package/dist/collection/ui-components/table/table.js

@@ -0,0 +1,29 @@
+import { h } from "@stencil/core";
+import { table, tableRow, tableFoot, tableFootRow, tableFootCell, tableHead, tableHeadRow } from "../../styles/parts";
+export const TableWrapper = (props, children) => {
+    return (h("div", Object.assign({ class: "table-wrapper", part: "table-wrapper" }, props), children));
+};
+export const TableComponent = (props, children) => {
+    return (h("table", Object.assign({ class: "table table-hover", part: table }, props), children));
+};
+export const TableBody = (props, children) => {
+    return (h("tbody", Object.assign({ class: "table-body" }, props), children));
+};
+export const TableRow = (props, children) => {
+    return (h("tr", Object.assign({ part: tableRow }, props), children));
+};
+export const TableHead = (props, children) => {
+    return (h("thead", Object.assign({ class: "table-head sticky-top", part: tableHead }, props), children));
+};
+export const TableHeadRow = (props, children) => {
+    return (h("tr", Object.assign({ class: "table-light text-nowrap", part: tableHeadRow }, props), children));
+};
+export const TableFoot = (props, children) => {
+    return (h("tfoot", Object.assign({ class: "sticky-bottom", part: tableFoot }, props), children));
+};
+export const TableFootRow = (props, children) => {
+    return (h("tr", Object.assign({ class: "table-light align-middle", part: tableFootRow }, props), children));
+};
+export const TableFootCell = (props, children) => {
+    return (h("td", Object.assign({ part: tableFootCell }, props), children));
+};

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-05-12T19:18:15",
+  "timestamp": "2025-05-15T19:47:15",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.31.0",
@@ -185,31 +185,7 @@
       "docs": "",
       "docsTags": [],
       "usage": {},
-      "props": [
-        {
-          "name": "iframeOrigin",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "iframe-origin",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        }
-      ],
+      "props": [],
       "methods": [
         {
           "name": "tokenize",
@@ -612,31 +588,7 @@
       "docs": "",
       "docsTags": [],
       "usage": {},
-      "props": [
-        {
-          "name": "iframeOrigin",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "iframe-origin",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        }
-      ],
+      "props": [],
       "methods": [
         {
           "name": "tokenize",
@@ -7021,6 +6973,26 @@
           "docs": "",
           "docsTags": []
         },
+        {
+          "event": "error-event",
+          "detail": "ComponentErrorEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "ComponentErrorEvent",
+            "resolved": "ComponentErrorEvent",
+            "references": {
+              "ComponentErrorEvent": {
+                "location": "import",
+                "path": "../../../api/ComponentEvents",
+                "id": "src/api/ComponentEvents.ts::ComponentErrorEvent"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
         {
           "event": "submit-event",
           "detail": "ComponentSubmitEvent",
@@ -8759,30 +8731,6 @@
           "required": false,
           "getter": false,
           "setter": false
-        },
-        {
-          "name": "iframeOrigin",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "iframe-origin",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "default": "IFRAME_ORIGIN",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
         }
       ],
       "methods": [
@@ -9199,29 +9147,6 @@
           "required": false,
           "getter": false,
           "setter": false
-        },
-        {
-          "name": "iframeOrigin",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "iframe-origin",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
         }
       ],
       "methods": [
@@ -9444,30 +9369,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "apiOrigin",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "api-origin",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "default": "PROXY_API_ORIGIN",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "authToken",
           "type": "string",
@@ -9721,7 +9622,7 @@
           "setter": false
         },
         {
-          "name": "iFrameOrigin",
+          "name": "iframeOrigin",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -9729,7 +9630,7 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "i-frame-origin",
+          "attr": "iframe-origin",
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
@@ -9956,30 +9857,6 @@
       "docsTags": [],
       "usage": {},
       "props": [
-        {
-          "name": "apiOrigin",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "api-origin",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "default": "PROXY_API_ORIGIN",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "authToken",
           "type": "string",
@@ -12071,29 +11948,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "iframeOrigin",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "iframe-origin",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "isSelected",
           "type": "boolean",
@@ -13124,29 +12978,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "iframeOrigin",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "iframe-origin",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "insuranceToggled",
           "type": "boolean",
@@ -18003,30 +17834,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "iframeOrigin",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "iframe-origin",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "default": "IFRAME_ORIGIN",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "paymentMethodGroupId",
           "type": "string",
@@ -19559,20 +19366,7 @@
       "listeners": [],
       "styles": [],
       "slots": [],
-      "parts": [
-        {
-          "name": "table-head",
-          "docs": ""
-        },
-        {
-          "name": "table-head-row",
-          "docs": ""
-        },
-        {
-          "name": "table-wrapper",
-          "docs": ""
-        }
-      ],
+      "parts": [],
       "dependents": [
         "justifi-payouts-list"
       ],
@@ -19644,10 +19438,10 @@
       }
     },
     {
-      "filePath": "src/ui-components/filters/table-filters-menu.tsx",
+      "filePath": "src/components/filters/table-filters-menu.tsx",
       "encapsulation": "none",
       "tag": "table-filters-menu",
-      "readme": "# text-filter\n\n\n",
+      "readme": "# table-filters-menu\n\n\n",
       "docs": "",
       "docsTags": [],
       "usage": {},

package/dist/esm/{ApiNew-UOnmIWcv.js → ApiNew-KYhsw8Nv.js}

@@ -1,4 +1,4 @@
-import { w as waitForConfig, c as configState } from './config-state-Bl6vWekp.js';
+import { w as waitForConfig, c as configState } from './config-state-CkKrqnpZ.js';
 import { g as generateId } from './utils-BWcTxbSg.js';
 
 const Api = () => {

package/dist/esm/additional-questions-details_5.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-D6FDxSyt.js';
-import { c as DetailItem, D as DetailSectionTitle } from './utils-CK8L6CE7.js';
+import { c as DetailItem, D as DetailSectionTitle } from './utils-BpP_VJGf.js';
 import { l as isEmptyObject, s as snakeCaseToHumanReadable, m as formatMediumDate } from './utils-BWcTxbSg.js';
-import './parts-CjO1GttX.js';
+import './parts-BrLVc_85.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 
 const AdditionalQuestionsDetails = class {

package/dist/esm/{badge-B191hCAo.js → badge-Du9GTXoB.js}

@@ -1,5 +1,5 @@
 import { h } from './index-D6FDxSyt.js';
-import { H as badgeDark, I as badgeLight, J as badgeInfo, K as badgeWarning, L as badgeDanger, M as badgeSuccess, N as badgeSecondary, O as badgePrimary, P as badge } from './parts-CjO1GttX.js';
+import { F as badgeDark, G as badgeLight, H as badgeInfo, I as badgeWarning, J as badgeDanger, K as badgeSuccess, L as badgeSecondary, M as badgePrimary, N as badge } from './parts-BrLVc_85.js';
 
 var BadgeVariant;
 (function (BadgeVariant) {

package/dist/esm/bank-account-document-form-inputs_4.entry.js

@@ -9,9 +9,10 @@ import { E as EntityDocumentType } from './Document-Ct-uNz2r.js';
 import { c as bankAccountTypeOptions } from './business-form-options-Bn05PRR4.js';
 import './event-types-XYgDHrVL.js';
 import { n as numberOnlyHandler } from './utils-BnjCmwMr.js';
-import { _ as card, F as heading2, A as table, R as tableHeadCell, B as tableCell, c as input, l as label, b as inputInvalid, T as inputDisabled, a as inputFocused } from './parts-CjO1GttX.js';
-import { S as Skeleton } from './skeleton-t69TLGP9.js';
-import { F as FormControlErrorText } from './form-control-error-text-CVPFeRt0.js';
+import { X as card, D as heading2, ai as table, P as tableHeadCell, aj as tableCell, c as input, l as label, b as inputInvalid, R as inputDisabled, a as inputFocused } from './parts-BrLVc_85.js';
+import { S as Skeleton } from './skeleton-Dlpibtr0.js';
+import './event-types-CZfYo5-1.js';
+import { F as FormControlErrorText } from './form-control-error-text-tGFxd6kW.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 import './Dispute-7MWRbTXI.js';
 import './Business-D6XNzizo.js';

package/dist/esm/bank-account-form_9.entry.js

@@ -1,10 +1,12 @@
 import { h, r as registerInstance, H as Host, c as createEvent } from './index-D6FDxSyt.js';
-import { S as Skeleton } from './skeleton-t69TLGP9.js';
+import { S as Skeleton } from './skeleton-Dlpibtr0.js';
+import { w as waitForConfig, c as configState } from './config-state-CkKrqnpZ.js';
 import { a as iframeInputStylesSet } from './iframe-input-styles-state-ibYqbF--.js';
-import { i as inputInvalidAndFocused, b as inputInvalid, a as inputFocused, c as input, an as billingForm, ao as radioListItem } from './parts-CjO1GttX.js';
+import { i as inputInvalidAndFocused, b as inputInvalid, a as inputFocused, c as input, au as billingForm, av as radioListItem } from './parts-BrLVc_85.js';
 import { c as create$3, F as FormController } from './index.esm-BCNUj0Dx.js';
 import { k as postalValidation, l as stateValidation, m as cityValidation, n as lineTwoValidation, q as lineOneValidation, y as identityNameValidation } from './schema-validations-BsbYeDDR.js';
-import { H as Header3 } from './header-3-jLYjhsUb.js';
+import { H as Header3 } from './header-3-DAg8Vh4B.js';
+import './event-types-CZfYo5-1.js';
 import { n as numberOnlyHandler } from './utils-BnjCmwMr.js';
 import { S as StateOptions } from './state-options-BX8GieXu.js';
 import { a as PaymentMethodTypes } from './Payment-BADkZFaz.js';
@@ -38,13 +40,9 @@ const BankAccountForm = class {
         registerInstance(this, hostRef);
         this.isReady = false;
     }
-    async validate() {
-        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
-        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
-        return accountNumberIsValid && routingNumberIsValid;
-    }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
     }
     componentDidRender() {
         const elements = [
@@ -59,11 +57,19 @@ const BankAccountForm = class {
             this.isReady = true;
         });
     }
+    async validate() {
+        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
+        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
+        return accountNumberIsValid && routingNumberIsValid;
+    }
+    async tokenize(clientId, paymentMethodMetadata, account) {
+        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
     render() {
-        return (h(Host, { key: '3d21d5269871beaffeffaef8b9c5104da59c1783' }, h(BankAccountFormSkeleton, { key: 'eb14285f2f0994085423901139f717c3b644273b', isReady: this.isReady }), h("div", { key: '906895204049f1113d596bade78de29bd5def6c2', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'c56aa2cdec0c8be615dee4388346e890b2610b82', class: "row mb-3" }, h("iframe-input", { key: '5dd97225f360e267abf0c772b28ba890edf284db', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '20504c4b3c984c907765b99051a9e44ad6b5a37a', class: "row" }, h("iframe-input", { key: 'a85f47d87b01e099ac54969ce482abcc1fcb5366', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: '94dc0eb0d79b40ade96e1961611e3e7a8eef20ea', class: "row mb-3" }, h("iframe-input", { key: '41c82b772e7873a45409e35ed56dfea16c20c2ee', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '1c95618a50e2d36a3a9a3a7b691ae0dfa6a09936', class: "row" }, h("iframe-input", { key: '28a4dde70c8f55b4f6bf6ce2d3beee6acbebbc0b', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
 };
 
@@ -92,6 +98,10 @@ const CardForm = class {
         registerInstance(this, hostRef);
         this.isReady = false;
     }
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
+    }
     componentDidRender() {
         const elements = [
             this.cardNumberIframeElement,
@@ -118,10 +128,10 @@ const CardForm = class {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '035f015833d7c16a99ffb3cc4c1b88f44928839f' }, h(CardFormSkeleton, { key: '4f6a98efb4bb1ec08bc7660fe8fb11cf1f91aac4', isReady: this.isReady }), h("div", { key: 'efe85d9a9f3cd1ecabd6014b4e6ef6a22dce94f1', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '3d28e96f020196a359a359507237b50dd9fed020' }, h(CardFormSkeleton, { key: 'ee07eb10acf142fcaab1398278e335df49f1abe9', isReady: this.isReady }), h("div", { key: 'bfce475f392cbb2bad3fd1c76f16c6e6a6718c1f', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'd72b1e2e6034d556eccbc6bd68b1469ce51ae257', class: "mb-3" }, h("iframe-input", { key: 'd5d4ae255037b01aced2c90c59bb74d65053b88a', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '1ff59862ecaf86c067638bc86a7a21425ee27ec0', class: "row" }, h("div", { key: '3f6803d69bc30890eb39f005c32c06d0cfb6cf0d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'a328d46fbfea56f3fd483194a74e6d8520cbc2ae', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '46594d660b45a68f5b578823ed54db1a570a0291', class: "col-4 align-content-end" }, h("iframe-input", { key: 'e107c2515d16a339d52a3b08f91537eca3c92a23', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '3df8a556f5e0bade368137a673e814774ad507b9', class: "col-4 align-content-end" }, h("iframe-input", { key: '3432154c7645eda22beb1fe180936357b5b4b2c2', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: 'e8517852800a9a165e61308f8d1cf875a87c021e', class: "mb-3" }, h("iframe-input", { key: '6efe224b7f4a2f63eec601d3e48c454d78c30300', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'cb6df3c5d9788a22c26255d1fe94331544730d24', class: "row" }, h("div", { key: '895943798b131da4215b24da822f7109e045e05b', class: "col-4 align-content-end" }, h("iframe-input", { key: 'ebea71cabe9f783734f924cfd0b03797cd203ce7', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'a65042ba66ca4a2a6f520147d316eb20f82369ea', class: "col-4 align-content-end" }, h("iframe-input", { key: '8ef921245a3075ba36c310955bea671b71aca658', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'e37d637b078a36736ba698d0d96465e138fcf5ab', class: "col-4 align-content-end" }, h("iframe-input", { key: 'df20adb17524ea29f55e1c223267a9f0294b6062', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
 };
 
@@ -334,14 +344,14 @@ const NewPaymentMethod = class {
     showNewPaymentMethodForm() {
         var _a;
         const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
-        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el, iframeOrigin: this.iframeOrigin })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el, iframeOrigin: this.iframeOrigin })), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el })), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     get hiddenRadioInput() {
         return !this.showAch || !this.showCard;
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'a3da4a7aa5c5f68bec412be9eb210e8d45d81e80', class: "payment-method" }, h("div", { key: 'b15cf071a206e09333d55d5c7af26b71a79c46cf', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'd6ff109905c264b201ff3d6f09001a17e4cc351b', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h(Host, { key: 'b80791923e2276322ebe0ce3b25b2073beac188d', class: "payment-method" }, h("div", { key: '47dc555bc135d4562958cf371ca3c8b80ee7236d', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'e485347f39fa4b7d46d64e231931d6bdf541687c', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
 };
 
@@ -416,13 +426,13 @@ const PaymentMethodOptions = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2cf31e17412eb30afabe6749b86b7d1a6f308114' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '506450161ed363330132c2bfa99a6a7729e94778' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
             const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
-                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, iframeOrigin: this.iframeOrigin, ref: (el) => {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }

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

@@ -1,8 +1,9 @@
 import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-D6FDxSyt.js';
-import { E as ErrorState } from './utils-CK8L6CE7.js';
+import { E as ErrorState } from './utils-BpP_VJGf.js';
 import { S as StyledHost } from './styled-host-C7vaWLiB.js';
-import { S as Skeleton } from './skeleton-t69TLGP9.js';
-import './parts-CjO1GttX.js';
+import './event-types-CZfYo5-1.js';
+import { S as Skeleton } from './skeleton-Dlpibtr0.js';
+import './parts-BrLVc_85.js';
 
 const BusinessDetailsLoading = () => {
     const Block = () => (h("div", { class: "mt-5" },