@justifi/webcomponents 4.20.0 → 4.21.0

package/dist/module/business-owners-form-step-core.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { B as BusinessFormStep, b as BusinessFormClickActions } from './business-form-types.js';
+import { a as BusinessFormStep, B as BusinessFormStepV2, c as BusinessFormClickActions } from './business-form-types.js';
 import { B as Button } from './button.js';
+import { d as defineCustomElement$b } from './custom-popper2.js';
 import { d as defineCustomElement$a } from './form-control-date2.js';
 import { d as defineCustomElement$9 } from './form-control-error-text2.js';
-import { d as defineCustomElement$8 } from './form-control-help-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$8 } from './form-control-number-masked2.js';
+import { d as defineCustomElement$7 } from './form-control-select2.js';
+import { d as defineCustomElement$6 } from './form-control-text2.js';
+import { d as defineCustomElement$5 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$4 } from './identity-address-form.js';
 import { d as defineCustomElement$3 } from './owner-form.js';
 import { d as defineCustomElement$2 } from './owner-form-core2.js';
@@ -17,6 +18,7 @@ const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busine
         super();
         this.__registerHost();
         this.submitted = createEvent(this, "submitted", 7);
+        this.stepCompleted = createEvent(this, "form-step-completed", 7);
         this.clickEvent = createEvent(this, "click-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
@@ -69,6 +71,7 @@ const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busine
                 },
                 final: () => {
                     this.submitted.emit({ data: submittedData, metadata: { completedStep: BusinessFormStep.owners } });
+                    this.stepCompleted.emit({ data: submittedData, formStep: BusinessFormStepV2.owners });
                     this.formLoading.emit(false);
                 }
             });
