@justifi/webcomponents 4.11.0 → 4.12.1

package/dist/cjs/justifi-additional-questions-form-step_5.cjs.entry.js

@@ -2,22 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69b9386b.js');
+const index = require('./index-5d5f2219.js');
 const form = require('./form-2ad3d374.js');
-const Business = require('./Business-7ae04d4f.js');
+const Business = require('./Business-c928bf29.js');
 const Api = require('./Api-a06b996e.js');
 require('./Pagination-0da8f095.js');
-require('./Payment-89a8bc21.js');
+require('./Payment-eceed10f.js');
 require('./Payout-a2dd7b01.js');
 const config = require('./config-ff2dda66.js');
-const businessAdditionalQuestionsSchema = require('./business-additional-questions-schema-18a82d19.js');
-const businessFormTypes = require('./business-form-types-29b2bad9.js');
-const businessFormSelectOptions = require('./business-form-select-options-7ccd8dca.js');
-const formInputMasks = require('./form-input-masks-e3bf2614.js');
-const payloadParsers = require('./payload-parsers-f437272e.js');
-const utils = require('./utils-2b9940e1.js');
+const businessAdditionalQuestionsSchema = require('./business-additional-questions-schema-3813615c.js');
+const businessFormTypes = require('./business-form-types-4b138bf2.js');
+const formInputMasks = require('./form-input-masks-efd44b8e.js');
+const payloadParsers = require('./payload-parsers-58d3798e.js');
+const utils = require('./utils-6f62f7a1.js');
 const stateOptions = require('./state-options-4fbcb48a.js');
-const utils$1 = require('./utils-87435719.js');
+const utils$1 = require('./utils-fc72268d.js');
 require('./index.esm-d25bd7bf.js');
 
 const AdditionalQuestionsFormStep = class {
@@ -183,7 +182,7 @@ const BusinessCoreInfoFormStep = class {
     }
     render() {
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (index.h(index.Host, { exportparts: "label,input,input-invalid" }, index.h("form", null, index.h("fieldset", null, index.h("legend", null, "General Info"), index.h("hr", null), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-select", { name: "business_type", label: "Business Type", options: businessFormSelectOptions.BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-select", { name: "business_structure", label: "Business Structure", options: businessFormSelectOptions.BusinessStructureOptions, defaultValue: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), index.h("div", { class: "col-12" }, index.h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: formInputMasks.TAX_ID_MASKS.US })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: formInputMasks.PHONE_MASKS.US })))))));
+        return (index.h(index.Host, { exportparts: "label,input,input-invalid" }, index.h("form", null, index.h("fieldset", null, index.h("legend", null, "General Info"), index.h("hr", null), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-select", { name: "business_type", label: "Business Type", options: businessFormTypes.BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), index.h("div", { class: "col-12" }, index.h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: formInputMasks.TAX_ID_MASKS.US })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: formInputMasks.PHONE_MASKS.US })))))));
     }
 };
 BusinessCoreInfoFormStep.style = businessCoreInfoFormStepCss;
@@ -371,6 +370,15 @@ const BusinessRepresentativeFormStep = class {
         this.onAddressFormUpdate = (values) => {
             this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { address: Object.assign(Object.assign({}, this.formController.values.getValue().address), values) }));
         };
+        this.onDateOfBirthUpdate = (event) => {
+            if (event.detail === '') {
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { dob_day: null, dob_month: null, dob_year: null }));
+            }
+            else {
+                const dob_values = Business.deconstructDate(event.detail);
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { dob_day: dob_values.dob_day, dob_month: dob_values.dob_month, dob_year: dob_values.dob_year }));
+            }
+        };
         this.authToken = undefined;
         this.businessId = undefined;
         this.allowOptionalFields = undefined;
