@justifi/webcomponents 6.11.0 → 6.12.0

package/dist/cjs/bank-account-document-form-inputs_9.cjs.entry.js

@@ -15,10 +15,10 @@ var parts = require('./parts-BXshb_S-.js');
 var utils$1 = require('./utils-BHi4j5rB.js');
 var skeleton = require('./skeleton-DvRCiQlA.js');
 require('./event-types-YOY5TKUN.js');
-var formControlErrorText = require('./form-control-error-text-BO58Y6zF.js');
 var inputHandlers = require('./input-handlers-_51J5q7J.js');
 var formInputMasks = require('./form-input-masks-BnNFJ3IJ.js');
 var countryConfig = require('./country-config-D7fss2oF.js');
+var formControlErrorText = require('./form-control-error-text-BO58Y6zF.js');
 var paymentProvisioningActions = require('./payment-provisioning-actions-J6TGZZb9.js');
 var business_service = require('./business.service-mliLE8kX.js');
 var button = require('./button-CR9Rl1-o.js');
@@ -33,7 +33,7 @@ const BankAccountDocumentFormInputs = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '7f9ea576aad16f3c2ea45c987a38878ea65f2df2', class: "row gy-3" }, index.h("div", { key: '316fe3f20df7c7dce2b8903e6073e0fe7920e5e8', class: "col-12" }, index.h("form-control-file", { key: '320d6b7f3de2cfeeb30eb1e08ca4122123854ffd', name: "voided_check", label: "Voided Check", documentType: Plaid.EntityDocumentType.voidedCheck, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["voided_check"], multiple: true })), index.h("div", { key: 'f33a936c61c14c701e40d375e4dfc4c554b8293c', class: "col-12" }, index.h("form-control-file", { key: '1e160d8211a71175d6a45b10590fb2c8774f61e1', name: "bank_statement", label: "Bank Statement", documentType: Plaid.EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));
+        return (index.h("div", { key: '21704b76489b20612c7cdd58c88eece76b22eedc', class: "row gy-3" }, index.h("div", { key: '2ce2b542e045ab94cb09a15edd6f5856f94568b4', class: "col-12" }, index.h("form-control-file", { key: '5c00356384dc5c25005d90c40ccb9c0958f927da', name: "voided_check", label: "Voided Check", documentType: Plaid.EntityDocumentType.voidedCheck, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["voided_check"], multiple: true })), index.h("div", { key: '7736a13bf2055c797168260e3d8e3feb99f931d0', class: "col-12" }, index.h("form-control-file", { key: '14cc4abc95227840de14c5f4278b668fc759469e', name: "bank_statement", label: "Bank Statement", documentType: Plaid.EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));
     }
 };
 
@@ -43,7 +43,7 @@ const BankAccountFormInputs = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h("div", { key: '5dc7139f54d11979410d0d67ca29e65b02f30200', class: "row gy-3" }, index.h("div", { key: '118f15bf02855b24baec5ce2a2c3cf5b241b3da4', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (index.h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), index.h("div", { key: 'db03eccee03ec4b7d0de637306315982a2cd770d', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (index.h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), index.h("div", { key: '217120e0052b8ee41cac8f901ac4d9742b0c6ea9', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (index.h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), index.h("div", { key: 'f589511545d6262966a6fa2888cb78babacfb770', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (index.h("form-control-select", { name: "account_type", label: "Account Type", options: businessFormOptions.bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), index.h("div", { key: '24df83bb2666cee381c266608c43f3fd729db4cf', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (index.h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." }))), index.h("div", { key: '75fe11d71e57707d088f8a90a250621fce82647f', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Routing Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.routing_number) || '' })) : (index.h("form-control-text", { name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." })))));
+        return (index.h("div", { key: '99049fb4516527dfa898467b2bb990e408a41af5', class: "row gy-3" }, index.h("div", { key: '84f1acf2f116b9835642825cecd5acbce8a33b59', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (index.h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), index.h("div", { key: '53e7f5892b460196d73eff31f1549e144b919935', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (index.h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), index.h("div", { key: '07738bf8baacf5e0b5f336cfbd2a527423293de1', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (index.h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), index.h("div", { key: '4f616bad64f7f3c5cb81bbc17bb0c04b3090e1f3', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (index.h("form-control-select", { name: "account_type", label: "Account Type", options: businessFormOptions.bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), index.h("div", { key: 'cb7294a8009929a7ff9c3a540ddfc82175845f07', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (index.h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." }))), index.h("div", { key: '94a1ed2a323c53eb911126aed75300df5883165c', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Routing Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.routing_number) || '' })) : (index.h("form-control-text", { name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." })))));
     }
 };
 
@@ -53,7 +53,7 @@ const BankAccountFormInputsCanada = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (index.h("div", { key: '34cbf10449df73748095fd7122d0ae1355a83e13', class: "row gy-3" }, index.h("div", { key: '607cc5cbc70fdd2d5a325bef7002a44740394282', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (index.h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), index.h("div", { key: 'f57f4cd733f2dd439d6d83f32078371618f5fa06', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (index.h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), index.h("div", { key: 'b92dface0116321ea990bfcaf1b036b5629385db', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (index.h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), index.h("div", { key: '45d68efa47de76ee420cedfb97e82f498a2de97b', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (index.h("form-control-select", { name: "account_type", label: "Account Type", options: businessFormOptions.bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), index.h("div", { key: '8419925e8470d63d506e1f7e82ccdf1a1132ecc0', class: "col-3" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Transit Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.transit_number) || '' })) : (index.h("form-control-text", { name: "transit_number", label: "Transit Number", defaultValue: this.defaultValue.transit_number, maxLength: 5, errorText: this.errors.transit_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "5 digits" }))), index.h("div", { key: 'aa6e83c409e0cf93f1903394f63c0b719ec8808e', class: "col-3" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Institution Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.institution_number) || '' })) : (index.h("form-control-text", { name: "institution_number", label: "Institution Number", defaultValue: this.defaultValue.institution_number, maxLength: 3, errorText: this.errors.institution_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "3 digits" }))), index.h("div", { key: '029058c023daca9d0488f45478af6edafe359df7', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Number", value: ((_g = this.defaultValue) === null || _g === void 0 ? void 0 : _g.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (index.h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "Please copy the account number as shown on your statement. Do not include spaces or dashes." })))));
+        return (index.h("div", { key: '9c6cd8a4758f33bfa57f8db04ab69739ddbe47fa', class: "row gy-3" }, index.h("div", { key: '7d59df10771a07fcf04ab4ca80e0a8da15d76ec0', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (index.h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), index.h("div", { key: 'ab2d9643d66bd7ad481190a731e7f1d44daeaf35', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (index.h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), index.h("div", { key: '5a61a86d9f9170ab19adec07fe2e86951c3579d8', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (index.h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), index.h("div", { key: '415209fa3008a1cb3e690d5638aae25b2d5bc627', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (index.h("form-control-select", { name: "account_type", label: "Account Type", options: businessFormOptions.bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), index.h("div", { key: 'b026df714d79815dd93906f7cff0f875d4d43216', class: "col-3" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Transit Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.transit_number) || '' })) : (index.h("form-control-text", { name: "transit_number", label: "Transit Number", defaultValue: this.defaultValue.transit_number, maxLength: 5, errorText: this.errors.transit_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "5 digits" }))), index.h("div", { key: '9ebdf63a1330f891556fa0b8ca4c76705f9671ea', class: "col-3" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Institution Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.institution_number) || '' })) : (index.h("form-control-text", { name: "institution_number", label: "Institution Number", defaultValue: this.defaultValue.institution_number, maxLength: 3, errorText: this.errors.institution_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "3 digits" }))), index.h("div", { key: '4735d605033bd646088b8701508000376cc690f3', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Number", value: ((_g = this.defaultValue) === null || _g === void 0 ? void 0 : _g.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (index.h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "Please copy the account number as shown on your statement. Do not include spaces or dashes." })))));
     }
 };
 
@@ -62,7 +62,7 @@ const BankAccountReadOnlyValue = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'ad9eadcf49dbc67e51cd814d3ded334a587cc17c' }, index.h("label", { key: 'b8ba3d8b7ef9fc33e0e0870f71b7df5dbfae4759', class: "form-label", part: parts.text }, this.label), index.h("div", { key: '1839bdadb96b3c814c73991530497f9a7be6a10d', part: parts.text }, this.value || '')));
+        return (index.h("div", { key: 'eb03c591b0c8169da34549d08b4964f6c6bf26cb' }, index.h("label", { key: '0864f3322be289d5213ab3bf689fab81768a55df', class: "form-label", part: parts.text }, this.label), index.h("div", { key: '5ffdc1c3a5b84d7c55c9dcdb25d58f14b51c34e3', part: parts.text }, this.value || '')));
     }
 };
 
@@ -86,7 +86,31 @@ const BusinessDocumentsOnFile = class {
     }
 };
 
-const FileInput = class {
+const BusinessRepresentativeFormInputs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isEditingIdentification = false;
+        this.inputHandler = (name, value) => {
+            inputHandlers.updateFormValues(this.formController, { [name]: value });
+        };
+        this.onAddressFormUpdate = (values) => {
+            inputHandlers.updateAddressFormValues(this.formController, Object.assign(Object.assign({}, this.formController.values.getValue().address), values));
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (index.h("form", { key: '580cc163d4a4ef66cbb0fe81af2166d759caeeeb' }, index.h("fieldset", { key: '08086211fcb72f513bd5be32356617573ef70490' }, index.h("div", { key: '6685a37111331c6a9398827bccc81983f0710dec', class: "d-flex align-items-center gap-2" }, index.h("legend", { key: '426288711b83c90a00b5fc5848d9ed73d5cba497', class: "mb-0", part: parts.heading2 }, "Representative"), index.h("form-control-tooltip", { key: '12fcc06fb816415b4e3ebaf500dbeffda0ada39b', helpText: "The representative for your business needs to be someone who has significant control over managing your business's finance. You will have an opportunity to add owners later in the form." })), index.h("hr", { key: 'a405d27e2fdf8cf582e64b13a7bc46ffb746200d', class: "mt-2" }), index.h("div", { key: '083901b24bf65cea21850e409d51d65d69d7755a', class: "row gy-3" }, index.h("div", { key: '1f5cc8b3478849a3ded3ac7d00a3235d281653fb', class: "col-12 col-md-8" }, index.h("form-control-text", { key: '123959d648781de5937725731e81659f886d8331', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: 'a0184a9578b9c479795ef1647f0fd3afef9ca0be', class: "col-12 col-md-4" }, index.h("form-control-text", { key: 'c15816619a4d257dbe962ae0979472495e5cf9a4', 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." })), index.h("div", { key: '102d285365880f746517ee49f7bee1bd4753a4df', class: "col-12 col-md-6" }, index.h("form-control-text", { key: 'cd81f70f7ae01f06cebd66da58950943578cc5a1', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { key: '7b2d40d02a5b7d21901aed889609bf168a2adbbe', class: "col-12 col-md-6" }, index.h("form-control-number-masked", { key: '43a781692abe57493fbdc40080c4f03919878791', 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: formInputMasks.PHONE_MASKS.US })), index.h("div", { key: '22e2d29dd536eb9ece522dad9b8138c0df4090f7', class: "col-12 col-md-4" }, index.h("form-control-date", { key: '7bc2e191dcca6b840d6d50e4714af5053844ffc7', 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) => inputHandlers.updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), index.h("div", { key: '80c790db5b938b70fb74642ab4e5ced869f46f3a', class: "col-12 col-md-8" }, (!((_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.ssn_last4) || this.isEditingIdentification) ? (index.h("form-control-number-masked", { name: "identification_number", label: countryConfig.countryLabels[this.country].idNumberLabel, defaultValue: this.isEditingIdentification ? '' : (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: formInputMasks.IDENTITY_MASKS[this.country], helpText: countryConfig.countryLabels[this.country].identityHelpText })) : (index.h("div", null, index.h("label", { class: "form-label", part: parts.label }, countryConfig.countryLabels[this.country].idNumberLabel), index.h("div", { class: "input-group mb-3" }, index.h("input", { type: "text", class: "form-control", part: parts.inputDisabled, value: `****${(_h = this.representativeDefaultValue) === null || _h === void 0 ? void 0 : _h.ssn_last4}`, disabled: true }), index.h("button", { class: "btn btn-secondary", type: "button", part: parts.buttonSecondary, onClick: () => {
+                this.isEditingIdentification = true;
+                // Clear current value to force validation
+                inputHandlers.updateFormValues(this.formController, {
+                    identification_number: '',
+                    ssn_last4: null
+                });
+            } }, "Change"))))), index.h("div", { key: '84afac0a4f45f734bf1dd5266882feaed8e3a4ea', class: "col-12" }, index.h("identity-address-form", { key: 'dfe5ddbccc76a3b60e0594c8a7ba30b893682a59', errors: this.errors.address, defaultValues: (_j = this.representativeDefaultValue) === null || _j === void 0 ? void 0 : _j.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
+    }
+};
+
+const FormControlFile = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.formControlInput = index.createEvent(this, "formControlInput", 7);
@@ -129,39 +153,15 @@ const FileInput = class {
         return part;
     }
     render() {
-        return (index.h(index.Host, { key: '5dae73a138845ac8e08102905fb9ccae526519b5' }, index.h("div", { key: '38fa7c7c23abf18530a1508e93dee487382f8456', class: "form-group d-flex flex-column" }, index.h("div", { key: '3c90cfef275acbc2383f3af046b342408e524659', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '65af257367512c58f75bff6ecc09248148c0929f', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'd54ddf27dd6197f52487e342963e442dc04aa459', helpText: this.helpText })), index.h("input", { key: '033108ddee4cac2aca98bcde260ab391e24b8ce5', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (index.h(index.Host, { key: '1f5c8bdc73c664cf40acb4f5b61db454bbda36a0' }, index.h("div", { key: '77f0007875132d26dd8df91dfb53386da9e15ce4', class: "form-group d-flex flex-column" }, index.h("div", { key: 'a6885165580120dbaffaedf60edf2e2cc9883a9f', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '489b6d49a60f8339722537084f64746e5625297d', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'fc581e32bfb8935e79648c0a670bcb26bf225fe4', helpText: this.helpText })), index.h("input", { key: '34ddfe0796848feadcd6249ed861c5fa623840d4', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            } }), index.h(formControlErrorText.FormControlErrorText, { key: '81aec26bc0781bbcfe531d37c0dd4bf6966ef9ce', errorText: this.errorText, name: this.name }))));
+            } }), index.h(formControlErrorText.FormControlErrorText, { key: '4a0c1869b8b19a01273d8f1ca3f3cd92134ddb58', errorText: this.errorText, name: this.name }))));
     }
     get el() { return index.getElement(this); }
 };
 
-const RepresentativeFormInputs = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.isEditingIdentification = false;
-        this.inputHandler = (name, value) => {
-            inputHandlers.updateFormValues(this.formController, { [name]: value });
-        };
-        this.onAddressFormUpdate = (values) => {
-            inputHandlers.updateAddressFormValues(this.formController, Object.assign(Object.assign({}, this.formController.values.getValue().address), values));
-        };
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (index.h("form", { key: 'a9c0f6332bf302d5eb9f93c4ca045d572a40468f' }, index.h("fieldset", { key: '115c564826335a9c7b670bbc0409912c3eb7a4aa' }, index.h("div", { key: '6de8909b4b2f3c7d8ec4665aad77ef59cdf035b4', class: "d-flex align-items-center gap-2" }, index.h("legend", { key: 'bb8b5a3775eae450a866356a9e149a0bf57b5699', class: "mb-0", part: parts.heading2 }, "Representative"), index.h("form-control-tooltip", { key: 'a0296d4a3c35a039525f39501e117ee6fdd12257', 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." })), index.h("hr", { key: 'abbee22f5664275f27dd8eeb2b12c87b059ff024', class: "mt-2" }), index.h("div", { key: 'e165ff125df62dc1d22b7329fe7fe2ff200cbbb3', class: "row gy-3" }, index.h("div", { key: '114ff752eeda3ffa90529ff6bc675b874f543336', class: "col-12 col-md-8" }, index.h("form-control-text", { key: '8b6ce9f4a327ca5282aa32c226f671945aa10404', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: 'bce864367883c6bbf7bd0841114a3dbb39db692b', class: "col-12 col-md-4" }, index.h("form-control-text", { key: 'ec3e72dc3f84c0daee2c6509f7dbf2bad22f5db6', 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." })), index.h("div", { key: '200ae959d897d9d22016553d3c586cf3f0438dd9', class: "col-12 col-md-6" }, index.h("form-control-text", { key: '4f77d6ca6c3c85edabc11af6f5703ab1327f05e7', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { key: 'cf642ee73f7ae8b254920a3f781c23dc456f16ae', class: "col-12 col-md-6" }, index.h("form-control-number-masked", { key: 'df609213bec728f17b2527a2e99ff3e0e69604aa', 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: formInputMasks.PHONE_MASKS.US })), index.h("div", { key: '2e4565c06976723ae4e497a5305cea7468bac2f4', class: "col-12 col-md-4" }, index.h("form-control-date", { key: 'ca7d4bf05c32d1d9983df430d338cc3433015957', 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) => inputHandlers.updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), index.h("div", { key: 'f6cbe1b7f4e5575f626e6d73f31b4a1a09ac33e3', class: "col-12 col-md-8" }, (!((_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.ssn_last4) || this.isEditingIdentification) ? (index.h("form-control-number-masked", { name: "identification_number", label: countryConfig.countryLabels[this.country].idNumberLabel, defaultValue: this.isEditingIdentification ? '' : (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: formInputMasks.IDENTITY_MASKS[this.country], helpText: countryConfig.countryLabels[this.country].identityHelpText })) : (index.h("div", null, index.h("label", { class: "form-label", part: parts.label }, countryConfig.countryLabels[this.country].idNumberLabel), index.h("div", { class: "input-group mb-3" }, index.h("input", { type: "text", class: "form-control", part: parts.inputDisabled, value: `****${(_h = this.representativeDefaultValue) === null || _h === void 0 ? void 0 : _h.ssn_last4}`, disabled: true }), index.h("button", { class: "btn btn-secondary", type: "button", part: parts.buttonSecondary, onClick: () => {
-                this.isEditingIdentification = true;
-                // Clear current value to force validation
-                inputHandlers.updateFormValues(this.formController, {
-                    identification_number: '',
-                    ssn_last4: null
-                });
-            } }, "Change"))))), index.h("div", { key: 'e3fa556dece2feaf5eb175ae3734c2319777ef48', class: "col-12" }, index.h("justifi-identity-address-form", { key: 'fe3d349371d11b8a246b9c31aebd7d9c84e03f8e', errors: this.errors.address, defaultValues: (_j = this.representativeDefaultValue) === null || _j === void 0 ? void 0 : _j.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
-    }
-};
-
-const BusinessOwnerForm = class {
+const OwnerForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.errorEvent = index.createEvent(this, "error-event", 7);
@@ -198,7 +198,7 @@ const BusinessOwnerForm = class {
         });
     }
     render() {
-        return (index.h("owner-form-core", { key: '47c36dfc76ac8a108950e17770d1a0fb06fe4e42', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, country: this.country, ref: ref => this.coreComponent = ref }));
+        return (index.h("owner-form-core", { key: '82a1976007db4371de3c8da1cff48f27a9c7795e', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, country: this.country, ref: ref => this.coreComponent = ref }));
     }
 };
 
@@ -519,7 +519,7 @@ exports.bank_account_form_inputs = BankAccountFormInputs;
 exports.bank_account_form_inputs_canada = BankAccountFormInputsCanada;
 exports.bank_account_read_only_value = BankAccountReadOnlyValue;
 exports.business_documents_on_file = BusinessDocumentsOnFile;
-exports.form_control_file = FileInput;
-exports.justifi_business_representative_form_inputs = RepresentativeFormInputs;
-exports.justifi_owner_form = BusinessOwnerForm;
+exports.business_representative_form_inputs = BusinessRepresentativeFormInputs;
+exports.form_control_file = FormControlFile;
+exports.owner_form = OwnerForm;
 exports.plaid_verification = PlaidVerification;

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

@@ -4,9 +4,11 @@ var index = require('./index-p7cvUYAE.js');
 var skeleton = require('./skeleton-DvRCiQlA.js');
 var configState = require('./config-state-BIgGhhe9.js');
 var utils = require('./utils-BHi4j5rB.js');
+var checkPkgVersion = require('./check-pkg-version-CUhnNGii.js');
 require('./parts-BXshb_S-.js');
 require('./index-W-zoNiyM.js');
 require('./dinero-BwNN_k7x.js');
+require('./package-CJg8qLYd.js');
 
 const BankAccountFormSkeleton = (props) => {
     const { isReady } = props;
@@ -25,6 +27,7 @@ const BankAccountForm = class {
         await configState.waitForConfig();
         this.iframeOrigin = configState.configState.iframeOrigin;
         this.tabId = utils.generateTabId();
+        checkPkgVersion.checkPkgVersion();
     }
     componentDidRender() {
         const elements = [
@@ -44,14 +47,15 @@ const BankAccountForm = class {
         const routingNumberIsValid = await this.routingNumberIframeElement.validate();
         return accountNumberIsValid && routingNumberIsValid;
     }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    async tokenize({ clientId, paymentMethodMetadata, account }) {
+        const result = await this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+        return result;
     }
     render() {
-        return (index.h(index.Host, { key: 'a104b2e88e818472d0158990ccf2cac6d7315616' }, index.h(BankAccountFormSkeleton, { key: '1ed1ac87a66aedf6a7528247e0ff3a803c74e4c3', isReady: this.isReady }), index.h("div", { key: 'a96c05c60c51f97c8abb7dc6a8cfebc940ea1513', class: "container-fluid p-0", style: {
+        return (index.h("div", { key: '73e3f3c28652ec1a0256ea8668db6ebe56e929ba' }, index.h(BankAccountFormSkeleton, { key: 'cf8bd04492e821a4c39c61c549dec728fc24696e', isReady: this.isReady }), index.h("hidden-input", { key: '877eeb9963fb9971e372a05eb3de1bee66d5b765' }), index.h("div", { key: '8a5c6dced3dfd9ce2486712e6a7d90b3710721bc', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, index.h("div", { key: '3d168fd241702b30f0c8727d3c0aae65c20b69aa', class: "row mb-3" }, index.h("iframe-input", { key: 'dc1da989b1577ed62b3eeafd33128aca38e4610d', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), index.h("div", { key: '1179ae9d6b9f476bb01a1ee4f4edd7da6f22f635', class: "row" }, index.h("iframe-input", { key: '7e79b383876be1711a2e21ab7462f86281ebf28c', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+            } }, index.h("div", { key: '35f116944ac3fbda6f46cd3335dd442fc5284fc3', class: "row mb-3" }, index.h("iframe-input", { key: 'c9bfd6124f3107b703ee4c43946560940b93899f', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), index.h("div", { key: '43a3d810081ad218ce3fd57627c1c93efc4fb1eb', class: "row" }, index.h("iframe-input", { key: '4b2d6d3213c4ba44cf63a1297d34975c894010f6', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
 };
 

package/dist/cjs/card-form.cjs.entry.js

@@ -4,9 +4,11 @@ var index = require('./index-p7cvUYAE.js');
 var skeleton = require('./skeleton-DvRCiQlA.js');
 var configState = require('./config-state-BIgGhhe9.js');
 var utils = require('./utils-BHi4j5rB.js');
+var checkPkgVersion = require('./check-pkg-version-CUhnNGii.js');
 require('./parts-BXshb_S-.js');
 require('./index-W-zoNiyM.js');
 require('./dinero-BwNN_k7x.js');
+require('./package-CJg8qLYd.js');
 
 const CardFormSkeleton = (props) => {
     const { isReady } = props;
@@ -25,6 +27,7 @@ const CardForm = class {
         await configState.waitForConfig();
         this.iframeOrigin = configState.configState.iframeOrigin;
         this.tabId = utils.generateTabId();
+        checkPkgVersion.checkPkgVersion();
     }
     componentDidRender() {
         const elements = [
@@ -48,14 +51,15 @@ const CardForm = class {
         const cvvIsValid = await this.cvvIframeElement.validate();
         return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
     }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    async tokenize({ clientId, paymentMethodMetadata, account, }) {
+        const result = await this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+        return result;
     }
     render() {
-        return (index.h(index.Host, { key: 'fd58409622904cfdbe1df9e7aa893cec0b469472' }, index.h(CardFormSkeleton, { key: '7bd4dbc17afc1641eafa5cc6c12349901a05b862', isReady: this.isReady }), index.h("div", { key: '1eb88b3443cb12f592a247335d5a6de2597bf10d', class: "container-fluid p-0", style: {
+        return (index.h("div", { key: 'd3cb1fca6595f60e5f5f122b73d3d6c11a826423' }, index.h(CardFormSkeleton, { key: 'f83dcbbc214d460bb21c015ec051436ed5cf6670', isReady: this.isReady }), index.h("hidden-input", { key: '5fad0d06303d0ddb55c30c2cd94014255f2a8cec' }), index.h("div", { key: '68440756a1aad69b5c95245e7a2a5feb16899dca', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, index.h("div", { key: '4b50883a1094343e1f039c8bafed2ecfb42be0e8', class: "mb-3" }, index.h("iframe-input", { key: '83930c6af6b6a7eb82bf66565fa2e9d16b3bfa59', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), index.h("div", { key: '33c8a34d012abc533d5b69baa3fddfcb3714be61', class: "d-flex align-items-start" }, index.h("div", { key: 'b37fedaab03b543789fb2909d0daa91d28d9b772', class: "flex-fill me-3" }, index.h("iframe-input", { key: 'd5fa7b25f4726e6896ee8fcf0a2ab882b1df5260', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), index.h("div", { key: '38798bb90f5457d3e5c3659c716fe38a79a2f2a0', class: "flex-fill me-3" }, index.h("iframe-input", { key: '44d57ddbe4221e1d0000a9db7a19d8878211cb50', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), index.h("div", { key: '233f99090baecc6097f2226d93a14d428571b03f', class: "flex-fill" }, index.h("iframe-input", { key: '0d353a3bc4c1ece3a5ff3aecc9aabf349d59bc90', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
+            } }, index.h("div", { key: 'b39eab56c79463935f1a1bb15cc867997f026e7b', class: "mb-3" }, index.h("iframe-input", { key: '25a2390a8c3c92d5e6eceafe6b821202ecb22d76', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), index.h("div", { key: '68766798d954a0b3d093ae13c3c2955f819da4f2', class: "row" }, index.h("div", { key: '05539f1ac8ebb0397574d55b4b76d7acdb7d2dca', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '4c437a4384e6c301e18824d799784c1133e70ee3', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), index.h("div", { key: 'b9a5b8b5dda1d8ab6305c9dc1ef9b655eb02fb3d', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'c1a412c20e75d21c1084a4b93f22362c367c1907', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), index.h("div", { key: 'abdfdbd7eb784871011397a7c5fdf371e3c6baf0', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '08dff072e785846d7543018c194b4df6ce5b343e', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
 };
 

package/dist/cjs/check-pkg-version-CUhnNGii.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var _package = require('./package-CJg8qLYd.js');
+
+const JUSTIFI_VERSION_KEY = '__JUSTIFI_WC_VERSION__';
+const detectDuplicateVersion = () => {
+    if (typeof globalThis === 'undefined')
+        return;
+    const currentVersion = _package.packageJson.version;
+    const existingVersion = globalThis[JUSTIFI_VERSION_KEY];
+    if (existingVersion && existingVersion !== currentVersion) {
+        console.error(`@justifi/webcomponents: Multiple versions detected. ` +
+            `Version ${existingVersion} was loaded first and registered all components. ` +
+            `Version ${currentVersion} is also present but its components will NOT be used. ` +
+            `To fix this, add to your package.json:\n` +
+            `"pnpm": { "overrides": { "@justifi/webcomponents": "${currentVersion}" } }`);
+        return;
+    }
+    globalThis[JUSTIFI_VERSION_KEY] = currentVersion;
+};
+const latestVersion = async (packageName) => {
+    const response = await fetch('https://registry.npmjs.org/' + packageName + '/latest');
+    const json = await response.json();
+    return json.version;
+};
+const checkPkgVersion = async () => {
+    var _a, _b;
+    detectDuplicateVersion();
+    // Skip version check in test environments to avoid async logs after tests complete
+    if (typeof process !== 'undefined' &&
+        (((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test' || ((_b = process.env) === null || _b === void 0 ? void 0 : _b.JEST_WORKER_ID))) {
+        return;
+    }
+    const version = _package.packageJson.version;
+    const packageName = _package.packageJson.name;
+    const latest = await latestVersion(packageName);
+    // remove rc from version and everything that comes after -rc
+    const latestNotRC = latest.replace(/-rc.*/, '');
+    // checkif there's a major version difference
+    const versionParts = version.split('.');
+    const latestParts = latest.split('.');
+    if (versionParts[0] !== latestParts[0]) {
+        console.warn(`The package ${packageName} is out of date. The latest version is ${latestNotRC}. Please update.`);
+    }
+};
+
+exports.checkPkgVersion = checkPkgVersion;

package/dist/cjs/checkouts-list-core.cjs.entry.js

@@ -134,7 +134,7 @@ const CheckoutsListCore = class {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (index.h(table.TableWrapper, { key: '54239d9ac3afe4d4594d523f9b84b5bf852190b7' }, index.h(table.TableComponent, { key: '0c466e435625f08326fc521690c055648a0d3a6e' }, index.h(table.TableHead, { key: '6ac0b1a9bf3d42eb5bac5910f341c84a75d15eaa' }, index.h(table.TableHeadRow, { key: '171cc43a933be88dcfe2385414d6368755a66a00' }, this.checkoutsTable.columnData.map((column) => column))), index.h(table.TableBody, { key: '238b814cfb2e27fa0ae0aee319da04fb7a9da477' }, index.h(table.TableLoadingState, { key: '3e73b173a14edea582ee06caa248dd31bf7e8971', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), index.h(table.TableEmptyState, { key: 'cd2ec244aa3663f4255f245727790c30c28438f7', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), index.h(table.TableErrorState, { key: 'e2f458e70836a01cca79aa6e43c7d8a89bfa593d', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index$1) => (index.h(table.TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler }, data)))), this.paging && (index.h(table.TableFoot, { key: '97d1c34429fba943a752e9ece7348dd19d742c68' }, index.h(table.TableFootRow, { key: '252e8f76070a8a6a531c710cf36117a04625271a' }, index.h(table.TableFootCell, { key: 'a3fcfa5e6a90cac15348a387f65fa5b7ed2517f8', colSpan: this.checkoutsTable.columnData.length }, index.h("pagination-menu", { key: 'e4fa2774647748fd12c3742b3dd078aee8fdf483', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (index.h(table.TableWrapper, { key: '206c2b631670e6ccf7660273e890f2b0425cd9ec' }, index.h(table.TableComponent, { key: 'f67fc11b090798d876b48334a182f2aeb103aaf6' }, index.h(table.TableHead, { key: '8dd36bc8e6438541bb4e46a6410d3aeb079a6d7a' }, index.h(table.TableHeadRow, { key: '26282d45f866e26d466dfd65f5b941dd3a1007ca' }, this.checkoutsTable.columnData.map((column) => column))), index.h(table.TableBody, { key: '6448768d21f47bfc4a6386ab503d9c59d437c9ca' }, index.h(table.TableLoadingState, { key: 'ae8d744bd47cccf76b672b965361231e1757c9f2', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), index.h(table.TableEmptyState, { key: 'b68fa34426e974c9a06820fad2dbebb2065a99b3', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), index.h(table.TableErrorState, { key: 'c68c955243beeb25a1a2767e1ae6f749bfd6df6e', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index$1) => (index.h(table.TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler }, data)))), this.paging && (index.h(table.TableFoot, { key: 'abb611ae3404761e480462dd509cc604cb55da08' }, index.h(table.TableFootRow, { key: '016c2e323923a37c0e5fa00bf42b12104cc7f9b3' }, index.h(table.TableFootCell, { key: '29ad5c6edb3a80b6a1806511b6622ee2972fbb62', colSpan: this.checkoutsTable.columnData.length }, index.h("pagination-menu", { key: '1263c60aa0b8d53a70dafce8602d75012f07567e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/cjs/custom-popper_2.cjs.entry.js

@@ -1903,7 +1903,7 @@ const CustomPopper = class {
         this.hideEvent.emit();
     }
     render() {
-        return (index.h("div", { key: '7a5bab9f568f74c4cc7635a5844ca9a48c506521' }, index.h("style", { key: '9d073f9cc6b46141f05def0a5fa51d61ce2ec1b0' }, `
+        return (index.h("div", { key: 'eb1e7317215bc36f340ac0cd8b5826cc302c3693' }, index.h("style", { key: '1acdb1992e684a654d659e7472758e016b4b11d6' }, `
           .popper-content {
             display: none;
           }
@@ -1911,14 +1911,14 @@ const CustomPopper = class {
             display: block;
             z-index: 1030;
           }
-          `), index.h("div", { key: '7cea0b75df433ed9b5a8e46b015814a954f47c99', class: "popper-content", ref: (el) => this.popperContentRef = el }, index.h("slot", { key: '6a6f628864ce86989413f80b8a39f7fe089d6633' }))));
+          `), index.h("div", { key: '53ff89449687b84469c9cfbb83c7807b6e95e003', class: "popper-content", ref: (el) => this.popperContentRef = el }, index.h("slot", { key: 'f8f516747c2ad6c2e32efefeaa33f319a202bba6' }))));
     }
     static get watchers() { return {
         "anchorRef": ["onAnchorRefChange"]
     }; }
 };
 
-const TooltipComponent = class {
+const FormControlTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
@@ -1937,4 +1937,4 @@ const TooltipComponent = class {
 };
 
 exports.custom_popper = CustomPopper;
-exports.form_control_tooltip = TooltipComponent;
+exports.form_control_tooltip = FormControlTooltip;

package/dist/cjs/{form-control-number-masked_3.cjs.entry.js → form-address-fields_3.cjs.entry.js}

@@ -1,15 +1,28 @@
 'use strict';
 
 var index = require('./index-p7cvUYAE.js');
+var Business = require('./Business-oBifyXkW.js');
+var utils = require('./utils-DAyWinG2.js');
+var countryConfig = require('./country-config-D7fss2oF.js');
 var index$1 = require('./index-1MT3Z4XI.js');
 var parts = require('./parts-BXshb_S-.js');
 var formControlErrorText = require('./form-control-error-text-BO58Y6zF.js');
 require('./event-types-YOY5TKUN.js');
-var Business = require('./Business-oBifyXkW.js');
-var utils = require('./utils-DAyWinG2.js');
-var countryConfig = require('./country-config-D7fss2oF.js');
 
-const NumberInputMasked = class {
+const FormAddressFields = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.country = Business.CountryCode.USA;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const labels = countryConfig.countryLabels[this.country];
+        const options = countryConfig.countryOptions[this.country];
+        return (index.h(index.Host, { key: 'e29f7f83cadc904cfc99431b72503ec7db545d0d' }, index.h("div", { key: 'f12e1246925a1a1fbfe25e07144aee46f698c24f', class: "row gy-3" }, index.h("div", { key: '109e36cc204e6798d8c4698aa92872226a885020', class: "col-12" }, index.h("form-control-text", { key: '9d458a0cad4fd33ac5ab1211a0930e23109cbe6c', name: "line1", label: "Street Address", inputHandler: this.inputHandler, defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, helpText: "No PO Boxes." })), index.h("div", { key: '7001ca8f0f123d3bd6c819b51bcd9859c138875d', class: "col-12" }, index.h("form-control-text", { key: '47b8ffbf8e14d731187dfa6903ccc50ef7719eca', name: "line2", label: "Address Line 2 (optional)", inputHandler: this.inputHandler, defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2 })), index.h("div", { key: '24795c8373dfb546e7bb9bd841646a24455c72af', class: "col-12" }, index.h("form-control-text", { key: '124aab7c415c972f010b98eca83e9eef51f96f33', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city })), index.h("div", { key: 'b710a554fa639a3c0a7a31661379b480a537d776', class: "col-12 col-md-6" }, index.h("form-control-select", { key: '3bca33f351147286fa34fdff51f0cfd9b5443658', name: "state", label: labels.stateLabel, options: options.stateOptions, inputHandler: this.inputHandler, defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state })), index.h("div", { key: 'b869501766aa4482e9ea9edda29af9ecd05fac0e', class: "col-12 col-md-6" }, index.h("form-control-text", { key: '29b3412e69ee4bf83bf211fa3f8395d6d80fde2d', name: "postal_code", label: labels.postalLabel, inputHandler: this.inputHandler, defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: this.country === Business.CountryCode.USA ? 5 : 7, keyDownHandler: this.country === Business.CountryCode.USA ? utils.numberOnlyHandler : undefined })))));
+    }
+};
+
+const FormControlNumberMasked = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.formControlInput = index.createEvent(this, "formControlInput", 7);
@@ -73,29 +86,16 @@ const NumberInputMasked = class {
         return parts.input;
     }
     render() {
-        return (index.h(index.Host, { key: '8e8abaf2afd497cf83ef9661374606b899c0f730' }, index.h("div", { key: 'b9281582a6dc56d34e67541ecf7eda264d911f97', class: "form-group d-flex flex-column" }, index.h("div", { key: '41816d8d12b7feca244efee7df3afae3594ac687', class: "d-flex align-items-start gap-2" }, index.h("label", { key: 'c41b28d631cccb4f21ae61763e7afbc866475cc6', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'd665eb4abc33a53389d9417fa83b8bff46af90ef', helpText: this.helpText })), index.h("input", { key: 'fbfa6e0768f52ad5e5a92609e9cb1d8c8bd34966', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (index.h(index.Host, { key: 'c70d3fcce4d3e1e120008b03a708bb3d1038777b' }, index.h("div", { key: 'fc3c3cf5637121a7c6f662649a1b3910ec503afa', class: "form-group d-flex flex-column" }, index.h("div", { key: 'c06e87a0d72942e421c37ab406b7f71d4e7f2c54', class: "d-flex align-items-start gap-2" }, index.h("label", { key: 'eedeec0161e3085cd65ea08b3fb4517ff62c6ffc', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '9fb05bd91836ca51750f30a714a7940493bfad8b', helpText: this.helpText })), index.h("input", { key: 'ef12caf83b42b0de0c33ece690bdd927b9b9a02c', 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.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), index.h(formControlErrorText.FormControlErrorText, { key: 'db0b75ce2d99e1707b383c0d443416b42f4b620e', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), index.h(formControlErrorText.FormControlErrorText, { key: '8791f48bed5d6508b7cccad7bba8da7d65f96ffc', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
     }; }
 };
 
-const FormAddressFields = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.country = Business.CountryCode.USA;
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const labels = countryConfig.countryLabels[this.country];
-        const options = countryConfig.countryOptions[this.country];
-        return (index.h(index.Host, { key: '8dabbee93e0f319db333ada6c20af49ed6131b8d' }, index.h("div", { key: '4b308ca9fa92321e5f60f3e4d9ab1c4e60cbd703', class: "row gy-3" }, index.h("div", { key: '9c25eec2effd7caed70a3f02f6a780513fae930c', class: "col-12" }, index.h("form-control-text", { key: '6c2ae178c2122d1f6085906690adadf98cb0774b', name: "line1", label: "Street Address", inputHandler: this.inputHandler, defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, helpText: "No PO Boxes." })), index.h("div", { key: 'eba53a69fc4c869014ef8b7bf6ff9b1d8f5be566', class: "col-12" }, index.h("form-control-text", { key: '11c743ce2388173c41cb16f1865fe58b2015d6bb', name: "line2", label: "Address Line 2 (optional)", inputHandler: this.inputHandler, defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2 })), index.h("div", { key: '2025c9bb15286f5c3e4693b596372a7dff730ce8', class: "col-12" }, index.h("form-control-text", { key: '5e0e40fd028d12b88cb15a38906738320e30aeca', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city })), index.h("div", { key: '407eac6eee8ca33a6648f2d1a45003961353f877', class: "col-12 col-md-6" }, index.h("form-control-select", { key: 'c598b24e0dc594ae725a7473212a6ed36102ce49', name: "state", label: labels.stateLabel, options: options.stateOptions, inputHandler: this.inputHandler, defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state })), index.h("div", { key: '49861d791272c745f881d19016b93885ce59f724', class: "col-12 col-md-6" }, index.h("form-control-text", { key: '90b9db4630dd4fad7e86151f2a632cd62b8509f3', name: "postal_code", label: labels.postalLabel, inputHandler: this.inputHandler, defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: this.country === Business.CountryCode.USA ? 5 : 7, keyDownHandler: this.country === Business.CountryCode.USA ? utils.numberOnlyHandler : undefined })))));
-    }
-};
-
 const IdentityAddressForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -109,13 +109,13 @@ const IdentityAddressForm = class {
         this.handleFormUpdate(newValues);
     }
     render() {
-        return (index.h(index.Host, { key: '1b644425472c68880a9be150d52029a64d75ea26' }, index.h("justifi-form-address-fields", { key: 'd5e95bc81c654d00a0fcac4760705bd21b3b8c8d', country: this.country, errors: this.errors, defaultValues: this.defaultValues, inputHandler: this.inputHandler })));
+        return (index.h(index.Host, { key: '98aa8fad1d8e4fef6f015968dea21d6a3257ad9c' }, index.h("form-address-fields", { key: '24f34471d209fc94bb00ce9b47b6018ba57019a7', country: this.country, errors: this.errors, defaultValues: this.defaultValues, inputHandler: this.inputHandler })));
     }
     static get watchers() { return {
         "address": ["handleAddressChange"]
     }; }
 };
 
-exports.form_control_number_masked = NumberInputMasked;
-exports.justifi_form_address_fields = FormAddressFields;
-exports.justifi_identity_address_form = IdentityAddressForm;
+exports.form_address_fields = FormAddressFields;
+exports.form_control_number_masked = FormControlNumberMasked;
+exports.identity_address_form = IdentityAddressForm;

package/dist/cjs/form-control-checkbox.cjs.entry.js

@@ -6,7 +6,7 @@ var formControlHelpText = require('./form-control-help-text-BdbTxD5g.js');
 var formControlErrorText = require('./form-control-error-text-BO58Y6zF.js');
 require('./event-types-YOY5TKUN.js');
 
-const CheckboxInput = class {
+const FormControlCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.formControlInput = index.createEvent(this, "formControlInput", 7);
@@ -42,11 +42,11 @@ const CheckboxInput = class {
         return parts.inputCheckbox;
     }
     render() {
-        return (index.h(index.Host, { key: '56962751d91674cfeb2716ba90bb9e9751ea4f66' }, index.h("div", { key: 'e3bb3cac2bf8ae03fc72558b3c00ef32ee56f61d', class: 'form-group d-flex flex-column' }, index.h("div", { key: '7be82e8be1da073c8f0e5ca7d609ce1d29c82c5e', class: "form-check" }, index.h("input", { key: 'f6b5f0ed365937feeb6ee0d885c55a27f21eaec0', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (index.h(index.Host, { key: 'dc2fdbd7fd92a0205b15e4b302458d8f0d775b35' }, index.h("div", { key: 'f32f7d5cb559282cece071f3623bdab80998bc04', class: 'form-group d-flex flex-column' }, index.h("div", { key: '5481439484b97ad733a0051f1722a5c3ed45778d', class: "form-check" }, index.h("input", { key: '9e96a563e5b0b1a9589dff7eb4f3eb3038d4918b', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), index.h("label", { key: 'dda8703d86506cdd5a3b3549f3c54296830ff20f', class: "form-check-label", htmlFor: this.name, part: parts.label }, this.label)), index.h(formControlHelpText.FormControlHelpText, { key: 'a4260e0cc463ad937128d46a3eb251191319473d', helpText: this.helpText, name: this.name }), index.h(formControlErrorText.FormControlErrorText, { key: 'de41ad6865a3d0414fa850ee5439cc11abf31f4f', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), index.h("label", { key: '11a27a415d7741d8a29dde8d1fd029c2e143f235', class: "form-check-label", htmlFor: this.name, part: parts.label }, this.label)), index.h(formControlHelpText.FormControlHelpText, { key: '3e0ef15182200a48d3cf3142c3511a0ad8095db3', helpText: this.helpText, name: this.name }), index.h(formControlErrorText.FormControlErrorText, { key: 'e85175ea76f6073d7ee813a3f2d8eaecc044601a', errorText: this.errorText, name: this.name }))));
     }
 };
 
-exports.form_control_checkbox = CheckboxInput;
+exports.form_control_checkbox = FormControlCheckbox;

package/dist/cjs/form-control-date.cjs.entry.js

@@ -5,7 +5,7 @@ var parts = require('./parts-BXshb_S-.js');
 var formControlErrorText = require('./form-control-error-text-BO58Y6zF.js');
 require('./event-types-YOY5TKUN.js');
 
-const DateInput = class {
+const FormControlDate = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.formControlInput = index.createEvent(this, "formControlInput", 7);
@@ -49,14 +49,14 @@ const DateInput = class {
         return part;
     }
     render() {
-        return (index.h(index.Host, { key: '04fe677b669177d1ea7d4e8e426d190b74118a02' }, index.h("div", { key: '9b1479566eeba80113ccf466f8eaf56efce2da47', class: "form-group d-flex flex-column" }, index.h("div", { key: '81f2620f428f5d9c7caeb0973dacc942337207b2', class: "d-flex gap-2" }, index.h("label", { key: '8e483165943647e63dcf2eea780582f0ea77dce8', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '44162246cc52b4e6600b1c1399de588d98d28a15', helpText: this.helpText })), index.h("input", { key: '87cc9774e38ff9de3067c9f750afc6312eb72993', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (index.h(index.Host, { key: '4bde5edec967df1c66865f5f20d24fa386e261ff' }, index.h("div", { key: 'fa0a944cd5d06f7e705737bd7fa98d80b8fd1555', class: "form-group d-flex flex-column" }, index.h("div", { key: '44dcf29339d380087fe7a98173a2033d16ad6764', class: "d-flex gap-2" }, index.h("label", { key: '8a0a38ace6f4a3db0388013f12381d4afec000bd', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'c9105a132a81408c304ab24f08c559289d68648b', helpText: this.helpText })), index.h("input", { key: '7938856aa5c1dca7d6c1ce89b3318eec3055348a', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), index.h(formControlErrorText.FormControlErrorText, { key: '8a34b1155e7f0e732de278f61bd8eef223bf69ef', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), index.h(formControlErrorText.FormControlErrorText, { key: '5e523b911d4b4810c7512c4dda63a3204eabb11a', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
     }; }
 };
 
-exports.form_control_date = DateInput;
+exports.form_control_date = FormControlDate;

package/dist/cjs/form-control-file-v2_2.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-p7cvUYAE.js');
 var formControlErrorText = require('./form-control-error-text-BO58Y6zF.js');
 var parts = require('./parts-BXshb_S-.js');
 
-const FileInput = class {
+const FormControlFileV2 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.formControlInput = index.createEvent(this, "formControlInput", 7);
@@ -14,12 +14,12 @@ const FileInput = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: '852cd7deb91a1305b0941c90f1ea0b00ee2a9f69', exportparts: "label,input,input-invalid" }, index.h("div", { key: 'd1c094c73bb6414137f5e1acfd38c0048debef27', class: "form-group d-flex flex-column" }, index.h("div", { key: 'da46f17f893e4c9557725294404e2451f001ffec', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '1197fab50023e2028d8eb18a40e7675c3cb88283', part: "label", class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'e0834b634350912a26ce08f0d5f1a2dca824cd9f', helpText: this.helpText })), index.h("input", { key: '98fad302f019cc8abd081834ae006f406d457d5b', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), index.h(formControlErrorText.FormControlErrorText, { key: '71c5a49575314fca8a6f4434c0634a3cdf82b084', errorText: this.errorText, name: this.name }))));
+        return (index.h(index.Host, { key: '5df12f5dc87f1c7d5b18676a9d4a7b257719b2fa', exportparts: "label,input,input-invalid" }, index.h("div", { key: '57b02e11bd44c405635a2f6253637b288bafdd41', class: "form-group d-flex flex-column" }, index.h("div", { key: 'd62f4ae4183e33af3105d76d0180ebe0f54983e5', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '82d8b58d0147f4fc6302c3852a44a73d9fcf34e0', part: "label", class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'ec4e21a9d4105b751b099378ce49c55a95ef36b2', helpText: this.helpText })), index.h("input", { key: '332527088f01b11bb06af38c73f39d3040d925b7', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), index.h(formControlErrorText.FormControlErrorText, { key: 'd7caedcf4b1263e3c133310312374bc6d61b82c2', errorText: this.errorText, name: this.name }))));
     }
     get el() { return index.getElement(this); }
 };
 
-const TextInput = class {
+const FormControlTextarea = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.formControlInput = index.createEvent(this, "formControlInput", 7);
@@ -64,10 +64,10 @@ const TextInput = class {
         return parts.input;
     }
     render() {
-        return (index.h(index.Host, { key: 'c2f4587d1cbfdfea257b5a6649f6cf4f59bedff9' }, index.h("div", { key: '381c1aab5057b7ba2c736fb4fecdccfe40ee2d5e', class: "form-group d-flex flex-column" }, index.h("label", { key: '4bb62b512792bd76d9dc3ebadf06c2a35cf474f7', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("textarea", { key: '50e0c18dd7d18675f6c947ee8136856dc535c580', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (index.h(index.Host, { key: '1e73c7219f321b73bc6001cde222b33ba79a7338' }, index.h("div", { key: 'dc682efd7a21e80ed1936cf69a186d3fab258de8', class: "form-group d-flex flex-column" }, index.h("label", { key: '526bcc6604b03b79737e4211c6d7a282cbd71979', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("textarea", { key: '4dab395c565c7180631042f99ac3b91382df4ca1', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), index.h("form-control-help-text", { key: 'f90c3f3ccf76277c433b93d14196b41e9447246d', helpText: this.helpText, name: this.name }), index.h("form-control-error-text", { key: '281a97d333c2e383a73aa016cb88ee71dcb85b2a', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), index.h("form-control-help-text", { key: 'dc851b2b46a3be03c65121a7e1f957f6c6d20c1b', helpText: this.helpText, name: this.name }), index.h("form-control-error-text", { key: '3f09a6b275b4218aff7588f90a3cdb0de02ae8bb', errorText: this.errorText, name: this.name }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -75,5 +75,5 @@ const TextInput = class {
     }; }
 };
 
-exports.form_control_file_v2 = FileInput;
-exports.form_control_textarea = TextInput;
+exports.form_control_file_v2 = FormControlFileV2;
+exports.form_control_textarea = FormControlTextarea;