@justifi/webcomponents 5.7.6-rc-21 → 5.7.7

package/dist/collection/components/business-forms/payment-provisioning/bank-account/bank-account-form-inputs.js

@@ -3,7 +3,7 @@ import { bankAccountTypeOptions } from "../../utils";
 import { numberOnlyHandler } from "../../../../ui-components/form/utils";
 export class BankAccountFormInputs {
     render() {
-        return (h("div", { key: 'da4dc9523bca84cdd02f7e5d47e513c426ed90fd', class: "row gy-3" }, h("div", { key: 'b625a293dec704cbbb132469fdbc8c5d99a660e1', class: "col-12" }, h("form-control-text", { key: 'b41460ddc605f73faf71233ccbbef7e34e690e5a', name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: 'e5560bcdba399baa2e54441436ef5c67936e9fef', class: "col-12" }, h("form-control-text", { key: '18cd16931899f724fd92cb89f1b8d4cd41c5354c', name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '3bb589db98e5d65022576b602bda41f36e3a90d5', class: "col-12" }, h("form-control-text", { key: 'c870513b8895add114d5ec588561fa6f33a63514', name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '1783e7b4af2b012338fe2e1b4f1faa9b5e086bcd', class: "col-12" }, h("form-control-select", { key: '6a9af0f6edeae133dce04b7f829abb802db4ac83', name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '3c3ffced96f67320b4c580be6f28dd8ef5d2c109', class: "col-12" }, h("form-control-text", { key: 'e85df115a9de08ad9abb3237f7bf6c6d23c84150', name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." })), h("div", { key: '5a25cb25160aff24d1f62df2115dbd248709141e', class: "col-12" }, h("form-control-text", { key: 'dfdf7dce470efb8eea65aa6daf562d190963bace', name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." }))));
+        return (h("div", { key: 'b18e803521d67b40e4e5af03a66dcdca0b678968', class: "row gy-3" }, h("div", { key: 'e2e6667ffbcebb6a9aa50739814e7bbebceaabfa', class: "col-12" }, h("form-control-text", { key: 'e1ad63fb7db32dbb6ed67cf18919c681d6d192ef', name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '54db821813e7eb931b8f19fad7fce976cdeb0045', class: "col-12" }, h("form-control-text", { key: '4ecf222c1918e364f319d07e0a770d68dba099d0', name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: 'a92c38f2abbcb3dcaee4bc5ea73df44b31adc3f9', class: "col-12" }, h("form-control-text", { key: '492ff1a4d1e9c4f2fa9d0e527a34dc5ccb09afe6', name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '8e14e6e3de43822d139085d3a05bfd0e7ae5b1be', class: "col-12" }, h("form-control-select", { key: 'f6648b6f7c4a475f88b849bf3a75d446bb539c69', name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '68a2efc082f5b6414ebde10b6da4365677dbefca', class: "col-12" }, h("form-control-text", { key: '3ef9b3db5882063708ccf1eb282f3e90ed53ce82', name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." })), h("div", { key: 'e3270db28269bc25dd4d5a99274f042c1efd1fc6', class: "col-12" }, h("form-control-text", { key: 'a8e801f65a4cc164cdc7bf186fed67f87abc828f', name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." }))));
     }
     static get is() { return "bank-account-form-inputs"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/bank-account/business-bank-account-form-step.js

@@ -37,7 +37,7 @@ export class BusinessBankAccountFormStep {
         }
     }
     render() {
-        return (h("justifi-business-bank-account-form-step-core", { key: 'adb496ad14cd3334d30e571d873150ed8335f833', businessId: this.businessId, getBusiness: this.getBusiness, postBankAccount: this.postBankAccount, postDocumentRecord: this.postDocumentRecord, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-bank-account-form-step-core", { key: '0cdd7da1ea31971df421b28f17673bd1a81bf661', businessId: this.businessId, getBusiness: this.getBusiness, postBankAccount: this.postBankAccount, postDocumentRecord: this.postDocumentRecord, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-business-bank-account-form-step"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/business-core-info/business-core-info-form-step.js

@@ -34,7 +34,7 @@ export class BusinessCoreInfoFormStep {
         }
     }
     render() {
-        return (h("justifi-business-core-info-form-step-core", { key: '1d2bd68e87d5f312c54f5a4bda8863b26fdeec5d', businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-core-info-form-step-core", { key: '21d9ea1603f0e9bf6fe842d177f0f6da0113fb73', businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-business-core-info-form-step"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/business-owners/business-owners-form-step.js

@@ -34,7 +34,7 @@ export class BusinessOwnersFormStep {
         }
     }
     render() {
-        return (h(Host, { key: '3420b6e74da344665583a49146b5b7fd1be40155' }, h("justifi-business-owners-form-step-core", { key: '3e092450028815a0b134af4294edbb7589864409', authToken: this.authToken, businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: (el) => this.coreComponent = el })));
+        return (h(Host, { key: '39dcd68b6ef40bb24dfec2da03d420de7ff17f1a' }, h("justifi-business-owners-form-step-core", { key: 'f9958c7cb798f256106f93a45bcc8405da5f3b49', authToken: this.authToken, businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: (el) => this.coreComponent = el })));
     }
     static get is() { return "justifi-business-owners-form-step"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/business-representative/business-representative-form-inputs.js

@@ -13,7 +13,7 @@ export class RepresentativeFormInputs {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h("form", { key: 'e4b7a532e18a921a5a28aab31f679fbbad164198' }, h("fieldset", { key: 'd7056e5ee25625adb563e2687f581157653c8a9d' }, h("div", { key: '456aab0ef1399a7c1d272059c881c6c6f3d0e87c', class: "d-flex align-items-center gap-2" }, h("legend", { key: '430b3731bbd97ff1589bd81bd6fdaa4082161180', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: '47676ededb80e0f766cb786265d8fb307c60d125', 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: '514197b5bd4868ec29e75dc74367deb187b32063', class: "mt-2" }), h("div", { key: 'f2986d55d0bfbf0e6059f0b2a766d2dc603acdc5', class: "row gy-3" }, h("div", { key: 'e4a3749c5e972f505527b8fc172f9a4214806345', class: "col-12 col-md-8" }, h("form-control-text", { key: 'd54c8d17f0360277fe04dd91a528e303182495c7', 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: '4fa0b1a192fb39a982c957d202ea2ac1e40dedd8', class: "col-12 col-md-4" }, h("form-control-text", { key: '8c3bca4234ea0e7ae3c79d810ffb469637898eb6', 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: '7e14a61364883172f2938bd8b1e53883ddd369fe', class: "col-12 col-md-6" }, h("form-control-text", { key: '8d9c81d374998dbaea5322906fddb5eeadea1546', 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: 'c3f369b226a08497926b26d0732b7dc9d6413559', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '734625aeac8384f2b8676c4d350368675cff3a6f', 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: '23d509b724f2617eb0a4f85c74238b09a052a6cb', class: "col-12 col-md-4" }, h("form-control-date", { key: '0f838cc474beab9822a84856733a86ecf43f0ec3', 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: 'f6d08c53dad2e9a550adf893ac59166015ffb6e4', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: 'dd610955fb7c62fd0aab9af925af34cdc47ab3e9', 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: 'd4e2a212a87ca9be4be8e21f3e47008b2201871c', class: "col-12" }, h("justifi-identity-address-form", { key: 'bb2d0d01e07be4d37acfd448796c8a33460111ed', errors: this.errors.address, defaultValues: (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h("form", { key: '02b2888267736b1441b16e569a7d1ff3ab3e7e17' }, h("fieldset", { key: 'd5d4afd7df869b87272407d4e401ad802708c870' }, h("div", { key: '4e2113e9d7d16c6d2b50625dba3dfa82f7b04832', class: "d-flex align-items-center gap-2" }, h("legend", { key: '17ffa94355f1d89223c554f4fb80e38735681725', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: '0df0655bc4e409ae53b93e40260486e4ff610410', 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: 'bb67f7aafe877075d18ac9a7e8acaa94267035de', class: "mt-2" }), h("div", { key: 'aa5b5fb1913f64c54384d793beeb6dcd5728d10e', class: "row gy-3" }, h("div", { key: '6fe16958c76e589581bd099192fc6886f3e7eb6c', class: "col-12 col-md-8" }, h("form-control-text", { key: 'e0579c2e09c9be66b431174b6d79122349e4d859', 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: '98cfa2ab8e5537452ab0dae54ad95f1ac2a541f4', class: "col-12 col-md-4" }, h("form-control-text", { key: '55962d3f118bc0ffbbe1fbf62d8d6e15c0f04dfb', 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: 'c8bb3ea449d7adcd0d897ee64a1383ff7639305d', class: "col-12 col-md-6" }, h("form-control-text", { key: 'df99114c3d94073a3a95b7ea2f326d27db1d4fa9', 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: '9fe7cce8fbaa975f2cb2f890ec60cc5696356014', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '236d3629a7d97feb7c7556b7e7ba83b0b45ca3db', 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: 'cf99a0654ed61f599d5d854149e68abb9e52798f', class: "col-12 col-md-4" }, h("form-control-date", { key: '8bc17351844b590e16f34daaee6da1e67d433d44', 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: '563dd2be61ca9238c915298fb5db51dfca6468e3', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: 'a99b04783e2a7a439091aa79394e614d82293ac8', 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: '4ae17d91e7428f54e07942a1429e554c6e7a37ac', class: "col-12" }, h("justifi-identity-address-form", { key: '8490e4d041ff22bcb481d553760ed6f34ca908aa', errors: this.errors.address, defaultValues: (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
     static get is() { return "justifi-business-representative-form-inputs"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/business-representative/business-representative-form-step.js

@@ -34,7 +34,7 @@ export class BusinessRepresentativeFormStep {
         }
     }
     render() {
-        return (h("justifi-business-representative-form-step-core", { key: '582c77f4b763573a1d29726285a9b871afe96d89', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-representative-form-step-core", { key: '53c23a79fc8c678d98ca016f38fe7e6fe6ad9fba', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-business-representative-form-step"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/form-control-monetary-provisioning.js

@@ -56,10 +56,10 @@ export class MonetaryInputProvisioning {
         return part;
     }
     render() {
-        return (h(Host, { key: '59e5e4d46e7d4ece898464d846505756611f6635' }, h("div", { key: 'e82201d6777584666ec5ca04ad9e02b83fa956c0', class: "form-group d-flex flex-column" }, h("label", { key: '9bbb22bb201d3db07670e4f26521593ff229f583', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: '61909b4796f78e22d9e6508d9257cdf16220e675', class: "input-group" }, h("span", { key: '152a4f1a6323e55bf6f48aa25353939569acc419', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: 'cc8055c02a4ccb4f63553f45b5ded4ee3d8cf972', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '950019f15743434eaa378b48338e73157525d677' }, h("div", { key: '9a4dab257ec7a62f3f3f1ba1cc2c4aad3f823c17', class: "form-group d-flex flex-column" }, h("label", { key: '19d046ba0d9f5d2b8fc7c3d8c1b9dc893a5834e5', part: label, class: "form-label", htmlFor: this.name }, this.label), h("div", { key: 'ba7df233aa5965ee0a7f5c01dfd84aabd3cecf70', class: "input-group" }, h("span", { key: 'e325e64173d5d7c260b824ef492f02f2333bdb8f', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '5b1632e00657f9aa31139a9869ab63ad9388612e', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.inputPart, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: '776dfb4a9d74342ba139dda6706af8e60b4700fc', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '74e503b7e525aeeb994b1ae94941f07365d2460e', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.inputPart, class: this.errorText ? 'form-control monetary is-invalid' : 'form-control monetary', type: "text", disabled: this.disabled })), h(FormControlHelpText, { key: 'cb7f04dc7e6849d335eb0cfecfb05d7e0c26ff1f', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '6ad1b947a48e8c97a2f5a1c4c2c1094679ce25cd', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary-provisioning"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/legal-address-form/legal-address-form-step.js

@@ -34,7 +34,7 @@ export class LegalAddressFormStep {
         }
     }
     render() {
-        return (h("justifi-legal-address-form-step-core", { key: 'bd286476461181f2e8a435a97bf148d55876b49c', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-legal-address-form-step-core", { key: '65d876bee76f4deb4df115e636fafaef2c883f24', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-legal-address-form-step"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-core.js

@@ -87,7 +87,7 @@ export class PaymentProvisioningCore {
         this.loading = event.detail;
     }
     render() {
-        return (h(StyledHost, { key: '621b616a3b9d5be0fcc1180dcdb0db6a89ec5aa2' }, h("div", { key: 'b51c6814bb81a6cdc6cd0c5ede4d485582f154ee', class: 'row gap-3' }, h(Header1, { key: '7c03561b4c2b0cfc237d6b933aeffe532f35b626', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: 'b616b52cc9a0057f27ddbae1356710cee05c60fa', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading }), h("div", { key: '2447bad174b5d32d253e821e76ebb32fb9ec50e3', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: 'd746b5275ae0866a8619f67fe00217916153ea0a', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'add808398005b6076d91788cc220ab6620f3ddfc', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
+        return (h(StyledHost, { key: 'e195b19df4d1061ecf8b305005faf0ffce68221e' }, h("div", { key: '17d42ba0a22567dce6760e2047478eb1bc36a794', class: 'row gap-3' }, h(Header1, { key: '507788c4af5572cbb09037443ae51b505567d825', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: '4b7e73217ff8230756542c3b0c069e18b7f23356', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading }), h("div", { key: '2ae1e8386114181cbd6f7999ac047b7709daa4fb', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: 'a126b618a3028c4c7a9c12145ab63e222a17e51f', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'a66e1ac554e0dffa78be59df6a74d8175ba0376c', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
     }
     static get is() { return "justifi-payment-provisioning-core"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-form-buttons.js

@@ -12,7 +12,7 @@ export class PaymentProvisioningFormButtons {
         return this.currentStep === this.totalSteps;
     }
     render() {
-        return (h("div", { key: '5869ed8c350e3a1ae5fe62dcd04493f432eecff7', class: 'd-flex gap-2' }, h(Button, { key: 'b1e8c2fff97e9a053d715860a43ddd78c99b255a', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: '8696fe4f0bde5434e51f05f67b39a8e5b2f550bf', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: 'b1750a849d60244bdb3cf82690c6cbd15b6e1110', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
+        return (h("div", { key: '7c793a33752cd9b3dd1ebc6c30b7a98002ef8820', class: 'd-flex gap-2' }, h(Button, { key: '5127c233ef8c819fe17204baaff7370d78ec70e7', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: 'd889e96935718eb333eaac70023fd7b273118676', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: '5502d7d73084119862451389bf85705407187016', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
     }
     static get is() { return "justifi-payment-provisioning-form-buttons"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-form-steps.js

@@ -16,7 +16,7 @@ export class PaymentProvisioningFormSteps {
         return this.componentStepMapping[this.currentStep]();
     }
     render() {
-        return (h("div", { key: '9a09e562d0a3548cb40863ba5780c5d1692b6ec3', class: 'col-12 mb-4' }, this.currentStepComponent));
+        return (h("div", { key: 'f25bbaeeac7ea49b2d99f746af0aec7b637d879a', class: 'col-12 mb-4' }, this.currentStepComponent));
     }
     static get is() { return "justifi-payment-provisioning-form-steps"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning.js

@@ -46,7 +46,7 @@ export class PaymentProvisioning {
         }
     }
     render() {
-        return (h("justifi-payment-provisioning-core", { key: '6d77016584f204fdc4be5fd554b4eb1639e856ab', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
+        return (h("justifi-payment-provisioning-core", { key: '11871305b4b4974787a9278195ea0b314be250b0', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
     }
     static get is() { return "justifi-payment-provisioning"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/business-forms/payment-provisioning/terms-and-conditions/business-terms-conditions-form-step.js

@@ -108,7 +108,7 @@ export class BusinessTermsConditionsFormStep {
         return (h("a", { href: "https://justifi.tech/merchant-agreement/", target: "_blank", rel: "noopener noreferrer" }, "merchant agreement"));
     }
     render() {
-        return (h("form", { key: '8cea6fff2e5b5cbfa7de6b3adfce238153599d1e' }, h("fieldset", { key: 'ef3c4ce5d0d03f1d048e072c6f7ac3da565ffb18' }, h("legend", { key: 'caa5fee86bd4b5c2a7204a76ae3533146526b9e1', part: heading2 }, "Terms and Conditions"), h("hr", { key: '5a72caeaf2dae8f57c0be09ca21feceb0793daf4' }), h("div", { key: 'e39700b83a10c479cf6d767c1af61ac8b480e4d5' }, h("p", { key: '2b8520977bedf73c295a387095724a561391b005' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: '706ec9ecfd4a0909583745f90b36eeb42fa5e690' }), h("div", { key: 'd915e2c49188b829b33b03f07cc8f1ccea99ee1d', class: "row-gy-3" }, h("div", { key: 'cbbc74e6b5e80bf54884a8f41eb94f6d5bcdb6dd', class: "col-12" }, h("form-control-checkbox", { key: 'f63aed196d33f1760dae8c5ac5487c0fbc7d4838', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
+        return (h("form", { key: 'c1ca0ecd364a999e7525e9ac3da82e874a8784e8' }, h("fieldset", { key: 'a77178a38044c458d8dbd31a7e1aeb3f1a34c968' }, h("legend", { key: '7e933517fca8d54095466715bf1f0485625be74f', part: heading2 }, "Terms and Conditions"), h("hr", { key: '1c1da0b7378c51ad2be5efc0e51dedd3ed178c8f' }), h("div", { key: 'bc37aa5162dddc8ade4316b5f24deb1d4a4b6f86' }, h("p", { key: 'aef3d0c9186845e3f44b8e1906c405647f489b53' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: '2a6a480916cc0c4bf35d96c96c3f0250e87149cb' }), h("div", { key: '2e3bed3a57bcb026152fcdc82debab0e667f8148', class: "row-gy-3" }, h("div", { key: '3243c1819e4e61921421467271b2a4d2a89e73d4', class: "col-12" }, h("form-control-checkbox", { key: '20b9b72809148ef390a6da7d9f5bc216436d34a5', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
     }
     static get is() { return "justifi-business-terms-conditions-form-step"; }
     static get properties() {

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import BankAccountFormSkeleton from "./bank-account-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
+import { generateTabId } from "../../../utils/utils";
 export class BankAccountForm {
     constructor() {
         this.isReady = false;
@@ -8,6 +9,7 @@ export class BankAccountForm {
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -31,16 +33,17 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '7ee7c6e3c26ab1a90bdbf7215fe13f65aade1025' }, h(BankAccountFormSkeleton, { key: 'e4afc94a21b041972d031cfce88a102f763932d1', isReady: this.isReady }), h("div", { key: '8980e0dc0048dbd9cd93a4f93fab8c4cbfeef611', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, 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` })))));
+            } }, h("div", { key: 'd04bb6b18498de9646ba6e2ee32f223774a72cc7', class: "row mb-3" }, h("iframe-input", { key: '7eb29da8beff34cbe5d2b7c151fec433d17f8555', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: 'c6345cddc37cbe5627ca4581fb98be55b85550a6', class: "row" }, h("iframe-input", { key: '0bf71a22e9126e04f15f213d84953ccfd3388ef0', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {
         return {
             "isReady": {},
-            "iframeOrigin": {}
+            "iframeOrigin": {},
+            "tabId": {}
         };
     }
     static get methods() {

package/dist/collection/components/{modular-checkout/sub-components → checkout/billing-form}/bank-account-billing-form-simple.js

@@ -1,8 +1,7 @@
-import { h } from "@stencil/core";
-import { nameOnlySchema } from "../../checkout/billing-form/billing-form-schema";
+import { h, Host } from "@stencil/core";
+import { nameOnlySchema } from "./billing-form-schema";
 import { billingForm } from "../../../styles/parts";
 import { FormController } from "../../../ui-components/form/form";
-import { StyledHost } from "../../../ui-components";
 export class BankAccountBillingFormSimple {
     constructor() {
         this.errors = {};
@@ -32,10 +31,9 @@ export class BankAccountBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: '81a8511265b4813817b4cf183aa176b464645e85' }, h("div", { key: '7dddd3ec7822077268c73da7d0f34a691ddde1cb', part: billingForm, class: "mt-4" }, h("form", { key: '1c9000a4b022209129cf511d79a77cf3dc44b77e' }, h("fieldset", { key: '134c349c5745197b5ebb79b31748bf480e1cab7a' }, this.legend && (h("legend", { key: 'fb8e12086fd6fb51f7456d8fc6e82a9184514d4f' }, this.legend)), h("div", { key: 'a49ae2d182e442efbe44aae7c2e0a4e40dabe7d7', class: "row gy-3" }, h("div", { key: '2be4b2aab266d0fc17f32237693dea8578c7545d', class: "col-12" }, h("form-control-text", { key: '92d1b3b05ba04212e46feecfd886f7dcc912e4fe', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
+        return (h(Host, { key: '26bb004c8683881a5f7b6a4a7de3b1e2c680d157' }, h("div", { key: '89951cc4128e5b6578943af160eb44eb64d02272', part: billingForm, class: "mt-4" }, h("form", { key: '06ff2993369ed913abd9973fc7bb87514d047671' }, h("fieldset", { key: '29b61ffe7a9047a9909d8ed3688c41b9bbedc1d0' }, this.legend && (h("legend", { key: 'eb02a71dfa08b5b5b5e3646f96d9a6882b71bda0' }, this.legend)), h("div", { key: 'b6c5e23355c9a70423f23540f2a7191ae33aa738', class: "row gy-3" }, h("div", { key: 'a7f5606df9c5ca03de56ccaf3a809550a8437ff0', class: "col-12" }, h("form-control-text", { key: '688e677b9ceb86ae0c41715b12edbc6cee913424', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
     }
     static get is() { return "justifi-bank-account-billing-form-simple"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "legend": {
@@ -79,7 +77,7 @@ export class BankAccountBillingFormSimple {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "path": "./billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
@@ -105,7 +103,7 @@ export class BankAccountBillingFormSimple {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "path": "./billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },

package/dist/collection/components/{modular-checkout/sub-components → checkout/billing-form}/billing-form-full.js

@@ -1,7 +1,7 @@
-import { h } from "@stencil/core";
-import { fullBillingSchema } from "../../checkout/billing-form/billing-form-schema";
+import { h, Host } from "@stencil/core";
+import { fullBillingSchema } from "./billing-form-schema";
 import { billingForm } from "../../../styles/parts";
-import { Header3, StyledHost } from "../../../ui-components";
+import { Header3 } from "../../../ui-components";
 import { numberOnlyHandler } from "../../../ui-components/form/utils";
 import StateOptions from "../../../utils/state-options";
 import { FormController } from "../../../ui-components/form/form";
@@ -14,7 +14,8 @@ export class BillingFormFull {
     }
     componentWillLoad() {
         this.formController = new FormController(fullBillingSchema());
-        // Set up subscriptions here to avoid warnings about setting state during componentDidLoad
+    }
+    componentDidLoad() {
         this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
         this.formController.errors.subscribe(errors => {
             this.errors = Object.assign({}, errors);
@@ -32,15 +33,10 @@ export class BillingFormFull {
         return { isValid, errors };
     }
     render() {
-        // Guard clause to ensure formController is initialized before rendering
-        if (!this.formController) {
-            return null;
-        }
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, null, h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+        return (h(Host, { key: 'e9d36cd879429f6d2fe05d2fc424b09a53fda517' }, h("div", { key: '3a979f2f763b96e22341ce87597a53bd1dd69de4', part: billingForm, class: "mt-4" }, h(Header3, { key: 'bd55292d19691da184eb079361f03ce72a369fa0', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", { key: '5ad294e59acc1374abd835a1281ca9351914261d' }, h("fieldset", { key: 'b8a1e4c537c6ca214a8e233d513dbe9673ad440e' }, this.legend && (h("legend", { key: '871ce543139ea01c89e2198ab6d0d6d5a5bdb2d7' }, this.legend)), h("div", { key: 'fc5334df48a1aabd2cfe2344fc934f6eb6fe5f94', class: "row gy-3" }, h("div", { key: '1b0e96757b37d15f5c90e0322293c4615d195e57', class: "col-12" }, h("form-control-text", { key: '95312a600e8c0b1f0c082dbde3d11fac41683f8c', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'b658488bf748d0d75fc032daef27ca4c72b81deb', class: "col-12" }, h("form-control-text", { key: 'aed40a410554a29ebc94979cbfe7e7aebe3e03c0', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: '7a297f8670a3a421bf06737e158d71b119e0f92e', class: "col-12" }, h("form-control-text", { key: '867a26488bdf2124256869f80d8e1f14b691e0c2', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: 'fe6c3eeec6c496d846d48e420030689c05248e02', class: "col-12" }, h("form-control-text", { key: 'ac9dea33795c8a0a8f0b602dc108611cfebf0be6', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: 'ecbe044931a98b9b0df870f8899303775ddf92d1', class: "col-12" }, h("form-control-select", { key: 'b6c25c9170d4f97c81b57e44513dbaa8a7166c3b', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '216602a05107394f90b495f30be393efbc01371f', class: "col-12" }, h("form-control-text", { key: 'c05fdd593adbefdd78ae25c57e5f2496d300deba', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
     }
     static get is() { return "justifi-billing-form-full"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "legend": {
@@ -84,7 +80,7 @@ export class BillingFormFull {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "path": "./billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
@@ -110,7 +106,7 @@ export class BillingFormFull {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "path": "./billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },

package/dist/collection/components/checkout/billing-form/billing-form-schema.js

@@ -6,7 +6,7 @@ export const fullBillingSchema = () => object({
     address_line2: lineTwoValidation.nullable(),
     address_city: cityValidation.required('Enter city'),
     address_state: stateValidation.required('Select state'),
-    address_postal_code: postalValidation.required('Enter postal code'),
+    address_postal_code: postalValidation.required('Enter postal code')
 });
 export const postalOnlySchema = () => object({
     name: identityNameValidation.nullable(),
@@ -14,7 +14,7 @@ export const postalOnlySchema = () => object({
     address_line2: lineTwoValidation.nullable(),
     address_city: cityValidation.nullable(),
     address_state: stateValidation.nullable(),
-    address_postal_code: postalValidation.required('Enter postal code'),
+    address_postal_code: postalValidation.required('Enter postal code')
 });
 export const nameOnlySchema = () => object({
     name: identityNameValidation.required('Enter full name'),
@@ -22,5 +22,5 @@ export const nameOnlySchema = () => object({
     address_line2: lineTwoValidation.nullable(),
     address_city: cityValidation.nullable(),
     address_state: stateValidation.nullable(),
-    address_postal_code: postalValidation.nullable(),
+    address_postal_code: postalValidation.nullable()
 });

package/dist/collection/components/{modular-checkout/sub-components → checkout/billing-form}/card-billing-form-simple.js

@@ -1,9 +1,8 @@
-import { h } from "@stencil/core";
-import { postalOnlySchema } from "../../checkout/billing-form/billing-form-schema";
+import { h, Host } from "@stencil/core";
+import { postalOnlySchema } from "./billing-form-schema";
 import { billingForm } from "../../../styles/parts";
 import { numberOnlyHandler } from "../../../ui-components/form/utils";
 import { FormController } from "../../../ui-components/form/form";
-import { StyledHost } from "../../../ui-components";
 export class CardBillingFormSimple {
     constructor() {
         this.errors = {};
@@ -33,10 +32,9 @@ export class CardBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: 'a88ea2aa0b1cc2fccda7c169aad9c061e106ecfe' }, h("div", { key: '414df056d92819bf646886ca8e15f2ed10e6ab18', part: billingForm }, h("form", { key: 'c11f6eb5c7c5c1ecbeb8cc8f644a3b3ba72254c7' }, h("fieldset", { key: 'dd69c65ff7f36da3954c01ca2401e8ede6799f14' }, this.legend && (h("legend", { key: '25a86a61452b84237cc58c047916de22c35b764d' }, this.legend)), h("div", { key: '2fa8445fcf4ac0500f357d92480f18ccac655689', class: "row gy-3" }, h("div", { key: 'b7ac75fcab43435a03ad919757541f74661ce5b4', class: "col-12" }, h("form-control-text", { key: 'fd9e84c9605edf1a987c7243409eb0182f79a803', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+        return (h(Host, { key: '579768ec89e37b775a2406ba687a9a18e1c1fb44' }, h("div", { key: '5a98c4adf327f5e09421fbbd78c9f13f031579c6', part: billingForm, class: "mt-4" }, h("form", { key: '4e2b9e9b3ae5d15f6705e418edb2307ec28e19f2' }, h("fieldset", { key: 'baa9735b69a185a229a6db3fa9ddc3adb02a8748' }, this.legend && (h("legend", { key: '65320d5245a39d67aa9389e54ef02fa87bea9bb8' }, this.legend)), h("div", { key: '1e8b4f9de1d6b0f24bb6ef3c8b282f34bf16c04c', class: "row gy-3" }, h("div", { key: '75fb250b91a586982c9a80fc544c2685cfb2f0e1', class: "col-12" }, h("form-control-text", { key: 'db2be476b7f49596faf8a93f40501d89aae3d84f', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
     }
     static get is() { return "justifi-card-billing-form-simple"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "legend": {
@@ -80,7 +78,7 @@ export class CardBillingFormSimple {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "path": "./billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
@@ -106,7 +104,7 @@ export class CardBillingFormSimple {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../checkout/billing-form/billing-form-schema",
+                            "path": "./billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },

package/dist/collection/components/checkout/card-form/card-form.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import CardFormSkeleton from "./card-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
+import { generateTabId } from "../../../utils/utils";
 export class CardForm {
     constructor() {
         this.isReady = false;
@@ -8,6 +9,7 @@ export class CardForm {
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -35,16 +37,17 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'd5e5c74e5e3be0bb5a9603a89724d23cc6216d6c' }, h(CardFormSkeleton, { key: 'a1e90d74ca6e72678255590a94937932a9520046', isReady: this.isReady }), h("div", { key: 'bb303552ed581492de8ebb0d83cea751ddd90a09', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'fab2d810cd4a51aacd81ca5d43e61ee27e5fb8a4' }, h(CardFormSkeleton, { key: '42d31a9cf55dea31a21fa92d9a5c74ce4ec8d768', isReady: this.isReady }), h("div", { key: 'f1df6f6a3bfdf5f51ecf34a2e27a8de3e63dccd3', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '9641c97124a504729b1eba3e8704d8fd3fda7fde', class: "mb-3" }, h("iframe-input", { key: 'a5a73c00c2ac0cd12ef98b155a40108248529fb7', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'dad1b83f028745aa8b85a8e552f702d5daa3ac6f', class: "d-flex align-items-start" }, h("div", { key: '5de05029d93a81d5ad8c799135863e8cdd1e8619', class: "flex-fill me-3" }, h("iframe-input", { key: '4ec81652e51187bbaa25600299f8cb89f0c41c5c', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '0280f01efdbbfa3542036fa4ee7baec130e42688', class: "flex-fill me-3" }, h("iframe-input", { key: 'b13dba61a6bd18529e70987029592b5b7307e74b', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'edf1e383a148a2d535c4733a2b5af2d8e31e2f43', class: "flex-fill" }, h("iframe-input", { key: 'd63e832db1a089f36909db23cacb110f6571535c', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: 'bafadf410b8a1e623a98da33ab3a3834d62c716c', class: "mb-3" }, h("iframe-input", { key: '0e32596def3eb412eedaedabd675d34046293a32', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '1166f127047cb248eb8981dc18c8a2d5f597ee2d', class: "d-flex align-items-start" }, h("div", { key: 'f1daac286bfd44a5a90d4dea160760409169d0a2', class: "flex-fill me-3" }, h("iframe-input", { key: 'b100858ff3d439677b60e21bf0b2a8cc48f0a616', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '6a3b0ee0cb1de0a12e363c0fb8137b70f20f1fa5', class: "flex-fill me-3" }, h("iframe-input", { key: 'd58cba3700bec37fcb2cb79d80ae23d71896e140', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '6026f8b15e8b2d9a8cc518c9e9ddb259629714c8', class: "flex-fill" }, h("iframe-input", { key: '880ffeabf823ca80bc49bbda23750002cc470143', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {
         return {
             "isReady": {},
-            "iframeOrigin": {}
+            "iframeOrigin": {},
+            "tabId": {}
         };
     }
     static get methods() {