@justifi/webcomponents 5.7.6-rc-04 → 5.7.6-rc-05

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

@@ -31,10 +31,10 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'f7fccd7526b31937a7adb5c1eef5d7db21116b8b' }, h(BankAccountFormSkeleton, { key: '316e16b7bc09d15334c863323b338d61bf074ad4', isReady: this.isReady }), h("div", { key: '6676e15da0bc4f4dccbbbe035af3de9abd449ebf', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '91e0861d760dfa016e72b8758c37b86ce3fe8225' }, h(BankAccountFormSkeleton, { key: '806f012f41018540d3e1be34cb6d03fc61174253', isReady: this.isReady }), h("div", { key: '4660ea1bac93feaa04d643c1bf7a34da790bf308', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'd689e889153f3efd693ff2acfe8a0bf2da84b786', class: "row mb-3" }, h("iframe-input", { key: 'd5405444fbd9776882cbaf649cdc4f709c60f7be', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '788b71169701d7a004ce668cd2126b85cd65a372', class: "row" }, h("iframe-input", { key: '13d88a9e446e4fa7d88424359737202baa1ff79b', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: '0d123854987108eb70d4818a2f909fafa6945109', class: "row mb-3" }, h("iframe-input", { key: '1520dbb02a93848e53dd2b4636c7951a20efe462', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '9365ffe0a279c92d7129c894afa52c7b2060573a', class: "row" }, h("iframe-input", { key: 'bfe10d4fd3f3aab6c035c03ce85e0786876adfce', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {

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

@@ -1,6 +1,25 @@
 import { h } from "@stencil/core";
+import { billingFormSchema } from "./billing-form-schema";
 import { billingForm } from "../../../styles/parts";
+import { Header3 } from "../../../ui-components";
+import { FormController } from "../../../ui-components/form/form";
 export class BillingForm {
+    constructor() {
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        const postalOnly = this.isPostalOnlyMode;
+        this.formController = new FormController(billingFormSchema(postalOnly));
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
     get isPostalOnlyMode() {
         return this.paymentMethodType === 'card' && this.hideCardBillingForm;
     }
@@ -8,21 +27,19 @@ export class BillingForm {
         return this.paymentMethodType === 'bankAccount' && this.hideBankAccountBillingForm;
     }
     async getValues() {
-        var _a, _b;
-        return (_b = (_a = this.formRef) === null || _a === void 0 ? void 0 : _a.getValues()) !== null && _b !== void 0 ? _b : {};
+        return this.formController.values.getValue();
     }
     async fill(fields) {
-        var _a;
-        return (_a = this.formRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
+        this.formController.setInitialValues(fields);
     }
     async validate() {
-        var _a, _b;
-        const { isValid, errors } = (_b = await ((_a = this.formRef) === null || _a === void 0 ? void 0 : _a.validate())) !== null && _b !== void 0 ? _b : { isValid: false, errors: {} };
+        const isValid = await this.formController.validate();
+        const errors = this.formController.errors.getValue();
         return { isValid, errors };
     }
     render() {
         const showHeader = !this.isPostalOnlyMode && !this.hideAllBillingFields;
-        return (h("div", { key: 'd9e320ad13f0d78fbff23bd20b71493ba79d08db', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h("justifi-header", { key: '51b9e3b80b05800c6467ff9afda23639b0ff1668', text: "Billing address", level: "h3", class: "fs-6 fw-bold lh-lg mb-4" }), this.legend && h("legend", { key: 'a891c4530bf0b650022c4ea65b044186cd8a6c82' }, this.legend), this.isPostalOnlyMode ? (h("justifi-postal-code-form", { ref: (el) => this.formRef = el })) : (h("justifi-billing-information-form", { ref: (el) => this.formRef = el }))));
+        return (h("div", { key: '91beaa8646dd35b12e4ef90ce4cdcb73f1a441b2', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h(Header3, { key: 'ca3c1fbba66828371c2172e0d6c6607b36836b00', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), this.legend && h("legend", { key: '50f2c5e1f7a7b4f14841a91afb7ad7be79e0f89d' }, this.legend), this.isPostalOnlyMode ? (h("justifi-postal-code-form", null)) : (h("justifi-billing-information-form", null))));
     }
     static get is() { return "justifi-billing-form"; }
     static get properties() {
@@ -105,6 +122,13 @@ export class BillingForm {
             }
         };
     }
+    static get states() {
+        return {
+            "formController": {},
+            "billingInfo": {},
+            "errors": {}
+        };
+    }
     static get methods() {
         return {
             "getValues": {
@@ -118,8 +142,8 @@ export class BillingForm {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../../components",
-                            "id": "src/components.d.ts::BillingFormFields"
+                            "path": "./billing-form-schema",
+                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
                     "return": "Promise<BillingFormFields>"
@@ -131,7 +155,7 @@ export class BillingForm {
             },
             "fill": {
                 "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<any>",
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
                     "parameters": [{
                             "name": "fields",
                             "type": "BillingFormFields",
@@ -144,11 +168,11 @@ export class BillingForm {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "../../../components",
-                            "id": "src/components.d.ts::BillingFormFields"
+                            "path": "./billing-form-schema",
+                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
-                    "return": "Promise<any>"
+                    "return": "Promise<void>"
                 },
                 "docs": {
                     "text": "",

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

@@ -35,10 +35,10 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '25272154fa202dc80faadec2f69bb76c7cfb23ba' }, h(CardFormSkeleton, { key: '0502cc397895391db8f4a0dd8ed0248000e95510', isReady: this.isReady }), h("div", { key: '12c8429fe8f723eaceb87107e6b95070da7f0101', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '0f8d1d7a069380709165302ab55b8f272eb1d721' }, h(CardFormSkeleton, { key: 'f269c934c7b1712cc82a58f6a52a98ae06de0427', isReady: this.isReady }), h("div", { key: 'af64a2c9bff9e71427605d863613810aabbbf50e', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '1f0f3d58a6eb3a43197ff2fbedd5f2de5ba9d071', class: "mb-3" }, h("iframe-input", { key: '7a70218df21add6c09068d1942b02ed5665a4075', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '77e8f32f133cfe6e2eeb031a79df18f29fd215ab', class: "d-flex align-items-start" }, h("div", { key: '73f5c6172eafcf1de9315f31fb7509a4591f1381', class: "flex-fill me-3" }, h("iframe-input", { key: '2d8da3a9296964e98cbdc9fedba09b817cd841d1', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'a652f1621e570da238d4aaa9a3dce5fe6b509d40', class: "flex-fill me-3" }, h("iframe-input", { key: '449aebeca06e7e4e9c4fc2b384db04adba82c08d', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'a9f40a6ebf5d27bde854f2b2eaa8ba593fd547dc', class: "flex-fill" }, h("iframe-input", { key: '29aa4bc6724001e9bf1326101f76173693f91bf0', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: 'b07542c92ca49a44a8c9ea04919ec3db14100cac', class: "mb-3" }, h("iframe-input", { key: 'a13821b11e3c3b9b5cfd42a967c5c708ee5fbb9e', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '4ffe80a04c90546ae26b7239d7a081c251b1e9a5', class: "d-flex align-items-start" }, h("div", { key: '8b86e21933299ace1eb6914ea003eb368f164945', class: "flex-fill me-3" }, h("iframe-input", { key: 'a1c4b27683e2685a4fe4da5ae7d86b9439ec90d9', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '614059cd2995bd630709b75e9e6c29c8134c8762', class: "flex-fill me-3" }, h("iframe-input", { key: '178b15d416591122cf271e63d633950fa6a67617', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '097a78e72fa9eadd4b930b7eaf4afca5c3bf7d6b', class: "flex-fill" }, h("iframe-input", { key: 'cbe3bc2f75863d19a8e5345f0d2a68aa75a54a98', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {

package/dist/collection/components/checkout/checkout.js

@@ -88,7 +88,7 @@ export class Checkout {
         return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && this.hideCardBillingForm;
     }
     render() {
-        return (h(StyledHost, { key: '66b064eb09a9d14357b5f67ed6cb06a315e28cd3' }, h("justifi-modular-checkout", { key: '0c175af8ee77ba66a6c9e6e338f8e148485e1a44', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: this.canSavePaymentMethod && this.savePaymentMethod }, h("div", { key: '27a831604928bae01d8a4f056065cf4bb22ed078', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '42f396148f51c83fcfb6af8385bfeaa0809c80b4', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '4fdee03c9f6c2d8cb125cf00e7774486f748024b', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '9dd9f8f49c714d915d33f4767196cb31912fe2d4' }, h("justifi-checkout-summary", { key: 'ab3a241477367ace71894a89cdb8df6b02b6a475' }))), h("div", { key: '2fcfa4852da6ab570999e00c900a38ce3f7b22d6', class: "col-12 mt-4" }, h("slot", { key: '0d8990a3c78a59cfad5b31de02d885dd85bdff3b', name: "insurance" })), h("div", { key: '02bcacf6467c99b50b61cd46c4393d2f21ac7f30', class: "col-12 mt-4" }, h("justifi-header", { key: 'f6c88155bcd68d4c76dd1c6d812cb3bf96556454', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'dfc55a62398f0baeb3eef4d934644f68cc8483b9', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '3bfdf78062b252b9fc53f63e3248966cd4bd6513', class: "d-flex flex-column" }, h("section", { key: '5f51a590d33ae9074314df4a5808fa4355c3711f' }, h("div", { key: '048568eb658167dcb267a406d11e9672539e5454' }, h("justifi-saved-payment-methods", { key: '150ba48b60bd5818a6fd2004ed1d3b0571050221' }), h("justifi-sezzle-payment-method", { key: 'c959ccbba4683f37706daa889eaa60d0a371d682' }), !this.disableCreditCard && (h("div", { key: '412255d8cf36a0e3669680e09ca77d5efedf7969' }, h("payment-method-option", { key: '9aaaecfd5880a7de93e6f3c986e12f2e63407674', paymentMethodOptionId: PaymentMethodTypes.card, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, radioButtonHidden: this.disableCreditCard, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && (h("div", { key: '4fefd1eb74d9c6ba17a1d01fe59ab3334bf8bdac', class: "mt-4 mb-4" }, h("justifi-card-form", { key: '6c78f67bce200b47201220a528fb289861761727' }))))), !this.disableBankAccount && (h("div", { key: 'c5b97b68abaf8fa754b9f12e08a1b68c85b4c852' }, h("payment-method-option", { key: '24c013b3e317d26c9c7b961c0b0a87f2f94949f2', paymentMethodOptionId: PaymentMethodTypes.bankAccount, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, radioButtonHidden: this.disableBankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && (h("div", { key: 'b61b75f7e449b1217357bdaddfbfcf37d863612f', class: "mt-4 mb-4" }, h("justifi-bank-account-form", { key: 'e6d182d60e1b308f76b4364c9a757c7ca59debf2' }))))))))), this.showBillingFormSection && (h("div", { key: '71ea650fdb37ff7227b4f8027a54f74c8bf8a575', class: "col-12 mt-4" }, this.showBillingForm && (h("justifi-header", { key: 'f36db4e0d6d008d924ada83a83899377e46ece90', text: "Billing Address", level: "h2", class: "fs-5 fw-bold pb-3" })), this.showPostalCodeForm && (h("justifi-postal-code-form", { key: '19005f53df4bd597ccf6484d662d7d230a8a7b83' })), this.showBillingForm && (h("justifi-billing-information-form", { key: 'e5f501833f7aef3c603d18b29b21c39f990e8ef1' })))), h("div", { key: '828ba958634f58c641a5f6e3a848993d03e4aba0', class: "col-12" }, this.canSavePaymentMethod && (h("justifi-save-new-payment-method", { key: 'e94caf3d77e0299008e6a0bbf6852347eaa02ebf' }))), h("div", { key: '8436468192642a3f20f82b390e5ec53c4dc951bf', class: "mt-4" }, h("justifi-button", { key: '981448c550a72eb1aa936d785912729a1d788cac', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        return (h(StyledHost, { key: '4fb1d82b065de6c1e4651a246a53f8e58451d6f6' }, h("justifi-modular-checkout", { key: '232cf32890422f474cf929b7c7ed7246d7b39c75', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: this.canSavePaymentMethod && this.savePaymentMethod }, h("div", { key: '677ad110b05520be3b729995657086f0f6cbf337', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '458c84541dd154dd8b4ad1d0f2320e2308cc1785', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '440a7d1ad7b21da3db66e6c6f1f9afefb434a089', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '99bd431a8f70ce6e764cc04da3d0aaae6f0ebcbe' }, h("justifi-checkout-summary", { key: '52da663e5bed35f0deb220800c7ede8835a3671b' }))), h("div", { key: 'e95b1c6830d20c5af57c558badb04d07d3c48f23', class: "col-12 mt-4" }, h("slot", { key: '527d58d4806d2e1bbcba499e97ab65f6c9c7efb9', name: "insurance" })), h("div", { key: '69d1319d1e05852de4f5566ad3be20bc9a6ee499', class: "col-12 mt-4" }, h("justifi-header", { key: '1682f909f22172a44da54118aefe428f92908e91', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '7942a12143bea0235705969737e11d59bc5180e1', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '497664d455695693c4f9a1a4465c62ad4d5b6bdf', class: "d-flex flex-column" }, h("section", { key: 'd3da4c18b430e1b36f7b9ba20be517994e763b5e' }, h("div", { key: '1cc0f0462a0f70d2acc4c9fdee25fbb2fe953c22' }, h("justifi-saved-payment-methods", { key: '576da27df84d67bc69f2d95f00a6c440fa73f7ed' }), h("justifi-sezzle-payment-method", { key: '6544a3a250ee012870a9edce71dd763553d44554' }), !this.disableCreditCard && (h("div", { key: '79050f768d8d76c4d882bed667e85391c230a960' }, h("payment-method-option", { key: '5a6c1dc583766707e6215203fdba176bd65b501d', paymentMethodOptionId: PaymentMethodTypes.card, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, radioButtonHidden: this.disableCreditCard, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && (h("div", { key: '5e6f0b854191a9a5db8936b2e30518fba251e478', class: "mt-4 mb-4" }, h("justifi-card-form", { key: '6c3f72f27dfe36924fe94ab4f7c79b6b9ff19b47' }))))), !this.disableBankAccount && (h("div", { key: 'f6a88103b2c30e4dd10e733b19aaa29a7a44430c' }, h("payment-method-option", { key: '67ef047a8caad5bc389238d54bb3d7056ca4b9e6', paymentMethodOptionId: PaymentMethodTypes.bankAccount, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, radioButtonHidden: this.disableBankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && (h("div", { key: 'e67924184fc43811523081711f59865a01d7cf9f', class: "mt-4 mb-4" }, h("justifi-bank-account-form", { key: 'a01cdfe8be1bc98d4c0f75c2a9f2ca1cce519042' }))))))))), this.showBillingFormSection && (h("div", { key: 'a15f1202548c7d6c302c2b2827168a6a119f8634', class: "col-12 mt-4" }, this.showBillingForm && (h("justifi-header", { key: 'ee654c812cb097449937da4253e191de1ee669d5', text: "Billing Address", level: "h2", class: "fs-5 fw-bold pb-3" })), this.showPostalCodeForm && (h("justifi-postal-code-form", { key: '2a5736e6da3354f7a9d1a5b8870a2f61c09c2592' })), this.showBillingForm && (h("justifi-billing-information-form", { key: '7dd63931e75d7583b4f51a1f6bb2b1e84a46e078' })))), h("div", { key: '54aeb0f07f574ee004ec02cd279265202cffa9bf', class: "col-12" }, this.canSavePaymentMethod && (h("justifi-save-new-payment-method", { key: '2e010be22091cee1ebc4353d5dac3b49639175e7' }))), h("div", { key: '71df812c8a922ae8b447d647f69675230c092db9', class: "mt-4" }, h("justifi-button", { key: '057cd18c6235c73cc69ca85e9cb35a2a614a4d9a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {