@justifi/webcomponents 4.11.0 → 4.12.1

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

@@ -1,19 +1,18 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-df86d9a2.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-83dcf934.js';
 import { F as FormController } from './form-5279c05a.js';
-import { A as AdditionalQuestions, C as CoreBusinessInfo, O as Owner, R as Representative, a as Address } from './Business-91caaccb.js';
+import { A as AdditionalQuestions, C as CoreBusinessInfo, O as Owner, R as Representative, d as deconstructDate, b as Address } from './Business-6cb1b9c8.js';
 import { A as Api } from './Api-0e88671c.js';
 import './Pagination-afc8f96d.js';
-import './Payment-55886c86.js';
+import './Payment-ef9fc1ae.js';
 import './Payout-dfe15b00.js';
 import { c as config } from './config-476c7241.js';
-import { a as additionalQuestionsSchema, b as businessCoreInfoSchema } from './business-additional-questions-schema-b642a2b7.js';
-import { B as BusinessFormServerErrors, O as OwnerFormClickActions } from './business-form-types-0d76133c.js';
-import { B as BusinessTypeOptions, a as BusinessStructureOptions } from './business-form-select-options-6b9293fe.js';
-import { T as TAX_ID_MASKS, P as PHONE_MASKS } from './form-input-masks-a8187c77.js';
-import { c as parseCoreInfo, d as parseIdentityInfo, i as identitySchema, e as parseAddressInfo, a as addressSchema } from './payload-parsers-920f49dd.js';
-import { e as flattenNestedObject } from './utils-d9e90399.js';
+import { a as additionalQuestionsSchema, b as businessCoreInfoSchema } from './business-additional-questions-schema-228d86e0.js';
+import { B as BusinessFormServerErrors, b as BusinessTypeOptions, O as OwnerFormClickActions } from './business-form-types-5ba52d61.js';
+import { T as TAX_ID_MASKS, P as PHONE_MASKS, S as SSN_MASK } from './form-input-masks-84875967.js';
+import { h as parseCoreInfo, j as parseIdentityInfo, i as identitySchema, k as parseAddressInfo, a as addressSchema } from './payload-parsers-3e817fe9.js';
+import { e as flattenNestedObject } from './utils-243abdb4.js';
 import { S as StateOptions } from './state-options-a356fb11.js';
-import { f as filterPostalInput } from './utils-684d2e47.js';
+import { f as filterPostalInput } from './utils-6f05d9d7.js';
 import './index.esm-22b47398.js';
 
 const AdditionalQuestionsFormStep = class {
@@ -179,7 +178,7 @@ const BusinessCoreInfoFormStep = class {
     }
     render() {
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, 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 })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, 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 })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })))))));
     }
 };
 BusinessCoreInfoFormStep.style = businessCoreInfoFormStepCss;
@@ -367,6 +366,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 = 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;
@@ -407,7 +415,7 @@ const BusinessRepresentativeFormStep = class {
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, 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 })), h("div", { class: "col-12 col-md-4" }, 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 })), h("div", { class: "col-12 col-md-6" }, 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 })), h("div", { class: "col-12 col-md-6" }, 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: PHONE_MASKS.US })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-12 col-md-4" }, 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" })), h("div", { class: "col-12 col-md-4" }, 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" })), h("div", { class: "col-12 col-md-4" }, 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" })), h("div", { class: "col-12" }, 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 })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, 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 })), h("div", { class: "col-12 col-md-4" }, 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 })), h("div", { class: "col-12 col-md-6" }, 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 })), h("div", { class: "col-12 col-md-6" }, 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: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, 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 })), h("div", { class: "col-12 col-md-8" }, 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: SSN_MASK })), h("div", { class: "col-12" }, 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/esm/justifi-additional-questions_4.entry.js

@@ -1,10 +1,9 @@
-import { r as registerInstance, h, H as Host } from './index-df86d9a2.js';
-import { B as BusinessTypeOptions, a as BusinessStructureOptions } from './business-form-select-options-6b9293fe.js';
-import { T as TAX_ID_MASKS, P as PHONE_MASKS } from './form-input-masks-a8187c77.js';
-import { C as CoreBusinessInfo } from './Business-91caaccb.js';
+import { r as registerInstance, h, H as Host } from './index-83dcf934.js';
+import { b as BusinessTypeOptions } from './business-form-types-5ba52d61.js';
+import { T as TAX_ID_MASKS, P as PHONE_MASKS, S as SSN_MASK } from './form-input-masks-84875967.js';
+import { C as CoreBusinessInfo, d as deconstructDate } from './Business-6cb1b9c8.js';
 import { S as StateOptions } from './state-options-a356fb11.js';
-import { f as filterPostalInput } from './utils-684d2e47.js';
-import './utils-d9e90399.js';
+import { f as filterPostalInput } from './utils-6f05d9d7.js';
 
 const AdditionalQuestions = class {
     constructor(hostRef) {
@@ -49,7 +48,7 @@ const BusinessCoreInfo = class {
     }
     render() {
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, 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 })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, 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 })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
 };
 BusinessCoreInfo.style = businessCoreInfoCss;
