@justifi/webcomponents 5.7.6-rc-08 → 5.7.6

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

@@ -1,86 +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 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() {
-        super();
-        this.__registerHost();
-        this.isReady = false;
-    }
-    async componentWillLoad() {
-        await waitForConfig();
-        this.iframeOrigin = configState.iframeOrigin;
-    }
-    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: '91e0861d760dfa016e72b8758c37b86ce3fe8225' }, h(BankAccountFormSkeleton, { key: '806f012f41018540d3e1be34cb6d03fc61174253', isReady: this.isReady }), h("div", { key: '4660ea1bac93feaa04d643c1bf7a34da790bf308', class: "container-fluid p-0", style: {
-                opacity: this.isReady ? '1' : '0',
-                height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '0d123854987108eb70d4818a2f909fafa6945109', class: "row mb-3" }, h("iframe-input", { key: '1520dbb02a93848e53dd2b4636c7951a20efe462', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '9365ffe0a279c92d7129c894afa52c7b2060573a', class: "row" }, h("iframe-input", { key: 'bfe10d4fd3f3aab6c035c03ce85e0786876adfce', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
-    }
-}, [256, "bank-account-form", {
-        "isReady": [32],
-        "iframeOrigin": [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,11 +1,6 @@
-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 { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { S as Skeleton } from './skeleton.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { w as waitForConfig, c as configState } from './config-state.js';
-import { d as defineCustomElement$2 } from './hidden-input2.js';
 import { d as defineCustomElement$1 } from './iframe-input2.js';
 
 const BankAccountFormSkeleton = (props) => {
@@ -28,14 +23,11 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.isReady = false;
     }
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
-        checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
     }
     componentDidRender() {
         const elements = [
@@ -50,27 +42,23 @@ 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 }) {
+    async tokenize(clientId, paymentMethodMetadata, account) {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: '1cf811a60b481271f29c151aff5ab8c132d65d4b' }, h(BankAccountFormSkeleton, { key: '3b81c1b9456f2be69fb89f0abac6c0bb95d5f2d3', isReady: this.isReady }), h("hidden-input", { key: 'd1d02debee100c4a851f7eb5aa9196587e58e54d' }), h("div", { key: '49ced4f6c7c3b9b42fc2b08fd14161ed9a21fdfa', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '5d44c0b231532e4b98ff6a777db820c41ce5ce0b', class: "row mb-3" }, h("iframe-input", { key: '1628067e98f44f9e7e0f404b1df9e61d756e9d50', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '513aa503c8df3f79d340bf9f4bec9cdee2679a69', class: "row" }, h("iframe-input", { key: 'fdbaf1f56b3d0fbc5d1395293240f3b27c134bdd', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, 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` })))));
     }
-}, [257, "justifi-bank-account-form", {
-        "iframeOrigin": [32],
+}, [256, "bank-account-form", {
         "isReady": [32],
+        "iframeOrigin": [32],
         "validate": [64],
         "tokenize": [64]
     }]);
@@ -78,18 +66,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-bank-account-form", "hidden-input", "iframe-input"];
+    const components = ["bank-account-form", "iframe-input"];
     components.forEach(tagName => { switch (tagName) {
-        case "justifi-bank-account-form":
+        case "bank-account-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BankAccountForm);
             }
             break;
-        case "hidden-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
         case "iframe-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();

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

@@ -0,0 +1,95 @@
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+import { f as fullBillingSchema } from './billing-form-schema.js';
+import { V as heading3, U as billingForm } from './parts.js';
+import './details.js';
+import './event-types.js';
+import { n as numberOnlyHandler } from './utils3.js';
+import { S as StateOptions } from './state-options.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';
+
+const Header3 = (props) => {
+    return h("h3", { class: `header-3 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading3 }, props.text);
+};
+
+const BillingFormFull = /*@__PURE__*/ proxyCustomElement(class BillingFormFull extends HTMLElement {
+    constructor() {
+        super();
+        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());
+    }
+    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() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(Host, { key: 'e9d36cd879429f6d2fe05d2fc424b09a53fda517' }, h("div", { key: '3a979f2f763b96e22341ce87597a53bd1dd69de4', part: billingForm, class: "mt-4" }, h(Header3, { key: 'bd55292d19691da184eb079361f03ce72a369fa0', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", { key: '5ad294e59acc1374abd835a1281ca9351914261d' }, h("fieldset", { key: 'b8a1e4c537c6ca214a8e233d513dbe9673ad440e' }, this.legend && (h("legend", { key: '871ce543139ea01c89e2198ab6d0d6d5a5bdb2d7' }, this.legend)), h("div", { key: 'fc5334df48a1aabd2cfe2344fc934f6eb6fe5f94', class: "row gy-3" }, h("div", { key: '1b0e96757b37d15f5c90e0322293c4615d195e57', class: "col-12" }, h("form-control-text", { key: '95312a600e8c0b1f0c082dbde3d11fac41683f8c', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'b658488bf748d0d75fc032daef27ca4c72b81deb', class: "col-12" }, h("form-control-text", { key: 'aed40a410554a29ebc94979cbfe7e7aebe3e03c0', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: '7a297f8670a3a421bf06737e158d71b119e0f92e', class: "col-12" }, h("form-control-text", { key: '867a26488bdf2124256869f80d8e1f14b691e0c2', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: 'fe6c3eeec6c496d846d48e420030689c05248e02', class: "col-12" }, h("form-control-text", { key: 'ac9dea33795c8a0a8f0b602dc108611cfebf0be6', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: 'ecbe044931a98b9b0df870f8899303775ddf92d1', class: "col-12" }, h("form-control-select", { key: 'b6c25c9170d4f97c81b57e44513dbaa8a7166c3b', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '216602a05107394f90b495f30be393efbc01371f', class: "col-12" }, h("form-control-text", { key: 'c05fdd593adbefdd78ae25c57e5f2496d300deba', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+    }
+}, [256, "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();
+
+export { BillingFormFull as B, Header3 as H, defineCustomElement as d };

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

@@ -1,24 +1,29 @@
 import { c as create$3 } from './form.js';
 import { c as postalValidation, d as stateValidation, e as cityValidation, l as lineTwoValidation, f as lineOneValidation, i as identityNameValidation } from './schema-validations.js';
 
-const billingFormSchema = (postalOnly) => {
-    const fullBillingForm = create$3({
-        name: identityNameValidation.required('Enter full name'),
-        address_line1: lineOneValidation.required('Enter street address'),
-        address_line2: lineTwoValidation.nullable(),
-        address_city: cityValidation.required('Enter city'),
-        address_state: stateValidation.required('Select state'),
-        address_postal_code: postalValidation.required('Enter postal code'),
-    });
-    const postalForm = create$3({
-        name: identityNameValidation.nullable(),
-        address_line1: lineOneValidation.nullable(),
-        address_line2: lineTwoValidation.nullable(),
-        address_city: cityValidation.nullable(),
-        address_state: stateValidation.nullable(),
-        address_postal_code: postalValidation.required('Enter postal code'),
-    });
-    return postalOnly ? postalForm : fullBillingForm;
-};
+const fullBillingSchema = () => create$3({
+    name: identityNameValidation.required('Enter full name'),
+    address_line1: lineOneValidation.required('Enter street address'),
+    address_line2: lineTwoValidation.nullable(),
+    address_city: cityValidation.required('Enter city'),
+    address_state: stateValidation.required('Select state'),
+    address_postal_code: postalValidation.required('Enter postal code')
+});
+const postalOnlySchema = () => create$3({
+    name: identityNameValidation.nullable(),
+    address_line1: lineOneValidation.nullable(),
+    address_line2: lineTwoValidation.nullable(),
+    address_city: cityValidation.nullable(),
+    address_state: stateValidation.nullable(),
+    address_postal_code: postalValidation.required('Enter postal code')
+});
+const nameOnlySchema = () => create$3({
+    name: identityNameValidation.required('Enter full name'),
+    address_line1: lineOneValidation.nullable(),
+    address_line2: lineTwoValidation.nullable(),
+    address_city: cityValidation.nullable(),
+    address_state: stateValidation.nullable(),
+    address_postal_code: postalValidation.nullable()
+});
 
-export { billingFormSchema as b };
+export { fullBillingSchema as f, nameOnlySchema as n, postalOnlySchema as p };

package/dist/module/billing-form.js

@@ -1,85 +1,49 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as create$3, F as FormController } from './form.js';
-import { c as postalValidation, d as stateValidation, e as cityValidation, l as lineTwoValidation, f as lineOneValidation, i as identityNameValidation } from './schema-validations.js';
-import { V as billingForm } from './parts.js';
-import { H as Header3 } from './header-3.js';
-import './details.js';
-import './event-types.js';
-import { d as defineCustomElement$6 } from './custom-popper2.js';
-import { d as defineCustomElement$5 } from './form-control-select2.js';
-import { d as defineCustomElement$4 } from './form-control-text2.js';
-import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$2 } from './billing-information-form.js';
-import { d as defineCustomElement$1 } from './postal-code-form.js';
-
-const billingFormSchema = (postalOnly) => {
-    const fullBillingForm = create$3({
-        name: identityNameValidation.required('Enter full name'),
-        address_line1: lineOneValidation.required('Enter street address'),
-        address_line2: lineTwoValidation.nullable(),
-        address_city: cityValidation.required('Enter city'),
-        address_state: stateValidation.required('Select state'),
-        address_postal_code: postalValidation.required('Enter postal code'),
-    });
-    const postalForm = create$3({
-        name: identityNameValidation.nullable(),
-        address_line1: lineOneValidation.nullable(),
-        address_line2: lineTwoValidation.nullable(),
-        address_city: cityValidation.nullable(),
-        address_state: stateValidation.nullable(),
-        address_postal_code: postalValidation.required('Enter postal code'),
-    });
-    return postalOnly ? postalForm : fullBillingForm;
-};
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+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';
 
 const BillingForm = /*@__PURE__*/ proxyCustomElement(class BillingForm extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.errors = {};
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-    }
-    componentWillLoad() {
-        const postalOnly = this.isPostalOnlyMode;
-        this.formController = new FormController(billingFormSchema(postalOnly));
-    }
-    componentDidLoad() {
-        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
     }
-    get isPostalOnlyMode() {
+    get showSimpleCardBillingForm() {
         return this.paymentMethodType === 'card' && this.hideCardBillingForm;
     }
-    get hideAllBillingFields() {
+    get showSimpleBankAccountBillingForm() {
         return this.paymentMethodType === 'bankAccount' && this.hideBankAccountBillingForm;
     }
     async getValues() {
-        return this.formController.values.getValue();
+        var _a;
+        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.getValues();
     }
     async fill(fields) {
-        this.formController.setInitialValues(fields);
+        var _a;
+        (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
     }
     async validate() {
-        const isValid = await this.formController.validate();
-        const errors = this.formController.errors.getValue();
-        return { isValid, errors };
+        var _a;
+        return (_a = this.selectedFormRef) === null || _a === void 0 ? void 0 : _a.validate();
     }
     render() {
-        const showHeader = !this.isPostalOnlyMode && !this.hideAllBillingFields;
-        return (h("div", { key: '91beaa8646dd35b12e4ef90ce4cdcb73f1a441b2', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h(Header3, { key: 'ca3c1fbba66828371c2172e0d6c6607b36836b00', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), this.legend && h("legend", { key: '50f2c5e1f7a7b4f14841a91afb7ad7be79e0f89d' }, this.legend), this.isPostalOnlyMode ? (h("justifi-postal-code-form", null)) : (h("justifi-billing-information-form", null))));
+        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"],
-        "formController": [32],
-        "billingInfo": [32],
-        "errors": [32],
         "getValues": [64],
         "fill": [64],
         "validate": [64]
@@ -88,7 +52,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-billing-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-billing-information-form", "justifi-postal-code-form"];
+    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)) {
@@ -97,30 +61,35 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                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-information-form":
+        case "justifi-billing-form-full":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "justifi-postal-code-form":
+        case "justifi-card-billing-form-simple":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
 import { B as BusinessService } from './business.service.js';
 import { d as defineCustomElement$6 } from './custom-popper2.js';

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as create$3, d as create$8, F as FormController } from './form.js';
-import { E as EntityDocumentType, f as EntityDocumentStorage, g as EntityDocument, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { E as EntityDocumentType, b as EntityDocumentStorage, c as EntityDocument } from './Refund.js';
 import { z as routingNumberValidation, A as accountNumberValidation, B as accountTypeValidation, i as identityNameValidation, C as nicknameValidation, D as bankNameValidation } from './schema-validations.js';
 import './Business.js';
 import { B as BusinessFormStep } from './event-types2.js';
@@ -8,6 +8,7 @@ import { h as heading2 } from './parts.js';
 import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
 import './config-state.js';
 import './utils2.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
 import { d as defineCustomElement$8 } from './bank-account-document-inputs.js';

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

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import './config-state.js';
 import './utils2.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
+import './Refund.js';
 import './Business.js';
 import { m as makeGetBusiness, b as makePostBankAccount, c as makePostDocumentRecord } from './payment-provisioning-actions.js';
 import { B as BusinessService, a as BusinessBankAccountService, D as DocumentRecordService } from './business.service.js';

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
 import { B as BusinessService } from './business.service.js';
 import { d as defineCustomElement$7 } from './custom-popper2.js';

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
 import { B as BusinessService } from './business.service.js';
 import { d as defineCustomElement$b } from './custom-popper2.js';

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
 import { B as BusinessService } from './business.service.js';
 import { d as defineCustomElement$9 } from './custom-popper2.js';

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

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as create$3, b as create$7, F as FormController } from './form.js';
 import { A as Api } from './Api.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
+import './Refund.js';
 import './Business.js';
 import { h as heading2 } from './parts.js';
 import { B as BusinessFormStep } from './event-types2.js';

package/dist/module/business.service.js

@@ -1,7 +1,8 @@
 import { A as Api } from './Api.js';
-import './Refund.js';
+import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
+import './Refund.js';
 import './Business.js';
 
 const api = Api();

package/dist/module/button.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core/internal/client';
-import { $ as buttonSecondary, a0 as buttonPrimary, a1 as buttonLoading } from './parts.js';
+import { a0 as buttonSecondary, a1 as buttonPrimary, a2 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...")));

package/dist/module/cancellation-policy.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as create$3, a as create$6, F as FormController } from './form.js';
 import { D as DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
-import { _ as heading5 } from './parts.js';
+import { $ as heading5 } from './parts.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-file-v22.js';
 import { d as defineCustomElement$3 } from './form-control-help-text2.js';
@@ -39,7 +39,7 @@ const CancellationPolicy = /*@__PURE__*/ proxyCustomElement(class CancellationPo
     }
     render() {
         var _a, _b, _c;
-        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 })))));
+        return (h("div", { key: '6abface896835eb55168c6eaffb3f895b48169aa' }, h("div", { key: '73c586824840a3a054f2178ff2378489a861f7c7', class: "row gy-3" }, h("div", { key: '6381696528b65954c9756aa804713247a628aceb', class: "col-12" }, h("h2", { key: 'c7892b9be4dc85e48d7aba11695ebed34e4902bc', class: "h5", part: heading5 }, "Cancellation Policy")), h("div", { key: '7b561cfe03ac8d26e104fcc2d01ada81610e2032', class: "col-12" }, h("form-control-textarea", { key: '5adfc8407a00ef4114be45a6dcd958dc5ee798d3', 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: 'b43cad5c9201429abc8392370230f8df6be2fe36', class: "col-12" }, h("form-control-textarea", { key: '498ef3c2624009083f65be964b3a417c13682232', 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: '8564d0c2d27d78b7b6c61897a955da4129175c7a', class: "col-12" }, h("form-control-file-v2", { key: 'b55c3cf8b3e98f90b11bc41fa00db8e245b00d47', 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"],