@@ -128,9 +131,9 @@ const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busine
         this.ownersPayload = updatedOwners;
     }
     render() {
-        return (h("div", { key: 'f2358952d2d28841fb8e6bc66e9846eb2cdcc97e' }, h("legend", { key: 'ab3f7e6758cc50760681a9fdd07f8e137da65980' }, "Owners"), h("hr", { key: '57828746f9991da89e77a1f96b51f6df2d33d666' }), h("div", { key: '4f7f58bf1b5d40079228eef118946e17b407db63', class: 'row gy-3' }, this.ownersPayload.map((owner) => {
+        return (h("div", { key: '54dc14b59646d1cb539fd0b58ce6635350b3df4b' }, h("div", { key: 'b33f4e979244d857de0bb33b5ef5d4c31086cc10', class: "d-flex align-items-center gap-2" }, h("legend", { key: '96a4c633e8111bcfb5dd86e6f9e08ef98ea2728d', class: "mb-0" }, "Owners"), h("form-control-tooltip", { key: '057e701996ea52daf1b8cd0dc8ee97020918d844', helpText: "For partnerships, LLCs or privately held corporations, the business is required to apply with all individuals with 25% or more ownership to the application. For charities and registered non-profits, the business is required to apply with 1 individual with substantial control over the entity, such as a board member or director." })), h("hr", { key: 'ef7dbdb63e95b95a3fa8630938a8cd1bf17855f7', class: "mt-2" }), h("div", { key: '53672f1511d6af3c4ae60572da139ba8249dd1c5', class: 'row gy-3' }, this.ownersPayload.map((owner) => {
             return (h("justifi-owner-form", { key: owner.id, authToken: this.authToken, businessId: this.businessId, ownerId: owner.id, removeOwner: this.removeOwnerForm, newFormOpen: this.newFormOpen, ownersLength: this.ownersPayload.length, allowOptionalFields: this.allowOptionalFields, ref: (ref) => this.matchRef(ref, owner.id) }));
-        })), h("div", { key: '88dad43cc24d7c1e1220acb6b7791c2172074d61', class: 'd-flex justify-content-start' }, h("div", { key: '9359481d78e5c3ba9599d2fce5837c5fdfe1d6f0', class: 'gap-2' }, h(Button, { key: '04ee1c49c34567b079432df8fb2b1b298fb7d7a3', variant: 'primary', onClick: () => this.addOwnerForm(true), hidden: !this.showAddOwnerButton }, "Add Owner")))));
+        })), h("div", { key: '9db46d31044dca403fd6ed13e36c8315ad4ca32a', class: 'd-flex justify-content-start' }, h("div", { key: 'a55cf43f922428201e0d016d1eb10489ba9ca6aa', class: 'gap-2' }, h(Button, { key: '0393ff4837999d169afdcb5c79a67bb50176edcd', variant: 'primary', onClick: () => this.addOwnerForm(true), hidden: !this.showAddOwnerButton }, "Add Owner")))));
     }
     static get watchers() { return {
         "ownersPayload": ["ownersWatcher"]
@@ -152,13 +155,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-owners-form-step-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", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-business-owners-form-step-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", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-owners-form-step-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessOwnersFormStepCore);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
@@ -169,22 +177,22 @@ function defineCustomElement() {
                 defineCustomElement$9();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-number-masked":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "form-control-number-masked":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/module/business-owners-form-step.js

@@ -2,12 +2,13 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
 import { B as BusinessService } from './business.service.js';
+import { d as defineCustomElement$c } from './custom-popper2.js';
 import { d as defineCustomElement$b } from './form-control-date2.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-number-masked2.js';
-import { d as defineCustomElement$7 } from './form-control-select2.js';
-import { d as defineCustomElement$6 } from './form-control-text2.js';
+import { d as defineCustomElement$9 } from './form-control-number-masked2.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$6 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$5 } from './business-owners-form-step-core.js';
 import { d as defineCustomElement$4 } from './identity-address-form.js';
 import { d as defineCustomElement$3 } from './owner-form.js';
@@ -56,7 +57,7 @@ const BusinessOwnersFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessOw
         }
     }
     render() {
-        return (h(Host, { key: '213a68fd3543eb912c6fed376128ba877ba75871' }, h("justifi-business-owners-form-step-core", { key: '5acee797bd35f5b60cadc5ddd50f560532dfe8b1', authToken: this.authToken, businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: (el) => this.coreComponent = el })));
+        return (h(Host, { key: '31bd33a08c9eb4a849db8898b3ec7e6fede7b843' }, h("justifi-business-owners-form-step-core", { key: '9e4c88686e1a5ebfd81ab5f1aebd21f58c4e6be5', authToken: this.authToken, businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: (el) => this.coreComponent = el })));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -77,13 +78,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-owners-form-step", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-business-owners-form-step-core", "justifi-identity-address-form", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-business-owners-form-step", "custom-popper", "form-control-date", "form-control-error-text", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-business-owners-form-step-core", "justifi-identity-address-form", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-owners-form-step":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessOwnersFormStep);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
@@ -94,22 +100,22 @@ function defineCustomElement() {
                 defineCustomElement$a();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-number-masked":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "form-control-number-masked":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/module/business-representative-form-inputs.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { u as updateFormValues, a as updateAddressFormValues, b as updateDateOfBirthFormValues } from './input-handlers.js';
 import { P as PHONE_MASKS, S as SSN_MASK } from './form-input-masks.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 RepresentativeFormInputs = /*@__PURE__*/ proxyCustomElement(class RepresentativeFormInputs extends HTMLElement {
@@ -25,7 +26,7 @@ const RepresentativeFormInputs = /*@__PURE__*/ proxyCustomElement(class Represen
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h("form", { key: '8b46b3b30681c7e7f30395a2cac575a7bd7ac998' }, h("fieldset", { key: 'e6b8f2ebca22c295fd6897c0e8862200171c2b4d' }, h("legend", { key: '8f8f52240f5ccc3f5d43507681dc970b4260bb1b' }, "Representative"), h("hr", { key: '8b07c69a514534ab731e7c01b6ee4c7a0e59e06e' }), h("div", { key: '79f44ba9dcbcf9d010aed92e332f686ca7127285', class: 'row gy-3' }, h("div", { key: '2a1aeb5ddee1dafc40e108cfb2e9ed6f4d8bc183', class: 'col-12 col-md-8' }, h("form-control-text", { key: '6e089f2d4f734da266e94b38ec1435dc3f461d5f', name: 'name', label: 'Full Name', defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'c86421e524752e017180aef58e01229bf751e941', class: 'col-12 col-md-4' }, h("form-control-text", { key: 'ad8105f6d9a46397eb481666c19468376716544c', name: 'title', label: 'Title', defaultValue: (_b = this.representativeDefaultValue) === null || _b === void 0 ? void 0 : _b.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: '7775905e46c00337a98ab668c8453e14d27bfc4d', class: 'col-12 col-md-6' }, h("form-control-text", { key: 'e810f2395101a1e48d8d3ff66617ac82d0ec90b3', name: 'email', label: 'Email Address', defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '66a91e85d1902e32668407e684774820c02dce67', class: 'col-12 col-md-6' }, h("form-control-number-masked", { key: 'aad97ca95c5b2ec728ea00916a46ff4b84661b96', name: 'phone', label: 'Phone Number', defaultValue: (_d = this.representativeDefaultValue) === null || _d === void 0 ? void 0 : _d.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '3cd56ea0ac1e472e905c8113f6335868c39882f1', class: 'col-12 col-md-4' }, h("form-control-date", { key: '2f6d505220cacc08a80029ada089370f3841d9ed', name: 'dob_full', label: 'Birth Date', defaultValue: (_e = this.representativeDefaultValue) === null || _e === void 0 ? void 0 : _e.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController) })), h("div", { key: 'cf2df0af006a50d3533b798607025b4d6ee82ca0', class: 'col-12 col-md-8' }, h("form-control-number-masked", { key: '033e4264a1466d300891b2328c0bfaced7acb04d', name: 'identification_number', label: 'SSN', defaultValue: (_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: '2dc7be12d65203da4d4e0bdd995256a7bdc5bf37', class: 'col-12' }, h("justifi-identity-address-form", { key: '47916ab24bf990be3541b72bfa2dc46cccca5a31', errors: this.errors.address, defaultValues: (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h("form", { key: 'e60e25f358a68b95126f1b0238b754db71ffeb5e' }, h("fieldset", { key: 'ab9ca66102990e85694090847abda3842b4302e2' }, h("div", { key: '7fd390072a5b449efb1d18538da2a5ca985b7786', class: "d-flex align-items-center gap-2" }, h("legend", { key: '0fce87b8847777b8a2489684066a7f2ad28037a2', class: "mb-0" }, "Representative"), h("form-control-tooltip", { key: '685ab12d13997025ff840776a7868627d71c4ddf', helpText: "The representative for your business needs to be someone who has significant control over managing your business\u2019s finance. You will have an opportunity to add owners later in the form." })), h("hr", { key: '87c7bf398f56addcc816803ca4b0b8b6598f47f9', class: "mt-2" }), h("div", { key: '76f9606e68374f92810686b4ee1e65855bb724dd', class: "row gy-3" }, h("div", { key: '982dfe08aba4db2ed702aaff432bea4e527ab9cb', class: "col-12 col-md-8" }, h("form-control-text", { key: '4dfbde53299db25439a8be81187d7b3cb39d1026', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '9d9428eb5a8269861170dfa3ec162f0b52581101', class: "col-12 col-md-4" }, h("form-control-text", { key: 'af3601d4dfa0ffbe0a83f467d88c34add95b57b6', name: "title", label: "Title", defaultValue: (_b = this.representativeDefaultValue) === null || _b === void 0 ? void 0 : _b.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '9f56a922a12b5a8393effde4a7e5d3e62f29a8e6', class: "col-12 col-md-6" }, h("form-control-text", { key: 'cc784d334f4c4612686f62a613ac7910d680dba8', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '4f63adab539a9f285985c440fcaf112ae81f7826', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'a170c6b9a6d553216adc41ac7603841b949b4b83', name: "phone", label: "Phone Number", defaultValue: (_d = this.representativeDefaultValue) === null || _d === void 0 ? void 0 : _d.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '85ea5c9bc2b3992d44247991fda34a5142e50faa', class: "col-12 col-md-4" }, h("form-control-date", { key: '0e66f5255a6d159350ecd7d228ded18441b47d26', name: "dob_full", label: "Birth Date", defaultValue: (_e = this.representativeDefaultValue) === null || _e === void 0 ? void 0 : _e.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: 'e0dddceb3d489b9d92a19e983d2ef147c9127e68', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '0f95dd8c436a38377058bf6067d810d8bdcb7686', name: "identification_number", label: "SSN", defaultValue: (_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.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: '0fb3fea4773d72d787c50e18213379ca3aed5c9e', class: "col-12" }, h("justifi-identity-address-form", { key: 'fe9cf9cc527794376968d35cdd42bfd75e550cca', errors: this.errors.address, defaultValues: (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
 }, [0, "justifi-business-representative-form-inputs", {
         "representativeDefaultValue": [8, "representative-default-value"],
@@ -36,13 +37,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-representative-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 = ["justifi-business-representative-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 "justifi-business-representative-form-inputs":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, RepresentativeFormInputs);
             }
             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/business-representative-form-step-core.js

@@ -1,13 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { R as Representative } from './Business.js';
 import { F as FormController } from './form.js';
+import { B as BusinessFormStepV2 } from './business-form-types.js';
 import { i as identitySchema } from './business-identity-schema.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 './business-representative-form-inputs.js';
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
@@ -16,6 +18,7 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
         super();
         this.__registerHost();
         this.submitted = createEvent(this, "submitted", 7);
+        this.stepCompleted = createEvent(this, "form-step-completed", 7);
         this.formLoading = createEvent(this, "formLoading", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.getData = () => {
@@ -54,6 +57,7 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
                 },
                 final: () => {
                     this.submitted.emit({ data: { submittedData } });
+                    this.stepCompleted.emit({ data: submittedData, formStep: BusinessFormStepV2.representative });
                     this.formLoading.emit(false);
                 }
             });
@@ -82,7 +86,7 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
         });
     }
     render() {
-        return (h("justifi-business-representative-form-inputs", { key: '855736c2c1565b0b9e2cf57131a72298ccc889d5', representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }));
+        return (h("justifi-business-representative-form-inputs", { key: 'c007fffeb2675f9e054d74e7c59a729ad3103d21', representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }));
     }
 }, [0, "justifi-business-representative-form-step-core", {
         "getBusiness": [16],
@@ -97,13 +101,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-representative-form-step-core", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-business-representative-form-inputs", "justifi-identity-address-form"];
+    const components = ["justifi-business-representative-form-step-core", "custom-popper", "form-control-date", "form-control-error-text", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-business-representative-form-inputs", "justifi-identity-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-representative-form-step-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessRepresentativeFormStepCore);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
@@ -114,22 +123,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/business-representative-form-step.js

@@ -2,12 +2,13 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
 import { B as BusinessService } 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 './business-representative-form-inputs.js';
 import { d as defineCustomElement$2 } from './business-representative-form-step-core.js';
 import { d as defineCustomElement$1 } from './identity-address-form.js';
@@ -54,7 +55,7 @@ const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class Bu
         }
     }
     render() {
-        return (h("justifi-business-representative-form-step-core", { key: '866d8cf33d53eff562dac1d36898b4c5695bf39b', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-representative-form-step-core", { key: '934b6204cfe78ffe17b3f975de3eedb64398168d', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -75,13 +76,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-representative-form-step", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step-core", "justifi-identity-address-form"];
+    const components = ["justifi-business-representative-form-step", "custom-popper", "form-control-date", "form-control-error-text", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step-core", "justifi-identity-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-representative-form-step":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessRepresentativeFormStep);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
@@ -92,22 +98,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/business-representative.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { P as PHONE_MASKS, S as SSN_MASK } from './form-input-masks.js';
 import { d as deconstructDate } from './helpers.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 BusinessRepresentative = /*@__PURE__*/ proxyCustomElement(class BusinessRepresentative extends HTMLElement {
@@ -47,13 +48,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-representative", "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 = ["justifi-business-representative", "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 "justifi-business-representative":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessRepresentative);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
@@ -64,22 +70,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/business-terms-conditions-form-step.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as create$3, d as create$7, F as FormController } from './form.js';
-import { B as BusinessFormStep } from './business-form-types.js';
+import { a as BusinessFormStep, B as BusinessFormStepV2 } from './business-form-types.js';
 import { c as config } from './config.js';
 import { A as Api } from './Api.js';
 import './Pagination.js';
@@ -29,6 +29,7 @@ const BusinessTermsConditionsFormStep = /*@__PURE__*/ proxyCustomElement(class B
         super();
         this.__registerHost();
         this.submitted = createEvent(this, "submitted", 7);
+        this.stepCompleted = createEvent(this, "form-step-completed", 7);
         this.formLoading = createEvent(this, "formLoading", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.fetchData = async () => {
@@ -114,6 +115,7 @@ const BusinessTermsConditionsFormStep = /*@__PURE__*/ proxyCustomElement(class B
             onSuccess();
         }
         this.submitted.emit({ data: response, metadata: { completedStep: BusinessFormStep.termsAndConditions } });
+        this.stepCompleted.emit({ data: response, formStep: BusinessFormStepV2.termsAndConditions });
     }
     async validateAndSubmit({ onSuccess }) {
         if (this.acceptedTermsBefore) {
@@ -131,7 +133,7 @@ const BusinessTermsConditionsFormStep = /*@__PURE__*/ proxyCustomElement(class B
         });
     }
     render() {
-        return (h("form", { key: 'a292e2b1b69d152009000d9e7009e5ab07698bc8' }, h("fieldset", { key: '30843e9ed0029f64abcf076512af82974dd99598' }, h("legend", { key: '6453679a074056668bdd93cb91d2d725b73fb0da' }, "Terms and Conditions"), h("hr", { key: '6a44c1128e3dceb770b16533aa61fb5e81f5dda2' }), h("justifi-business-terms-conditions-text", { key: '714c9f81c1d1f91712a276259acf4eb6734b40d4' }), h("br", { key: '5e955908e53af5ade77fca9f2a47e8a9d10e7ad8' }), h("div", { key: '7c6ca9d2634c7cc6988292ffedf86b64c3865557', class: "row-gy-3" }, h("div", { key: 'e8f01c4bdcc07e0063e3b8f5f1acbabc9b3310f7', class: "col-12" }, h("form-control-checkbox", { key: 'e09eeb02dc30a9461e958bf43685d2c58f4a608f', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText }))))));
+        return (h("form", { key: '3f269771c368a23afd1c7b139b0fce416d18f161' }, h("fieldset", { key: 'a94a5bf100cb5a10b156b8cf94dc85f03cc1f6ae' }, h("legend", { key: 'facb4a29cebd5147fe3c35d336df04546b550d74' }, "Terms and Conditions"), h("hr", { key: '3dafaab7d2d35bf9a00f87da643f6e1efaa7b147' }), h("justifi-business-terms-conditions-text", { key: '60a1370c8b0d817d79130e8607f6d663c4648c78' }), h("br", { key: 'e72e81a34b31a00ebe3a0d01e24dc096df7bc2a9' }), h("div", { key: '676ed858195c1b90a9e4fdc22ba9654ff944dc93', class: "row-gy-3" }, h("div", { key: '20039587eb6144a05078799f6a41feb59f43dbd2', class: "col-12" }, h("form-control-checkbox", { key: 'fc8eaa81e530b55f24e2ec994b97b4c181af94b2', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText }))))));
     }
 }, [0, "justifi-business-terms-conditions-form-step", {
         "authToken": [1, "auth-token"],