@@ -59,25 +58,27 @@ const businessRepresentativeCss = ":root,[data-bs-theme=light]{--bs-blue:#0d6efd
 const BusinessRepresentative = class {
     constructor(hostRef) {
         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 = 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 (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, 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 })), h("div", { class: "col-12 col-md-4" }, 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 })), h("div", { class: "col-12 col-md-6" }, 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 })), h("div", { class: "col-12 col-md-6" }, 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: PHONE_MASKS.US })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-12 col-md-4" }, 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" })), h("div", { class: "col-12 col-md-4" }, 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" })), h("div", { class: "col-12 col-md-4" }, 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" })), h("div", { class: "col-12" }, 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 })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, 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 })), h("div", { class: "col-12 col-md-4" }, 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 })), h("div", { class: "col-12 col-md-6" }, 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 })), h("div", { class: "col-12 col-md-6" }, 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: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, 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 })), h("div", { class: "col-12 col-md-8" }, 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: SSN_MASK })), h("div", { class: "col-12" }, 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/esm/justifi-bank-account-form.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-df86d9a2.js';
+import { r as registerInstance, c as createEvent, h } from './index-83dcf934.js';
 import { c as config } from './config-476c7241.js';
 
 const BankAccountForm = class {

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, c as createEvent } from './index-df86d9a2.js';
+import { r as registerInstance, h, H as Host, c as createEvent } from './index-83dcf934.js';
 import { c as create$3, a as create$6 } from './index.esm-22b47398.js';
-import { R as RegExZip, o as composeQueryParams } from './utils-d9e90399.js';
+import { R as RegExZip, n as composeQueryParams } from './utils-243abdb4.js';
 import { S as StateOptions } from './state-options-a356fb11.js';
 
 const BillingFormSchema = create$3({
@@ -1563,7 +1563,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 = "dist/module/index.js";
@@ -1826,7 +1826,7 @@ const SelectInput = class {
         this.fieldReceivedInput.emit({ name: name, value: target.value });
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), 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 => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        return (h(Host, { exportparts: "label,input,input-invalid,invalid-feedback" }, h("label", { part: "label", class: "form-label" }, this.label), 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 => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback", part: "invalid-feedback" }, this.error)));
     }
 };
 SelectInput.style = selectInputCss;
@@ -1849,7 +1849,7 @@ const TextInput = class {
         this.fieldReceivedInput.emit({ name: name, value: target.value });
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), 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 && h("div", { class: "invalid-feedback" }, this.error)));
+        return (h(Host, { exportparts: "label,input,input-invalid,invalid-feedback" }, h("label", { part: "label", class: "form-label" }, this.label), 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 && h("div", { class: "invalid-feedback", part: "invalid-feedback" }, this.error)));
     }
 };
 TextInput.style = textInputCss;

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

@@ -1,10 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-df86d9a2.js';
-import { E as ErrorState } from './utils-d01c5f3a.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-83dcf934.js';
+import { E as ErrorState } from './utils-210fdf39.js';
 import { c as config } from './config-476c7241.js';
 import { A as Api } from './Api-0e88671c.js';
-import { B as Business } from './Business-91caaccb.js';
+import { B as Business } from './Business-6cb1b9c8.js';
 import { C as ComponentErrorSeverity, g as getErrorMessage, a as getErrorCode, b as ComponentErrorCodes } from './utils-4609f32c.js';
-import './utils-d9e90399.js';
 import './state-options-a356fb11.js';
 
 class BusinessService {