@justifi/webcomponents 6.0.0-rc.9 → 6.0.0

package/dist/module/additional-questions-details2.js

@@ -3,9 +3,11 @@ import { D as DetailSectionTitle, a as DetailItem } from './utils.js';
 import { i as isEmptyObject } from './utils2.js';
 
 const AdditionalQuestionsDetails = /*@__PURE__*/ proxyCustomElement(class AdditionalQuestionsDetails extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         if (!this.additionalQuestions || isEmptyObject(this.additionalQuestions))

package/dist/module/additional-questions.js

@@ -9,9 +9,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const AdditionalQuestions = /*@__PURE__*/ proxyCustomElement(class AdditionalQuestions extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errors = {};
         this.additional_questions = {};
         this.inputHandler = this.inputHandler.bind(this);

package/dist/module/additional-statement.js

@@ -13,9 +13,11 @@ const AdditionalStatementSchema = create$3({
 });
 
 const AdditionalStatement = /*@__PURE__*/ proxyCustomElement(class AdditionalStatement extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.documentErrors = {};
         this.errors = {};
         this.acceptedTerms = false;
@@ -39,7 +41,7 @@ const AdditionalStatement = /*@__PURE__*/ proxyCustomElement(class AdditionalSta
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '3904e1b961f9e1a0683647d306a128efcd7b9202' }, h("div", { key: '37ae13e4b7ad7bc8a18b588c4e591cde9030147e', class: "row gy-3" }, h("div", { key: '2f9b835795f21e4585638ad8be2093642f08b982', class: "col-12" }, h("h2", { key: '9ff1aeb8256ffe97c6300bd48597542519cda0a7', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: 'e4c6b9f4624b06103b6c643838a76c4a724e3168', class: "col-12" }, h("form-control-textarea", { key: 'dc9a5cb126a2d6f70cd8d59cdcfcd29f5c4e341b', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: 'ba5202a5d8df30f5f4b7217341110646bb76e082', class: "col-12" }, h("form-control-file-v2", { key: '3168fc63d6bd6013821ee335914d916bb680fe42', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.uncategorized_file })))));
+        return (h("div", { key: '4d0fbca80a880577be7853efc494807d7d1e2fd9' }, h("div", { key: '6c3a82afe01b0812807a8e19dc750d4e9901876a', class: "row gy-3" }, h("div", { key: '89e7f50b0c6d67249b892caf8c6b2d78c1742309', class: "col-12" }, h("h2", { key: 'e0c4db3f5330cdd0e00897da0a54b898f0056f93', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: '58d4506d4bc0470afa4de87fdcf25ce4397d4180', class: "col-12" }, h("form-control-textarea", { key: 'aee641d90803d0ff483cfe75d881e3259303d4bc', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: '19377eb6382adc9cb69ec57fe7928b7d477110d8', class: "col-12" }, h("form-control-file-v2", { key: '9529de236046398904d4780fcedada3a67ce4daf', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.uncategorized_file })))));
     }
 }, [256, "justifi-additional-statement", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/bank-account-billing-form-simple.js

@@ -11,9 +11,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const BankAccountBillingFormSimple = /*@__PURE__*/ proxyCustomElement(class BankAccountBillingFormSimple extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.errors = {};
         this.inputHandler = (name, value) => {

package/dist/module/bank-account-document-inputs.js

@@ -9,9 +9,11 @@ import { d as defineCustomElement$2 } from './form-control-file2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const BankAccountDocumentFormInputs = /*@__PURE__*/ proxyCustomElement(class BankAccountDocumentFormInputs extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         return (h("div", { key: '23f5fa6b191b3feea7677a85a421002642a86f50', class: "row gy-3" }, h("div", { key: 'da9d9698f15aeb4bb05baef8fb63c630fcff8a82', class: "col-12" }, h("form-control-file", { key: 'b84a8ec1753210f74989c04b5520f0e94c5a083d', name: "voided_check", label: "Voided Check", documentType: EntityDocumentType.voidedCheck, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["voided_check"], multiple: true })), h("div", { key: '06d442df900406f122970bde6b2b293f2c9080ee', class: "col-12" }, h("form-control-file", { key: 'b3dc1d48900c5932c4d59f8b31a323193f0e86b4', name: "bank_statement", label: "Bank Statement", documentType: EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));

package/dist/module/bank-account-form-inputs2.js

@@ -8,9 +8,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const BankAccountFormInputs = /*@__PURE__*/ proxyCustomElement(class BankAccountFormInputs extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         return (h("div", { key: 'da4dc9523bca84cdd02f7e5d47e513c426ed90fd', class: "row gy-3" }, h("div", { key: 'b625a293dec704cbbb132469fdbc8c5d99a660e1', class: "col-12" }, h("form-control-text", { key: 'b41460ddc605f73faf71233ccbbef7e34e690e5a', name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: 'e5560bcdba399baa2e54441436ef5c67936e9fef', class: "col-12" }, h("form-control-text", { key: '18cd16931899f724fd92cb89f1b8d4cd41c5354c', name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '3bb589db98e5d65022576b602bda41f36e3a90d5', class: "col-12" }, h("form-control-text", { key: 'c870513b8895add114d5ec588561fa6f33a63514', name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '1783e7b4af2b012338fe2e1b4f1faa9b5e086bcd', class: "col-12" }, h("form-control-select", { key: '6a9af0f6edeae133dce04b7f829abb802db4ac83', name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '3c3ffced96f67320b4c580be6f28dd8ef5d2c109', class: "col-12" }, h("form-control-text", { key: 'e85df115a9de08ad9abb3237f7bf6c6d23c84150', name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." })), h("div", { key: '5a25cb25160aff24d1f62df2115dbd248709141e', class: "col-12" }, h("form-control-text", { key: 'dfdf7dce470efb8eea65aa6daf562d190963bace', name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." }))));

package/dist/module/bank-account-form.js

@@ -1,6 +1,7 @@
 import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { S as Skeleton } from './skeleton.js';
 import { w as waitForConfig, c as configState } from './config-state.js';
+import { j as generateTabId } from './utils2.js';
 import { d as defineCustomElement$2 } from './iframe-input2.js';
 
 const BankAccountFormSkeleton = (props) => {
@@ -8,26 +9,21 @@ const BankAccountFormSkeleton = (props) => {
     if (isReady) {
         return null;
     }
-    return (h("div", { class: "container-fluid p-0" },
-        h("div", { class: "row mb-3" },
-            h("div", { class: "col-12 align-content-end" },
-                h(Skeleton, { height: "18px", width: "120px" }),
-                h(Skeleton, { height: "36px" }))),
-        h("div", { class: "row" },
-            h("div", { class: "col-12 align-content-end" },
-                h(Skeleton, { height: "18px", width: "110px" }),
-                h(Skeleton, { height: "36px" })))));
+    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "row mb-3" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "120px" }), h(Skeleton, { height: "36px" }))), h("div", { class: "row" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "110px" }), h(Skeleton, { height: "36px" })))));
 };
 
 const BankAccountForm$1 = /*@__PURE__*/ proxyCustomElement(class BankAccountForm extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.isReady = false;
     }
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -51,14 +47,15 @@ const BankAccountForm$1 = /*@__PURE__*/ proxyCustomElement(class BankAccountForm
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '7ee7c6e3c26ab1a90bdbf7215fe13f65aade1025' }, h(BankAccountFormSkeleton, { key: 'e4afc94a21b041972d031cfce88a102f763932d1', isReady: this.isReady }), h("div", { key: '8980e0dc0048dbd9cd93a4f93fab8c4cbfeef611', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '94dc0eb0d79b40ade96e1961611e3e7a8eef20ea', class: "row mb-3" }, h("iframe-input", { key: '41c82b772e7873a45409e35ed56dfea16c20c2ee', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '1c95618a50e2d36a3a9a3a7b691ae0dfa6a09936', class: "row" }, h("iframe-input", { key: '28a4dde70c8f55b4f6bf6ce2d3beee6acbebbc0b', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: 'd04bb6b18498de9646ba6e2ee32f223774a72cc7', class: "row mb-3" }, h("iframe-input", { key: '7eb29da8beff34cbe5d2b7c151fec433d17f8555', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: 'c6345cddc37cbe5627ca4581fb98be55b85550a6', class: "row" }, h("iframe-input", { key: '0bf71a22e9126e04f15f213d84953ccfd3388ef0', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
 }, [256, "bank-account-form", {
         "isReady": [32],
         "iframeOrigin": [32],
+        "tabId": [32],
         "validate": [64],
         "tokenize": [64]
     }]);

package/dist/module/bank-account.js

@@ -14,21 +14,15 @@ const BankAccountFormSkeleton = (props) => {
     if (isReady) {
         return null;
     }
-    return (h("div", { class: "container-fluid p-0" },
-        h("div", { class: "row mb-3" },
-            h("div", { class: "col-12 align-content-end" },
-                h(Skeleton, { height: "18px", width: "120px" }),
-                h(Skeleton, { height: "36px" }))),
-        h("div", { class: "row" },
-            h("div", { class: "col-12 align-content-end" },
-                h(Skeleton, { height: "18px", width: "110px" }),
-                h(Skeleton, { height: "36px" })))));
+    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "row mb-3" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "120px" }), h(Skeleton, { height: "36px" }))), h("div", { class: "row" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "110px" }), h(Skeleton, { height: "36px" })))));
 };
 
 const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.isReady = false;
     }