@@ -411,7 +419,7 @@ const BusinessRepresentativeFormStep = class {
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues();
-        return (index.h(index.Host, { exportparts: "label,input,input-invalid" }, index.h("form", null, index.h("fieldset", null, index.h("legend", null, "Representative"), index.h("hr", null), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12 col-md-8" }, index.h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: formInputMasks.PHONE_MASKS.US })), index.h("div", { class: "col-12" }, index.h("label", { part: "label", class: "form-label" }, "Birth Date")), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-datepart", { name: "dob_day", label: "Day", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_day, error: this.errors.dob_day, inputHandler: this.inputHandler, type: "day" })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-datepart", { name: "dob_month", label: "Month", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_month, error: this.errors.dob_month, inputHandler: this.inputHandler, type: "month" })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-datepart", { name: "dob_year", label: "Year", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_year, error: this.errors.dob_year, inputHandler: this.inputHandler, type: "year" })), index.h("div", { class: "col-12" }, index.h("form-control-number", { name: "identification_number", label: "EIN/SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), index.h("div", { class: "col-12" }, index.h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })))))));
+        return (index.h(index.Host, { exportparts: "label,input,input-invalid" }, index.h("form", null, index.h("fieldset", null, index.h("legend", null, "Representative"), index.h("hr", null), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12 col-md-8" }, index.h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: formInputMasks.PHONE_MASKS.US })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), index.h("div", { class: "col-12 col-md-8" }, index.h("form-control-number-masked", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler, mask: formInputMasks.SSN_MASK })), index.h("div", { class: "col-12" }, index.h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })))))));
     }
 };
 BusinessRepresentativeFormStep.style = businessRepresentativeFormStepCss;

package/dist/cjs/justifi-additional-questions_4.cjs.entry.js

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69b9386b.js');
-const businessFormSelectOptions = require('./business-form-select-options-7ccd8dca.js');
-const formInputMasks = require('./form-input-masks-e3bf2614.js');
-const Business = require('./Business-7ae04d4f.js');
+const index = require('./index-5d5f2219.js');
+const businessFormTypes = require('./business-form-types-4b138bf2.js');
+const formInputMasks = require('./form-input-masks-efd44b8e.js');
+const Business = require('./Business-c928bf29.js');
 const stateOptions = require('./state-options-4fbcb48a.js');
-const utils = require('./utils-87435719.js');
-require('./utils-2b9940e1.js');
+const utils = require('./utils-fc72268d.js');
 
 const AdditionalQuestions = class {
     constructor(hostRef) {
@@ -53,7 +52,7 @@ const BusinessCoreInfo = class {
     }
     render() {
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (index.h(index.Host, { exportparts: "label,input,input-invalid" }, index.h("fieldset", null, index.h("legend", null, "General Info"), index.h("hr", null), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-select", { name: "business_type", label: "Business Type", options: businessFormSelectOptions.BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-select", { name: "business_structure", label: "Business Structure", options: businessFormSelectOptions.BusinessStructureOptions, defaultValue: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), index.h("div", { class: "col-12" }, index.h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: formInputMasks.TAX_ID_MASKS.US })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: formInputMasks.PHONE_MASKS.US }))))));
+        return (index.h(index.Host, { exportparts: "label,input,input-invalid" }, index.h("fieldset", null, index.h("legend", null, "General Info"), index.h("hr", null), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-select", { name: "business_type", label: "Business Type", options: businessFormTypes.BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), index.h("div", { class: "col-12" }, index.h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: formInputMasks.TAX_ID_MASKS.US })), index.h("div", { class: "col-12" }, index.h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: formInputMasks.PHONE_MASKS.US }))))));
     }
 };
 BusinessCoreInfo.style = businessCoreInfoCss;
@@ -63,25 +62,27 @@ const businessRepresentativeCss = ":root,[data-bs-theme=light]{--bs-blue:#0d6efd
 const BusinessRepresentative = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { [name]: value }) }));
+        };
+        this.onAddressFormUpdate = (values) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { address: Object.assign(Object.assign({}, this.formController.values.getValue().representative.address), values) }) }));
+        };
+        this.onDateOfBirthUpdate = (event) => {
+            const dob_values = Business.deconstructDate(event.detail);
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { dob_day: dob_values.dob_day, dob_month: dob_values.dob_month, dob_year: dob_values.dob_year }) }));
+        };
         this.formController = undefined;
         this.errors = {};
         this.representative = {};
-        this.inputHandler = this.inputHandler.bind(this);
-        this.onAddressFormUpdate = this.onAddressFormUpdate.bind(this);
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors.representative)));
         this.formController.values.subscribe(values => (this.representative = Object.assign({}, values.representative)));
     }
