@justifi/webcomponents 4.20.0 → 4.21.0

package/dist/module/owner-form-core2.js

@@ -1,15 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { F as FormController } from './form.js';
 import { O as Owner } from './Business.js';
-import { b as BusinessFormClickActions } from './business-form-types.js';
+import { c as BusinessFormClickActions } from './business-form-types.js';
 import { i as identitySchema } from './business-identity-schema.js';
 import { B as Button } from './button.js';
+import { d as defineCustomElement$9 } from './custom-popper2.js';
 import { d as defineCustomElement$8 } from './form-control-date2.js';
 import { d as defineCustomElement$7 } from './form-control-error-text2.js';
-import { d as defineCustomElement$6 } from './form-control-help-text2.js';
-import { d as defineCustomElement$5 } from './form-control-number-masked2.js';
-import { d as defineCustomElement$4 } from './form-control-select2.js';
-import { d as defineCustomElement$3 } from './form-control-text2.js';
+import { d as defineCustomElement$6 } from './form-control-number-masked2.js';
+import { d as defineCustomElement$5 } from './form-control-select2.js';
+import { d as defineCustomElement$4 } from './form-control-text2.js';
+import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$2 } from './identity-address-form.js';
 import { d as defineCustomElement$1 } from './owner-form-inputs2.js';
 
