@justifi/webcomponents 6.10.4 → 6.12.0

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

@@ -1,83 +1,4 @@
-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 { d as generateTabId } from './utils2.js';
-import { d as defineCustomElement$2 } from './iframe-input2.js';
-
-const BankAccountFormSkeleton = (props) => {
-    const { isReady } = 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" })))));
-};
-
-const BankAccountForm$1 = /*@__PURE__*/ proxyCustomElement(class BankAccountForm extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.isReady = false;
-    }
-    async componentWillLoad() {
-        await waitForConfig();
-        this.iframeOrigin = configState.iframeOrigin;
-        this.tabId = generateTabId();
-    }
-    componentDidRender() {
-        const elements = [
-            this.accountNumberIframeElement,
-            this.routingNumberIframeElement,
-        ];
-        Promise.all(elements.map((element) => {
-            return new Promise((resolve) => {
-                element.addEventListener('iframeLoaded', () => { resolve(); });
-            });
-        })).then(() => {
-            this.isReady = true;
-        });
-    }
-    async validate() {
-        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
-        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
-        return accountNumberIsValid && routingNumberIsValid;
-    }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
-    }
-    render() {
-        return (h(Host, { key: 'a104b2e88e818472d0158990ccf2cac6d7315616' }, h(BankAccountFormSkeleton, { key: '1ed1ac87a66aedf6a7528247e0ff3a803c74e4c3', isReady: this.isReady }), h("div", { key: 'a96c05c60c51f97c8abb7dc6a8cfebc940ea1513', class: "container-fluid p-0", style: {
-                opacity: this.isReady ? '1' : '0',
-                height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '3d168fd241702b30f0c8727d3c0aae65c20b69aa', class: "row mb-3" }, h("iframe-input", { key: 'dc1da989b1577ed62b3eeafd33128aca38e4610d', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '1179ae9d6b9f476bb01a1ee4f4edd7da6f22f635', class: "row" }, h("iframe-input", { key: '7e79b383876be1711a2e21ab7462f86281ebf28c', 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]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bank-account-form", "iframe-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bank-account-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BankAccountForm$1);
-            }
-            break;
-        case "iframe-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { B as BankAccountForm$1, d as defineCustomElement$1 } from './bank-account-form2.js';
 
 const BankAccountForm = BankAccountForm$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/module/{bank-account.js → bank-account-form2.js}

@@ -1,12 +1,8 @@
 import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { S as StyledHost } from './styled-host.js';
-import './details.js';
-import './event-types.js';
-import './justifi-radio-list-item2.js';
 import { S as Skeleton } from './skeleton.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
-import { d as generateTabId } from './utils2.js';
 import { w as waitForConfig, c as configState } from './config-state.js';
+import { d as generateTabId } from './utils2.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$2 } from './hidden-input2.js';
 import { d as defineCustomElement$1 } from './iframe-input2.js';
 
@@ -24,7 +20,6 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.__attachShadow();
         this.isReady = false;
     }
     async componentWillLoad() {
@@ -32,7 +27,6 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
         this.iframeOrigin = configState.iframeOrigin;
         this.tabId = generateTabId();
         checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
     }
     componentDidRender() {
         const elements = [
@@ -47,27 +41,24 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
             this.isReady = true;
         });
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
-    }
     async validate() {
         const accountNumberIsValid = await this.accountNumberIframeElement.validate();
         const routingNumberIsValid = await this.routingNumberIframeElement.validate();
         return accountNumberIsValid && routingNumberIsValid;
     }
     async tokenize({ clientId, paymentMethodMetadata, account }) {
-        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+        const result = await this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+        return result;
     }
     render() {
-        return (h(StyledHost, { key: '6c1e183b7ba2c70b41e22386d74a9cf7430aa8d5' }, h(BankAccountFormSkeleton, { key: '2755f4d21f8d62919ef56909f2dc6b9211bf550d', isReady: this.isReady }), h("hidden-input", { key: 'c35448285cd2b53973caa4a56c28a135e1ed7d74' }), h("div", { key: '9fae602596267bafc39b9e3e9946a289b38393b6', class: "container-fluid p-0", style: {
+        return (h("div", { key: '73e3f3c28652ec1a0256ea8668db6ebe56e929ba' }, h(BankAccountFormSkeleton, { key: 'cf8bd04492e821a4c39c61c549dec728fc24696e', isReady: this.isReady }), h("hidden-input", { key: '877eeb9963fb9971e372a05eb3de1bee66d5b765' }), h("div", { key: '8a5c6dced3dfd9ce2486712e6a7d90b3710721bc', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'bfaee6ed0eaa2a68175f18146d56195cc1a23e91', class: "row mb-3" }, h("iframe-input", { key: '7385c2582ad5b397eb2afcb9c87b789d4918542c', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: 'effe6b1f18d5fa531f4537accfe8279b81bc7b49', class: "row" }, h("iframe-input", { key: '19cc7e46d8f7cb79c70ba21f2e9c15c7665eca47', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+            } }, h("div", { key: '35f116944ac3fbda6f46cd3335dd442fc5284fc3', class: "row mb-3" }, h("iframe-input", { key: 'c9bfd6124f3107b703ee4c43946560940b93899f', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: '43a3d810081ad218ce3fd57627c1c93efc4fb1eb', class: "row" }, h("iframe-input", { key: '4b2d6d3213c4ba44cf63a1297d34975c894010f6', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
-}, [257, "justifi-bank-account-form", {
-        "iframeOrigin": [32],
+}, [256, "bank-account-form", {
         "isReady": [32],
+        "iframeOrigin": [32],
         "tabId": [32],
         "validate": [64],
         "tokenize": [64]
@@ -76,9 +67,9 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-bank-account-form", "hidden-input", "iframe-input"];
+    const components = ["bank-account-form", "hidden-input", "iframe-input"];
     components.forEach(tagName => { switch (tagName) {
-        case "justifi-bank-account-form":
+        case "bank-account-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BankAccountForm);
             }

package/dist/module/bank-account-read-only-value2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { t as text } from './parts.js';
+import { j as text } from './parts.js';
 
 const BankAccountReadOnlyValue = /*@__PURE__*/ proxyCustomElement(class BankAccountReadOnlyValue extends HTMLElement {
     constructor(registerHost) {
@@ -9,7 +9,7 @@ const BankAccountReadOnlyValue = /*@__PURE__*/ proxyCustomElement(class BankAcco
         }
     }
     render() {
-        return (h("div", { key: 'ad9eadcf49dbc67e51cd814d3ded334a587cc17c' }, h("label", { key: 'b8ba3d8b7ef9fc33e0e0870f71b7df5dbfae4759', class: "form-label", part: text }, this.label), h("div", { key: '1839bdadb96b3c814c73991530497f9a7be6a10d', part: text }, this.value || '')));
+        return (h("div", { key: 'eb03c591b0c8169da34549d08b4964f6c6bf26cb' }, h("label", { key: '0864f3322be289d5213ab3bf689fab81768a55df', class: "form-label", part: text }, this.label), h("div", { key: '5ffdc1c3a5b84d7c55c9dcdb25d58f14b51c34e3', part: text }, this.value || '')));
     }
 }, [256, "bank-account-read-only-value", {
         "label": [1],

package/dist/module/billing-form-full.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BillingFormFull extends Components.BillingFormFull, HTMLElement {}
+export const BillingFormFull: {
+    prototype: BillingFormFull;
+    new (): BillingFormFull;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -1,99 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { f as fullBillingSchema } from './billing-form-schema.js';
-import { W as billingForm } from './parts.js';
-import { S as StyledHost } from './styled-host.js';
-import { H as Header3 } from './header-3.js';
-import './details.js';
-import './event-types.js';
-import './justifi-radio-list-item2.js';
-import { S as StateOptions } from './Business.js';
-import { F as FormController } from './form.js';
-import { d as defineCustomElement$4 } from './custom-popper2.js';
-import { d as defineCustomElement$3 } from './form-control-select2.js';
-import { d as defineCustomElement$2 } from './form-control-text2.js';
-import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+import { B as BillingFormFull$1, d as defineCustomElement$1 } from './billing-form-full2.js';
 
-const BillingFormFull = /*@__PURE__*/ proxyCustomElement(class BillingFormFull extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.errors = {};
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-    }
-    componentWillLoad() {
-        this.formController = new FormController(fullBillingSchema());
-        // Set up subscriptions here to avoid warnings about setting state during componentDidLoad
-        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
-    }
-    async getValues() {
-        return this.formController.values.getValue();
-    }
-    async fill(fields) {
-        this.formController.setInitialValues(fields);
-    }
-    async validate() {
-        const isValid = await this.formController.validate();
-        const errors = this.formController.errors.getValue();
-        return { isValid, errors };
-    }
-    render() {
-        // Guard clause to ensure formController is initialized before rendering
-        if (!this.formController) {
-            return null;
-        }
-        const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, null, h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 }))))))));
-    }
-}, [257, "justifi-billing-form-full", {
-        "legend": [1025],
-        "formController": [32],
-        "billingInfo": [32],
-        "errors": [32],
-        "getValues": [64],
-        "fill": [64],
-        "validate": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-billing-form-full", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-billing-form-full":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BillingFormFull);
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+const BillingFormFull = BillingFormFull$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { BillingFormFull as B, defineCustomElement as d };
+export { BillingFormFull, defineCustomElement };

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

@@ -0,0 +1,105 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { f as fullBillingSchema } from './billing-form-schema.js';
+import { w as billingForm } from './parts.js';
+import { H as Header3 } from './header-3.js';
+import './justifi-details2.js';
+import './event-types.js';
+import './justifi-radio-list-item2.js';
+import { S as StateOptions } from './Business.js';
+import { F as FormController } from './form.js';
+import { c as checkoutStore, o as onChange } from './checkout.store.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
+import { d as defineCustomElement$3 } from './form-control-select2.js';
+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(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new FormController(fullBillingSchema());
+        const fields = checkoutStore.billingFormFields;
+        if (fields && Object.keys(fields).some((k) => fields[k])) {
+            this.formController.setInitialValues(fields);
+        }
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    componentDidLoad() {
+        this.unsubscribeFromStore = onChange('billingFormFields', (newValue) => {
+            this.formController.setInitialValues(newValue);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribeFromStore) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async validate() {
+        const isValid = await this.formController.validate();
+        const errors = this.formController.errors.getValue();
+        return { isValid, errors };
+    }
+    render() {
+        if (!this.formController) {
+            return null;
+        }
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
+    }
+}, [256, "billing-form-full", {
+        "legend": [1025],
+        "formController": [32],
+        "billingInfo": [32],
+        "errors": [32],
+        "getValues": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["billing-form-full", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "billing-form-full":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BillingFormFull);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BillingFormFull as B, defineCustomElement as d };

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

@@ -1,5 +1,5 @@
 import { c as create$3 } from './form.js';
-import { p as postalValidation, s as stateValidation, c as cityValidation, l as lineTwoValidation, a as lineOneValidation, i as identityNameValidation } from './schema-validations.js';
+import { a as postalValidation, s as stateValidation, c as cityValidation, l as lineTwoValidation, b as lineOneValidation, i as identityNameValidation } from './schema-validations.js';
 
 const fullBillingSchema = () => create$3({
     name: identityNameValidation.required('Enter full name'),

package/dist/module/billing-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BillingForm extends Components.BillingForm, HTMLElement {}
+export const BillingForm: {
+    prototype: BillingForm;
+    new (): BillingForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/billing-form.js

@@ -1,104 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { P as PAYMENT_METHODS } from './ModularCheckout.js';
-import { d as defineCustomElement$7 } from './custom-popper2.js';
-import { d as defineCustomElement$6 } from './form-control-select2.js';
-import { d as defineCustomElement$5 } from './form-control-text2.js';
-import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$3 } from './bank-account-billing-form-simple.js';
-import { d as defineCustomElement$2 } from './billing-form-full.js';
-import { d as defineCustomElement$1 } from './card-billing-form-simple.js';
+import { B as BillingForm$1, d as defineCustomElement$1 } from './billing-form2.js';
 
-const BillingForm = /*@__PURE__*/ proxyCustomElement(class BillingForm extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    get showSimpleCardBillingForm() {
-        return this.paymentMethodType === PAYMENT_METHODS.NEW_CARD && this.hideCardBillingForm;
-    }
-    get showSimpleBankAccountBillingForm() {
-        return this.paymentMethodType === PAYMENT_METHODS.NEW_BANK_ACCOUNT && this.hideBankAccountBillingForm;
-    }
-    async getValues() {
-        var _a;
-        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.getValues();
-    }
-    async fill(fields) {
-        var _a;
-        (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
-    }
-    async validate() {
-        var _a;
-        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.validate();
-    }
-    render() {
-        if (this.showSimpleBankAccountBillingForm) {
-            return (h(Host, null, h("justifi-bank-account-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
-        }
-        if (this.showSimpleCardBillingForm) {
-            return (h(Host, null, h("justifi-card-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
-        }
-        return (h(Host, null, h("justifi-billing-form-full", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
-    }
-}, [256, "justifi-billing-form", {
-        "legend": [1025],
-        "hideCardBillingForm": [4, "hide-card-billing-form"],
-        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
-        "paymentMethodType": [1, "payment-method-type"],
-        "getValues": [64],
-        "fill": [64],
-        "validate": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-billing-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-bank-account-billing-form-simple", "justifi-billing-form-full", "justifi-card-billing-form-simple"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-billing-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BillingForm);
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "justifi-bank-account-billing-form-simple":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "justifi-billing-form-full":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "justifi-card-billing-form-simple":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+const BillingForm = BillingForm$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { BillingForm as B, defineCustomElement as d };
+export { BillingForm, defineCustomElement };

package/dist/module/billing-form2.js

@@ -0,0 +1,99 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { P as PAYMENT_METHODS } from './ModularCheckout.js';
+import { d as defineCustomElement$7 } from './bank-account-billing-form-simple2.js';
+import { d as defineCustomElement$6 } from './billing-form-full2.js';
+import { d as defineCustomElement$5 } from './card-billing-form-simple2.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
+import { d as defineCustomElement$3 } from './form-control-select2.js';
+import { d as defineCustomElement$2 } from './form-control-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const BillingForm = /*@__PURE__*/ proxyCustomElement(class BillingForm extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    get showSimpleCardBillingForm() {
+        return this.paymentMethodType === PAYMENT_METHODS.NEW_CARD && this.hideCardBillingForm;
+    }
+    get showSimpleBankAccountBillingForm() {
+        return this.paymentMethodType === PAYMENT_METHODS.NEW_BANK_ACCOUNT && this.hideBankAccountBillingForm;
+    }
+    async getValues() {
+        var _a;
+        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.getValues();
+    }
+    async validate() {
+        var _a;
+        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.validate();
+    }
+    render() {
+        if (this.showSimpleBankAccountBillingForm) {
+            return (h(Host, null, h("bank-account-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+        }
+        if (this.showSimpleCardBillingForm) {
+            return (h(Host, null, h("card-billing-form-simple", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+        }
+        return (h(Host, null, h("billing-form-full", { legend: this.legend, ref: (el) => (this.selectedFormRef = el) })));
+    }
+}, [256, "billing-form", {
+        "legend": [1025],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
+        "paymentMethodType": [1, "payment-method-type"],
+        "getValues": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["billing-form", "bank-account-billing-form-simple", "billing-form-full", "card-billing-form-simple", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "billing-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BillingForm);
+            }
+            break;
+        case "bank-account-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "billing-form-full":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "card-billing-form-simple":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BillingForm as B, defineCustomElement as d };

package/dist/module/business-additional-questions-schema.js

@@ -1,5 +1,5 @@
 import { c as create$3 } from './form.js';
-import { o as otherPaymentDetailsValidation, w as whenServiceReceivedValidation, r as revenueValidation, b as paymentVolumeValidation } from './schema-validations.js';
+import { o as otherPaymentDetailsValidation, w as whenServiceReceivedValidation, r as revenueValidation, p as paymentVolumeValidation } from './schema-validations.js';
 
 const additionalQuestionsSchema = (allowOptionalFields) => {
     const schema = create$3({

package/dist/module/business-address-schema.js

@@ -1,5 +1,5 @@
 import { c as create$3, a as create$6 } from './form.js';
-import { c as cityValidation, l as lineTwoValidation, a as lineOneValidation, z as makePostalValidation } from './schema-validations.js';
+import { c as cityValidation, l as lineTwoValidation, b as lineOneValidation, z as makePostalValidation } from './schema-validations.js';
 import { a as CountryCode } from './Business.js';
 
 // Internal USA schemas
@@ -41,4 +41,4 @@ const addressSchemaByCountry = {
     [CountryCode.CAN]: addressSchemaCAN,
 };
 
-export { addressSchemaUSA as a, addressSchemaCAN as b, addressSchemaByCountry as c };
+export { addressSchemaCAN as a, addressSchemaUSA as b, addressSchemaByCountry as c };