-    inputHandler(name, value) {
-        this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { [name]: value }) }));
-    }
-    onAddressFormUpdate(values) {
-        this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { address: Object.assign(Object.assign({}, this.formController.values.getValue().representative.address), values) }) }));
-    }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues().representative;
-        return (index.h(index.Host, { exportparts: "label,input,input-invalid" }, index.h("fieldset", null, index.h("legend", null, "Representative"), index.h("hr", null), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12 col-md-8" }, index.h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: formInputMasks.PHONE_MASKS.US })), index.h("div", { class: "col-12" }, index.h("label", { part: "label", class: "form-label" }, "Birth Date")), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-datepart", { name: "dob_day", label: "Day", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_day, error: this.errors.dob_day, inputHandler: this.inputHandler, type: "day" })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-datepart", { name: "dob_month", label: "Month", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_month, error: this.errors.dob_month, inputHandler: this.inputHandler, type: "month" })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-datepart", { name: "dob_year", label: "Year", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_year, error: this.errors.dob_year, inputHandler: this.inputHandler, type: "year" })), index.h("div", { class: "col-12" }, index.h("form-control-number", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), index.h("div", { class: "col-12" }, index.h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (index.h(index.Host, { exportparts: "label,input,input-invalid" }, index.h("fieldset", null, index.h("legend", null, "Representative"), index.h("hr", null), index.h("div", { class: "row gy-3" }, index.h("div", { class: "col-12 col-md-8" }, index.h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { class: "col-12 col-md-6" }, index.h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: formInputMasks.PHONE_MASKS.US })), index.h("div", { class: "col-12 col-md-4" }, index.h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), index.h("div", { class: "col-12 col-md-8" }, index.h("form-control-number-masked", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler, mask: formInputMasks.SSN_MASK })), index.h("div", { class: "col-12" }, index.h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
 };
 BusinessRepresentative.style = businessRepresentativeCss;

package/dist/cjs/justifi-bank-account-form.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69b9386b.js');
+const index = require('./index-5d5f2219.js');
 const config = require('./config-ff2dda66.js');
 
 const BankAccountForm = class {

package/dist/cjs/justifi-billing-form_4.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69b9386b.js');
+const index = require('./index-5d5f2219.js');
 const index_esm = require('./index.esm-d25bd7bf.js');
-const utils = require('./utils-2b9940e1.js');
+const utils = require('./utils-6f62f7a1.js');
 const stateOptions = require('./state-options-4fbcb48a.js');
 
 const BillingFormSchema = index_esm.create$3({
@@ -1567,7 +1567,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "4.11.0";
+const version = "4.12.1";
 const description = "JustiFi Web Components";
 const main = "dist/module/index.js";
 const module$1 = "dist/module/index.js";
@@ -1830,7 +1830,7 @@ const SelectInput = class {
         this.fieldReceivedInput.emit({ name: name, value: target.value });
     }
     render() {
-        return (index.h(index.Host, { exportparts: "label,input,input-invalid" }, index.h("label", { part: "label", class: "form-label" }, this.label), index.h("select", { name: this.name, onInput: event => this.onInput(event), part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map(option => (index.h("option", { value: option.value }, option.label)))), this.error && index.h("div", { class: "invalid-feedback" }, this.error)));
+        return (index.h(index.Host, { exportparts: "label,input,input-invalid,invalid-feedback" }, index.h("label", { part: "label", class: "form-label" }, this.label), index.h("select", { name: this.name, onInput: event => this.onInput(event), part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map(option => (index.h("option", { value: option.value }, option.label)))), this.error && index.h("div", { class: "invalid-feedback", part: "invalid-feedback" }, this.error)));
     }
 };
 SelectInput.style = selectInputCss;
@@ -1853,7 +1853,7 @@ const TextInput = class {
         this.fieldReceivedInput.emit({ name: name, value: target.value });
     }
     render() {
-        return (index.h(index.Host, { exportparts: "label,input,input-invalid" }, index.h("label", { part: "label", class: "form-label" }, this.label), index.h("input", { name: this.name, type: "text", onInput: event => this.onInput(event), value: this.internalValue || this.defaultValue, part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && index.h("div", { class: "invalid-feedback" }, this.error)));
+        return (index.h(index.Host, { exportparts: "label,input,input-invalid,invalid-feedback" }, index.h("label", { part: "label", class: "form-label" }, this.label), index.h("input", { name: this.name, type: "text", onInput: event => this.onInput(event), value: this.internalValue || this.defaultValue, part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && index.h("div", { class: "invalid-feedback", part: "invalid-feedback" }, this.error)));
     }
 };
 TextInput.style = textInputCss;

package/dist/cjs/justifi-business-details.cjs.entry.js

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-69b9386b.js');
-const utils$1 = require('./utils-23e70ef2.js');
+const index = require('./index-5d5f2219.js');
+const utils$1 = require('./utils-6e35fa70.js');
 const config = require('./config-ff2dda66.js');
 const Api = require('./Api-a06b996e.js');
-const Business = require('./Business-7ae04d4f.js');
+const Business = require('./Business-c928bf29.js');
 const utils = require('./utils-f8079741.js');
-require('./utils-2b9940e1.js');
 require('./state-options-4fbcb48a.js');
 
 class BusinessService {