@@ -209,13 +210,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["owner-form-core", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form", "owner-form-inputs"];
+    const components = ["owner-form-core", "custom-popper", "form-control-date", "form-control-error-text", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "owner-form-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessOwnerFormCore);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
@@ -226,22 +232,22 @@ function defineCustomElement() {
                 defineCustomElement$7();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-number-masked":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "form-control-number-masked":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/module/owner-form-inputs2.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { P as PHONE_MASKS, S as SSN_MASK } from './form-input-masks.js';
 import { u as updateFormValues, a as updateAddressFormValues, b as updateDateOfBirthFormValues } from './input-handlers.js';
+import { d as defineCustomElement$8 } from './custom-popper2.js';
 import { d as defineCustomElement$7 } from './form-control-date2.js';
 import { d as defineCustomElement$6 } from './form-control-error-text2.js';
-import { d as defineCustomElement$5 } from './form-control-help-text2.js';
-import { d as defineCustomElement$4 } from './form-control-number-masked2.js';
-import { d as defineCustomElement$3 } from './form-control-select2.js';
-import { d as defineCustomElement$2 } from './form-control-text2.js';
+import { d as defineCustomElement$5 } from './form-control-number-masked2.js';
+import { d as defineCustomElement$4 } from './form-control-select2.js';
+import { d as defineCustomElement$3 } from './form-control-text2.js';
+import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const BusinessOwnerFormInputs = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerFormInputs extends HTMLElement {
@@ -24,7 +25,7 @@ const BusinessOwnerFormInputs = /*@__PURE__*/ proxyCustomElement(class BusinessO
         this.formController = undefined;
     }
     render() {
-        return (h("div", { key: '6fcc165d4bc75b92403d9031ad98f05f6b1dcd34', class: 'row gy-3' }, h("div", { key: '74f1e42a13892e95497a99684ba9de64719edb72', class: 'col-12 col-md-6' }, h("form-control-text", { key: '29caea2b0b0a62822cc20c99e697f3db7c22a541', name: 'name', label: 'Full Name', defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '5b0f8da9a0512de70558baa9cb188b4d5e773dc2', class: 'col-12 col-md-4' }, h("form-control-text", { key: '5967094f115a64876f8dc943a273f5a22b193f1c', name: 'title', label: 'Title', defaultValue: this.ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: '6c05fec9b87f8ba5e3be9ce74ef727a1e4b14905', class: 'col-12 col-md-6' }, h("form-control-text", { key: '8c5b2839b6de605915d8e7c14a0ba22d3f440bda', name: 'email', label: 'Email Address', defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'd7eae882aea84b8562e459e66bc1ba885c4be3c7', class: 'col-12 col-md-6' }, h("form-control-number-masked", { key: '2d6b33f47e4008745fd65c5ef3cb60dd92b85eba', name: 'phone', label: 'Phone Number', defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '92b825163aedf052bdb89721397da69c717e595d', class: 'col-12 col-md-4' }, h("form-control-date", { key: 'cd884b773ef0eb60effc61e8cfbf42b21620cd1c', name: 'dob_full', label: 'Birth Date', defaultValue: this.ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController) })), h("div", { key: '614ba65972946645ba5c7a299c00efd0e85abf5e', class: 'col-12 col-md-8' }, h("form-control-number-masked", { key: '7cd9fe7a1b56d351942a0b962f3c7227459406ae', name: 'identification_number', label: 'SSN', defaultValue: this.ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: 'ce08f35a16de4b9be65377cde0a9daa5b4cbe876', class: 'col-12' }, h("justifi-identity-address-form", { key: '79a7f5e8c08fc57383c1975145a6b06bd4e615dd', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))));
+        return (h("div", { key: '6fcc165d4bc75b92403d9031ad98f05f6b1dcd34', class: "row gy-3" }, h("div", { key: '74f1e42a13892e95497a99684ba9de64719edb72', class: "col-12 col-md-8" }, h("form-control-text", { key: '29caea2b0b0a62822cc20c99e697f3db7c22a541', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '5b0f8da9a0512de70558baa9cb188b4d5e773dc2', class: "col-12 col-md-4" }, h("form-control-text", { key: '40d66a25fbf825fccb2e3c2b6a4b541a6888f5d7', name: "title", label: "Title", defaultValue: this.ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '97646974ed1c539e70e602bfc8c42513b0d37c9d', class: "col-12 col-md-6" }, h("form-control-text", { key: '5f4497d54b17f556c74b5c18ea25091306d5b6d6', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '9aeb1227cd9afa053d62054222a361f42d20b925', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'c97e405262075c980b7e571eb08ab2d9414fb4d5', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '35555ccd9bfa61bbeeb85aa9586c38902b3a08a6', class: "col-12 col-md-4" }, h("form-control-date", { key: '9d865bdf390f2f88a0dc269462b6bce1d2a2675f', name: "dob_full", label: "Birth Date", defaultValue: this.ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '8a16b08239069ac5ac5273471ab2eeae92a299d7', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '8e74b1c7fef3087bd842394847c5b4c290be190c', name: "identification_number", label: "SSN", defaultValue: this.ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: 'c07f5293a29e330d2ab62cfa72f5d56e7fdee7cf', class: "col-12" }, h("justifi-identity-address-form", { key: '2b18ebc2f7de2004993d617b80067f55c6d3de4d', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))));
     }
     ;
 }, [0, "owner-form-inputs", {
@@ -36,13 +37,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["owner-form-inputs", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form"];
+    const components = ["owner-form-inputs", "custom-popper", "form-control-date", "form-control-error-text", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "owner-form-inputs":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessOwnerFormInputs);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
@@ -53,22 +59,22 @@ function defineCustomElement() {
                 defineCustomElement$6();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-number-masked":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "form-control-number-masked":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/owner-form.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { b as makeGetIdentity, c as makePatchIdentity, d as makePostIdentity } from './payment-provisioning-actions.js';
 import { I as IdentityService } from './business.service.js';
+import { d as defineCustomElement$a } from './custom-popper2.js';
 import { d as defineCustomElement$9 } from './form-control-date2.js';
 import { d as defineCustomElement$8 } from './form-control-error-text2.js';
-import { d as defineCustomElement$7 } from './form-control-help-text2.js';
-import { d as defineCustomElement$6 } from './form-control-number-masked2.js';
-import { d as defineCustomElement$5 } from './form-control-select2.js';
-import { d as defineCustomElement$4 } from './form-control-text2.js';
+import { d as defineCustomElement$7 } from './form-control-number-masked2.js';
+import { d as defineCustomElement$6 } from './form-control-select2.js';
+import { d as defineCustomElement$5 } from './form-control-text2.js';
+import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$3 } from './identity-address-form.js';
 import { d as defineCustomElement$2 } from './owner-form-core2.js';
 import { d as defineCustomElement$1 } from './owner-form-inputs2.js';
@@ -80,13 +81,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-owner-form", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-identity-address-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-owner-form", "custom-popper", "form-control-date", "form-control-error-text", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-owner-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessOwnerForm);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
@@ -97,22 +103,22 @@ function defineCustomElement() {
                 defineCustomElement$8();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-number-masked":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "form-control-number-masked":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "4.20.0";
+const version = "4.21.0";
 const description = "JustiFi Web Components";
 const collection = "dist/collection/collection-manifest.json";
 const main = "dist/index.cjs.js";

package/dist/module/payment-details-core2.js

@@ -43,14 +43,14 @@ const PaymentDetailsCore = /*@__PURE__*/ proxyCustomElement(class PaymentDetails
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'aaaea4076938af5a74197256dba1093265f0e2d6' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '12f06fa05915380403e244cbed053d0c04bfa1d4', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '4d496def6abfc728e6f184fb0729ac648fb2deaf', slot: "head-info", badge: h("span", { slot: '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: '78dcff13206646d594bdc80f6297d45dc9932694', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'dfa0de667ebd28efd217b6bdf548b9b1b728b57e', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'b449b180034f28504007a9c2fb0598607dc00efb', title: "ID", value: this.payment.id })), h("div", { key: '62af84e244e38b24b32f791d13f1b21b49942597', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0ddb0366b4ab737c7b08a37764b8ce2f7ec4a1e9', sectionTitle: "Details" }), h("div", { key: 'cb699194db16cb8608834779f560e882f6f9da7c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '3b6eb4a8b782668951bba90be3b5d522f3f7c69b', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7a59ab0b12a263c38c40a98acbff6492d370b28b', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'a9eaa5d1959425205c144dc2aa7c7fad77014290', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'd70c3a4bf48c9c69625d5f27f1095f9b0744a71e', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '28f526b1adcd475c2ae88a8bf09ae4aea7935df6', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '700f51d787f20f575e3e11aa72a8da29a9587c2a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'ea72ecc9c2f5055d4b0f6b37cd16cb318f9a797c', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '9d66af2c0c0baef4e8b7b021daf0b4d6adb267d2', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '3f21501c1e08feeee1e7427a42faf1c5d1d9c84d', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'b7767b93e090c0195aca6c99b66b48d61b6134b3', sectionTitle: "Payment Method" }),
-            h("div", { key: 'a363c7a7e69932a8ffeddb5e0d53f7df13119a9a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'fb0e1f64fcec23e513590b3048593565685d8400', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'bc181b1b94039e1aad341a8e563ba923976c806b', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '88b21dd2368b88232cd0f464c381d4423fe3c774', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '040fd71315ead633f9c89e9a9dad906889759d77', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '35ebc74de2c5c8fafd95fc5b15ff4f2ca85220cc', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '0c00d8b9511be884b5455156295adc5a16e90d68' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '84020bce088514c6922aa9f4c60fd36515b255f2', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'f86bc0807e905d95f92019a9f2e5431fa04f663d', slot: "head-info", badge: h("span", { slot: '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: '44d62082ccbb3b99e97a4a43c697c4c9de643983', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '20cbf3475cdc79e8160b7bee05cb1d7492bdbd22', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'bd008154f65e9133aa1d370f84925c5c0b15200b', title: "ID", value: this.payment.id })), h("div", { key: 'eba9206b8b934c5bf61d039640b6729bb7d1e61e', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '5f69927701e6295f339e071ce529e94870122c1c', sectionTitle: "Details" }), h("div", { key: 'd4dba46b241ba5ed150246f1d8dafcd64a9bb019', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9fc3188f51f5ffb019f9253a62d962536a34d6cf', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '1c4e12cde8f7368f441d92cad4f3bcf1cc9e3d52', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '9dc3a4d6c5911b48122e584cfaafee1d5ec757a8', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'a5fcb34e1af863504c4b54b024f2960e73bd9148', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '2d7960988b5dfd90645c08399ceb658f33fb8e54', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '92ae117d22f20074494a606af6eaca5b2cf51330', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '65dccd244aaca65369e2402c41c34614f95bcdd7', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'b0b2516b604b1b60358b50a02094948200e472a1', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'd26d5d18b727831fa7d7f1cdc3dbcb5187170e9c', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '415d1b2d0861d3eaaed37914fee27677d36d7f04', sectionTitle: "Payment Method" }),
+            h("div", { key: '56f0388177528afc4ab8acee6b1b884b93c6eaa1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '04aac1ae9748061527f58144593a1ebd35f4c697', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '7a3e672ba11d55e9cafbda06ba141e7d9d489280', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '03a1001268a22552cdf65e60a08fd45db21f471b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'df62f6d86a93d7c32eabade0ce0be19439bee824', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'f80a25dfa9351a409483901d7e8b4fb298562c04', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'f10eef0b4e4067fb78dbff16719a6f266f4e6bab', sectionTitle: "Payment Method" }),
-            h("div", { key: '6c1ef713b5dcabba5b516f3cbbd088d098873303', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '8880fd0fb2b16ee6f177aba15d6f4485c95af252', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'baa70304d2972f69ce8a5d077a076b16f986745b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'dcb63b9258bea698bf2d165c611dfa05cb320f30', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '806696c15aa5ef242c230d9c9aea642ddfdfd93d', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: '83289d8f2cf57a624678260555f00af4ea96a566', sectionTitle: 'Metadata' }), h("div", { key: '02e248b962e0c06f4d83bae75a5759b234fea36b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5d81879c7815102219ed010dab9f573ad6b7985d', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '87d0832646aa0b72c1bf999f0faf35165f12b61d', sectionTitle: "Payment Method" }),
+            h("div", { key: 'f92a4413b6f156bc4205a51c69d082623ab4fdc0', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '437ca707e081f3f6a8c199044f8b5c3a8d5c64ce', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'fb951661cc27c09858dbaa2819824fb67c026a3e', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '34ef47bb23fc7c490afa84fdad3923ec371f954a', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '0af5278b4449beb21e0c4e6af04f803e5b82dff7', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '9412b62344613441a40a9cd328e30eef2a024f6c', sectionTitle: 'Metadata' }), h("div", { key: '8553e41975e932bcb132284d3dcae576a21fedb7', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '328e6815791d601ffe68af891ed46e0aff8d28c0', metadata: this.payment.metadata })))))));
     }
     static get watchers() { return {
         "getPaymentDetails": ["updateOnPropChange"]

package/dist/module/payment-method-options.js

@@ -2,10 +2,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as config } from './config.js';
 import { P as PaymentMethodTypes } from './Payment.js';
 import { d as defineCustomElement$2, P as PaymentMethodOption } from './saved-payment-method.js';
+import { d as defineCustomElement$b } from './custom-popper2.js';
 import { d as defineCustomElement$a } from './form-control-error-text2.js';
-import { d as defineCustomElement$9 } from './form-control-help-text2.js';
-import { d as defineCustomElement$8 } from './form-control-select2.js';
-import { d as defineCustomElement$7 } from './form-control-text2.js';
+import { d as defineCustomElement$9 } from './form-control-select2.js';
+import { d as defineCustomElement$8 } from './form-control-text2.js';
+import { d as defineCustomElement$7 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$6 } from './billing-form.js';
 import { d as defineCustomElement$5 } from './new-payment-method.js';
 import { d as defineCustomElement$4 } from './payment-method-form.js';
@@ -78,7 +79,7 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
     }
     render() {
         var _a;
-        return (h(Host, { key: '86e309b90ab00f530dd803b00e5aab511f92300f' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '56916dc3ddab28b5518c917d980bc757169a814b' }, (_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;
@@ -134,29 +135,34 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-method-options", "form-control-error-text", "form-control-help-text", "form-control-select", "form-control-text", "justifi-billing-form", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
+    const components = ["justifi-payment-method-options", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-billing-form", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-method-options":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PaymentMethodOptions);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

package/dist/module/payment-method-selector.js

@@ -22,7 +22,7 @@ const PaymentMethodSelector = /*@__PURE__*/ proxyCustomElement(class PaymentMeth
         this.paymentMethodSelected.emit(event.target.value);
     }
     render() {
-        return (h("div", { key: 'a0cd592094f7f69955469de84addde1d4bc5af4d', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
+        return (h("div", { key: 'f35b731306676a504c8a13c3a7a19b6c20e2cb26', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
     }
     static get style() { return JustifiPaymentMethodSelectorStyle0; }
 }, [0, "justifi-payment-method-selector", {

package/dist/module/payment-provisioning-core.js

@@ -1,17 +1,19 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { b as BusinessFormClickActions } from './business-form-types.js';
+import { c as BusinessFormClickActions } from './business-form-types.js';
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
 import { a as checkProvisioningStatus } from './helpers.js';
 import { S as StyledHost } from './styled-host.js';
-import { d as defineCustomElement$w } from './form-control-checkbox2.js';
-import { d as defineCustomElement$v } from './form-control-date2.js';
-import { d as defineCustomElement$u } from './form-control-error-text2.js';
-import { d as defineCustomElement$t } from './form-control-file2.js';
-import { d as defineCustomElement$s } from './form-control-help-text2.js';
-import { d as defineCustomElement$r } from './form-control-monetary2.js';
-import { d as defineCustomElement$q } from './form-control-number-masked2.js';
-import { d as defineCustomElement$p } from './form-control-select2.js';
-import { d as defineCustomElement$o } from './form-control-text2.js';
+import { d as defineCustomElement$y } from './custom-popper2.js';
+import { d as defineCustomElement$x } from './form-control-checkbox2.js';
+import { d as defineCustomElement$w } from './form-control-date2.js';
+import { d as defineCustomElement$v } from './form-control-error-text2.js';
+import { d as defineCustomElement$u } from './form-control-file2.js';
+import { d as defineCustomElement$t } from './form-control-help-text2.js';
+import { d as defineCustomElement$s } from './form-control-monetary2.js';
+import { d as defineCustomElement$r } from './form-control-number-masked2.js';
+import { d as defineCustomElement$q } from './form-control-select2.js';
+import { d as defineCustomElement$p } from './form-control-text2.js';
+import { d as defineCustomElement$o } from './form-control-tooltip2.js';
 import { d as defineCustomElement$n } from './business-additional-questions-form-step.js';
 import { d as defineCustomElement$m } from './business-additional-questions-form-step-core.js';
 import { d as defineCustomElement$l } from './business-bank-account-form-step.js';
@@ -146,54 +148,64 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-provisioning-core", "form-control-checkbox", "form-control-date", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "justifi-payment-provisioning-form-buttons", "justifi-payment-provisioning-form-steps", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-payment-provisioning-core", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "justifi-payment-provisioning-form-buttons", "justifi-payment-provisioning-form-steps", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-provisioning-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PaymentProvisioningCore);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$y();
+            }
+            break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "form-control-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "form-control-monetary":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$p();
+            }
+            break;
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$o();
             }

package/dist/module/payment-provisioning-form-buttons.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { b as BusinessFormClickActions } from './business-form-types.js';
+import { c as BusinessFormClickActions } from './business-form-types.js';
 import { B as Button } from './button.js';
 
 const PaymentProvisioningFormButtons = /*@__PURE__*/ proxyCustomElement(class PaymentProvisioningFormButtons extends HTMLElement {

package/dist/module/payment-provisioning-form-steps.js

@@ -1,13 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$u } from './form-control-checkbox2.js';
-import { d as defineCustomElement$t } from './form-control-date2.js';
-import { d as defineCustomElement$s } from './form-control-error-text2.js';
-import { d as defineCustomElement$r } from './form-control-file2.js';
-import { d as defineCustomElement$q } from './form-control-help-text2.js';
-import { d as defineCustomElement$p } from './form-control-monetary2.js';
-import { d as defineCustomElement$o } from './form-control-number-masked2.js';
-import { d as defineCustomElement$n } from './form-control-select2.js';
-import { d as defineCustomElement$m } from './form-control-text2.js';
+import { d as defineCustomElement$w } from './custom-popper2.js';
+import { d as defineCustomElement$v } from './form-control-checkbox2.js';
+import { d as defineCustomElement$u } from './form-control-date2.js';
+import { d as defineCustomElement$t } from './form-control-error-text2.js';
+import { d as defineCustomElement$s } from './form-control-file2.js';
+import { d as defineCustomElement$r } from './form-control-help-text2.js';
+import { d as defineCustomElement$q } from './form-control-monetary2.js';
+import { d as defineCustomElement$p } from './form-control-number-masked2.js';
+import { d as defineCustomElement$o } from './form-control-select2.js';
+import { d as defineCustomElement$n } from './form-control-text2.js';
+import { d as defineCustomElement$m } from './form-control-tooltip2.js';
 import { d as defineCustomElement$l } from './business-additional-questions-form-step.js';
 import { d as defineCustomElement$k } from './business-additional-questions-form-step-core.js';
 import { d as defineCustomElement$j } from './business-bank-account-form-step.js';
@@ -70,54 +72,64 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-provisioning-form-steps", "form-control-checkbox", "form-control-date", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-payment-provisioning-form-steps", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-error-text", "form-control-file", "form-control-help-text", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-provisioning-form-steps":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PaymentProvisioningFormSteps);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$w();
+            }
+            break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "form-control-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "form-control-monetary":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$m();
             }

package/dist/module/payment.service.js

@@ -5,8 +5,11 @@ import './Payout.js';
 import { c as config } from './config.js';
 
 class PaymentService {
-    async fetchPayments(accountId, authToken, params) {
-        const api = Api({ authToken, apiOrigin: config.proxyApiOrigin });
+    async fetchPayments(accountId, authToken, params, apiOrigin) {
+        if (!apiOrigin) {
+            apiOrigin = config.proxyApiOrigin;
+        }
+        const api = Api({ authToken, apiOrigin: apiOrigin });
         const endpoint = `account/${accountId}/payments`;
         return api.get(endpoint, params);
     }