@@ -64,10 +58,10 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: 'f7b088f8dd8a977f3843183fb444f28862644fb3' }, h(BankAccountFormSkeleton, { key: '63179b2a1616ac98e9647bc8a6cf8f32cf159c24', isReady: this.isReady }), h("hidden-input", { key: 'bc2427c6ae7ca231f444cac83789682c5b7f252b' }), h("div", { key: 'd7b8ad011f441f35130a8836d5a9998aeed5ef6f', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: '99ccb5aa2afbf79e5bf40d59ca15eb217180349a' }, h(BankAccountFormSkeleton, { key: 'a26a6f4391a5e5b7923f36b05bdfe57491b31d8a', isReady: this.isReady }), h("hidden-input", { key: '7555fe1bbf38a1525e7c11fe7182e264752435c9' }), h("div", { key: 'd1d7141ee75a644d4ae67d23b353dc6293306371', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '87c14b39416411432109fa477a45905824986a5d', class: "row mb-3" }, h("iframe-input", { key: 'aa63db40e7dcff302c804b6f772a8903ac53a588', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '683ff288ff835321c364b4af64524dbf183da030', class: "row" }, h("iframe-input", { key: '46653b74876dfc02916b7d2842ab793b8658e8b2', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: 'db0d578ccb3647e049b5ef958bef0273a8945448', class: "row mb-3" }, h("iframe-input", { key: '58311d94a8f5f023f05de260afbaf6bc707a0d57', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '92e4b77f012a414ac88b8faf721b5a10f2c5a3a4', class: "row" }, h("iframe-input", { key: '5163f7e8cff8fb82bb009f615ef7ab2e231deb52', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
 }, [257, "justifi-bank-account-form", {
         "iframeOrigin": [32],

package/dist/module/billing-form-full.js

@@ -15,9 +15,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const BillingFormFull = /*@__PURE__*/ proxyCustomElement(class BillingFormFull extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.errors = {};
         this.inputHandler = (name, value) => {

package/dist/module/billing-form.js

@@ -8,9 +8,11 @@ import { d as defineCustomElement$2 } from './billing-form-full.js';
 import { d as defineCustomElement$1 } from './card-billing-form-simple.js';
 
 const BillingForm = /*@__PURE__*/ proxyCustomElement(class BillingForm extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     get showSimpleCardBillingForm() {
         return this.paymentMethodType === 'card' && this.hideCardBillingForm;

package/dist/module/business-additional-questions-form-step-core.js

@@ -14,9 +14,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const AdditionalQuestionsFormStepCore = /*@__PURE__*/ proxyCustomElement(class AdditionalQuestionsFormStepCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);

package/dist/module/business-additional-questions-form-step.js

@@ -10,9 +10,11 @@ import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$1 } from './business-additional-questions-form-step-core.js';
 
 const AdditionalQuestionsFormStep = /*@__PURE__*/ proxyCustomElement(class AdditionalQuestionsFormStep extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
     }
     propChanged() {

package/dist/module/business-bank-account-form-step-core.js

@@ -103,9 +103,11 @@ const businessBankAccountSchema = (documents, allowOptionalFields) => {
 };
 
 const BusinessBankAccountFormStepCore = /*@__PURE__*/ proxyCustomElement(class BusinessBankAccountFormStepCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);

package/dist/module/business-bank-account-form-step.js

@@ -17,9 +17,11 @@ import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$1 } from './business-bank-account-form-step-core.js';
 
 const BusinessBankAccountFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessBankAccountFormStep extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
     }
     propChanged() {

package/dist/module/business-core-info-form-step-core.js

@@ -16,9 +16,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const BusinessCoreInfoFormStepCore = /*@__PURE__*/ proxyCustomElement(class BusinessCoreInfoFormStepCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);

package/dist/module/business-core-info-form-step.js

@@ -11,9 +11,11 @@ import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$1 } from './business-core-info-form-step-core.js';
 
 const BusinessCoreInfoFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessCoreInfoFormStep extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
     }
     propChanged() {

package/dist/module/business-core-info.js

@@ -11,9 +11,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const BusinessCoreInfo = /*@__PURE__*/ proxyCustomElement(class BusinessCoreInfo extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errors = {};
         this.coreInfo = {};
         this.inputHandler = this.inputHandler.bind(this);

package/dist/module/business-details-core2.js

@@ -12,23 +12,8 @@ import { d as defineCustomElement$2 } from './owner-details2.js';
 import { d as defineCustomElement$1 } from './representative-details2.js';
 
 const BusinessDetailsLoading = () => {
-    const Block = () => (h("div", { class: "mt-5" },
-        h(Skeleton, { width: "40%", height: "1.5rem" }),
-        h("hr", null),
-        h("div", { class: "row g-3" },
-            h("div", { class: "col-12 col-md-6" },
-                h(Skeleton, null),
-                h(Skeleton, null),
-                h(Skeleton, null)),
-            h("div", { class: "col-12 col-md-6" },
-                h(Skeleton, null),
-                h(Skeleton, null),
-                h(Skeleton, null)))));
-    return (h(Fragment, null,
-        h(Block, null),
-        h(Block, null),
-        h(Block, null),
-        h(Block, null)));
+    const Block = () => (h("div", { class: "mt-5" }, h(Skeleton, { width: "40%", height: "1.5rem" }), h("hr", null), h("div", { class: "row g-3" }, h("div", { class: "col-12 col-md-6" }, h(Skeleton, null), h(Skeleton, null), h(Skeleton, null)), h("div", { class: "col-12 col-md-6" }, h(Skeleton, null), h(Skeleton, null), h(Skeleton, null)))));
+    return (h(Fragment, null, h(Block, null), h(Block, null), h(Block, null), h(Block, null)));
 };
 
 var RENDER_STATES;
@@ -38,9 +23,11 @@ var RENDER_STATES;
     RENDER_STATES["ERROR"] = "error";
 })(RENDER_STATES || (RENDER_STATES = {}));
 const BusinessDetailsCore = /*@__PURE__*/ proxyCustomElement(class BusinessDetailsCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
         this.renderState = RENDER_STATES.LOADING;
     }

package/dist/module/business-documents-on-file2.js

@@ -7,9 +7,11 @@ import './event-types.js';
 import './justifi-radio-list-item2.js';
 
 const BusinessDocumentsOnFile = /*@__PURE__*/ proxyCustomElement(class BusinessDocumentsOnFile extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.documents = [];
         this.isLoading = false;
     }

package/dist/module/business-owners-form-step-core.js

@@ -18,9 +18,11 @@ import { d as defineCustomElement$2 } from './owner-form-core2.js';
 import { d as defineCustomElement$1 } from './owner-form-inputs2.js';
 
 const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class BusinessOwnersFormStepCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.clickEvent = createEvent(this, "click-event", 7);
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);

package/dist/module/business-owners-form-step.js

@@ -15,9 +15,11 @@ import { d as defineCustomElement$2 } from './owner-form-core2.js';
 import { d as defineCustomElement$1 } from './owner-form-inputs2.js';
 
 const BusinessOwnersFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessOwnersFormStep extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
     }
     propChanged() {

package/dist/module/business-representative-form-inputs.js

@@ -11,9 +11,11 @@ import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const RepresentativeFormInputs = /*@__PURE__*/ proxyCustomElement(class RepresentativeFormInputs extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.inputHandler = (name, value) => {
             updateFormValues(this.formController, { [name]: value });
         };

package/dist/module/business-representative-form-step-core.js

@@ -14,9 +14,11 @@ import { d as defineCustomElement$2 } from './business-representative-form-input
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(class BusinessRepresentativeFormStepCore extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);

package/dist/module/business-representative-form-step.js

@@ -13,9 +13,11 @@ import { d as defineCustomElement$2 } from './business-representative-form-step-
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessRepresentativeFormStep extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errorEvent = createEvent(this, "error-event", 7);
     }
     propChanged() {

package/dist/module/business-representative.js

@@ -11,9 +11,11 @@ import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const BusinessRepresentative = /*@__PURE__*/ proxyCustomElement(class BusinessRepresentative extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.errors = {};
         this.representative = {};
         this.inputHandler = (name, value) => {

package/dist/module/business-terms-conditions-form-step.js

@@ -21,9 +21,11 @@ const businessTermsConditionsSchema = (allowOptionalFields) => {
 };
 
 const BusinessTermsConditionsFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessTermsConditionsFormStep extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);

package/dist/module/button.js

@@ -1,8 +1,7 @@
 import { h } from '@stencil/core/internal/client';
 import { $ as buttonSecondary, a0 as buttonPrimary, a1 as buttonLoading } from './parts.js';
 
-const ButtonSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" },
-    h("span", { class: "visually-hidden" }, "Loading...")));
+const ButtonSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" }, h("span", { class: "visually-hidden" }, "Loading...")));
 
 const Button = (props, children) => {
     const variantToButton = {

package/dist/module/cancellation-policy.js

@@ -14,9 +14,11 @@ const CancellationPolicySchema = create$3({
 });
 
 const CancellationPolicy = /*@__PURE__*/ proxyCustomElement(class CancellationPolicy extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.documentErrors = {};
         this.errors = {};
         this.documents = { cancellation_policy: [] };
@@ -39,7 +41,7 @@ const CancellationPolicy = /*@__PURE__*/ proxyCustomElement(class CancellationPo
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '29819e51969e655219ccbdbb2e1d1b738b64f7d3' }, h("div", { key: '28279bbc8354128a5041ed6eac16d4966be1584c', class: "row gy-3" }, h("div", { key: '8b6215544f87a8c35b81a93a5f4826a35e0c0f9f', class: "col-12" }, h("h2", { key: 'b6337efb93f03ea48f2c29b1baef4929f236df2d', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: 'b7d78115378ecd0b4a4f8a43349f1b4f2527ca35', class: "col-12" }, h("form-control-textarea", { key: '6ab47f5626a945f222efceef43dc096061cb67ed', label: "Cancellation Policy Disclosure", name: "cancellation_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.cancellation_policy_disclosure, inputHandler: this.inputHandler, errorText: this.errors.cancellation_policy_disclosure })), h("div", { key: '6aeccf798d112e79251408401c99d916a9065e94', class: "col-12" }, h("form-control-textarea", { key: '580e61e4370570c9a04496fef4b7ad9c19058336', label: "Cancellation Rebuttal", name: "cancellation_rebuttal", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.cancellation_rebuttal, inputHandler: this.inputHandler, errorText: this.errors.cancellation_rebuttal })), h("div", { key: 'e0deddf002b64d02bc5a5db075da11d2566dc3bb', class: "col-12" }, h("form-control-file-v2", { key: '3da55e915d4d3126456de8e95debc6d9e46dca42', label: "Upload Cancellation Policy", name: "cancellation_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.cancellation_policy })))));
+        return (h("div", { key: 'ac10b9b21d37179211d74118b06f561e95d9ea71' }, h("div", { key: '8ff525f8ed20828ed153b7dc23cb84a0277b81d4', class: "row gy-3" }, h("div", { key: '4f22ed526972a6625dc77b3ab0ab5b074277d7b2', class: "col-12" }, h("h2", { key: 'd78d54468b91edd99238bd757f871b18ec5b58ca', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: '629c9660446cbba8951cd8396d9b72aea71c731b', class: "col-12" }, h("form-control-textarea", { key: '60e0b4903e4ddec6915d23617f215d5d2ea20935', label: "Cancellation Policy Disclosure", name: "cancellation_policy_disclosure", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.cancellation_policy_disclosure, inputHandler: this.inputHandler, errorText: this.errors.cancellation_policy_disclosure })), h("div", { key: 'aec3e4561f880b86ba6f5c7ce0298e45b837c2fd', class: "col-12" }, h("form-control-textarea", { key: 'e77d126709037cb22e6e4fcf2228652ffeb672ee', label: "Cancellation Rebuttal", name: "cancellation_rebuttal", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.cancellation_rebuttal, inputHandler: this.inputHandler, errorText: this.errors.cancellation_rebuttal })), h("div", { key: '407c071a0f7a1e488eb2ef4d522e515138a5ed2c', class: "col-12" }, h("form-control-file-v2", { key: '15dfacd8e1de439848d12ecec9a0f5ffac259484', label: "Upload Cancellation Policy", name: "cancellation_policy", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.cancellation_policy })))));
     }
 }, [256, "justifi-cancellation-policy", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/card-billing-form-simple.js

@@ -12,9 +12,11 @@ import { d as defineCustomElement$2 } from './form-control-text2.js';
 import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const CardBillingFormSimple = /*@__PURE__*/ proxyCustomElement(class CardBillingFormSimple extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.errors = {};
         this.inputHandler = (name, value) => {