@justifi/webcomponents 5.0.0 → 5.1.0

package/dist/module/new-payment-method.js

@@ -1,24 +1,20 @@
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { c as config } from './config.js';
-import { O as heading3, P as billingForm, Q as radioListItem } from './parts.js';
-import './details.js';
-import { d as defineCustomElement$d } from './bank-account-form2.js';
-import { d as defineCustomElement$c } from './card-form2.js';
-import { d as defineCustomElement$b } from './custom-popper2.js';
-import { d as defineCustomElement$a } from './form-control-checkbox2.js';
-import { d as defineCustomElement$9 } from './form-control-help-text3.js';
-import { d as defineCustomElement$8 } from './form-control-radio2.js';
-import { d as defineCustomElement$7 } from './form-control-select2.js';
-import { d as defineCustomElement$6 } from './form-control-text2.js';
-import { d as defineCustomElement$5 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$4 } from './hidden-input2.js';
-import { d as defineCustomElement$3 } from './iframe-input2.js';
-import { d as defineCustomElement$2 } from './billing-form.js';
-import { d as defineCustomElement$1 } from './save-new-payment-method.js';
-
-const Header3 = (props) => {
-    return h("h3", { class: `header-3 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading3 }, props.text);
-};
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as radioListItem } from './parts.js';
+import { d as defineCustomElement$f } from './bank-account-form2.js';
+import { d as defineCustomElement$e } from './billing-form2.js';
+import { d as defineCustomElement$d } from './card-form2.js';
+import { d as defineCustomElement$c } from './custom-popper2.js';
+import { d as defineCustomElement$b } from './form-control-checkbox2.js';
+import { d as defineCustomElement$a } from './form-control-help-text3.js';
+import { d as defineCustomElement$9 } from './form-control-radio2.js';
+import { d as defineCustomElement$8 } from './form-control-select2.js';
+import { d as defineCustomElement$7 } from './form-control-text2.js';
+import { d as defineCustomElement$6 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$5 } from './hidden-input2.js';
+import { d as defineCustomElement$4 } from './iframe-input2.js';
+import { d as defineCustomElement$3 } from './billing-form-wrapper.js';
+import { d as defineCustomElement$2 } from './save-new-payment-method.js';
+import { d as defineCustomElement$1 } from './postal-form2.js';
 
 const PaymentMethodTypeLabels = {
     bankAccount: 'New bank account',
@@ -33,23 +29,23 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
             e.preventDefault();
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
-        this.iframeOrigin = config.iframeOrigin;
         this.authToken = undefined;
         this.accountId = undefined;
         this.paymentMethodOption = undefined;
         this.paymentMethodGroupId = undefined;
         this.isSelected = undefined;
+        this.hideCardBillingForm = undefined;
         this.saveNewPaymentMethodChecked = false;
     }
     handleCheckboxChanged(event) {
         this.saveNewPaymentMethodChecked = event.detail;
     }
     async fillBillingForm(fields) {
-        this.billingFormRef.fill(fields);
+        this.billingFormWrapperRef.fill(fields);
     }
     async resolvePaymentMethod(insuranceValidation) {
         var _a, _b;
-        if (!this.paymentMethodFormRef || !this.billingFormRef)
+        if (!this.paymentMethodFormRef || !this.billingFormWrapperRef)
             return;
         try {
             const isValid = await this.validate();
@@ -70,13 +66,13 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
         }
     }
     async validate() {
-        const billingFormValidation = await this.billingFormRef.validate();
+        const billingFormValidation = await this.billingFormWrapperRef.validate();
         const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
         return billingFormValidation.isValid && paymentMethodFormValidation.isValid;
     }
     async tokenize() {
         try {
-            const billingFormFieldValues = await this.billingFormRef.getValues();
+            const billingFormFieldValues = await this.billingFormWrapperRef.getValues();
             let paymentMethodData;
             if (this.saveNewPaymentMethodChecked) {
                 paymentMethodData = Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupId });
@@ -94,19 +90,20 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
     }
     showNewPaymentMethodForm() {
         var _a;
-        return (h("div", { class: "mt-4 pb-4 border-bottom" }, h("hidden-input", null), h("div", { class: "mb-4" }, ((_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id) === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el }))), h("div", { part: billingForm }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el) })), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
+        return (h("div", { class: "mt-4 pb-4 border-bottom" }, h("hidden-input", null), h("div", { class: "mb-4" }, paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el }))), h("justifi-billing-form-wrapper", { ref: (el) => (this.billingFormWrapperRef = el), hideCardBillingForm: this.hideCardBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '4b6e52ca95845aa1c9163f4d3eafbfc98ca51deb', class: "payment-method" }, h("div", { key: 'd4aea7115ff71564a4d1e87a468174a29a040406', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0204f84a72bb89e03772894f208895359370714b', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h(Host, { key: 'd28e0908fee9817719cd79d91621792862cd4e81', class: "payment-method" }, h("div", { key: '021d8458af22180cd5db65f346ab5d205e214e45', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: 'adaca7a258a726e97150e677e92004955e99a12c', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
 }, [0, "justifi-new-payment-method", {
-        "iframeOrigin": [1025, "iframe-origin"],
         "authToken": [1, "auth-token"],
         "accountId": [1, "account-id"],
         "paymentMethodOption": [16],
         "paymentMethodGroupId": [1, "payment-method-group-id"],
         "isSelected": [4, "is-selected"],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
         "saveNewPaymentMethodChecked": [32],
         "fillBillingForm": [64],
         "resolvePaymentMethod": [64]
@@ -115,7 +112,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-new-payment-method", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form", "justifi-save-new-payment-method"];
+    const components = ["justifi-new-payment-method", "bank-account-form", "billing-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form-wrapper", "justifi-save-new-payment-method", "postal-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
@@ -124,65 +121,75 @@ function defineCustomElement() {
             break;
         case "bank-account-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$f();
+            }
+            break;
+        case "billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
             }
             break;
         case "card-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "form-control-radio":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "form-control-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "hidden-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "justifi-billing-form-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-billing-form":
+        case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "justifi-save-new-payment-method":
+        case "postal-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -191,4 +198,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { Header3 as H, NewPaymentMethod as N, defineCustomElement as d };
+export { NewPaymentMethod as N, defineCustomElement as d };

package/dist/module/owner-form-core2.js

@@ -3,7 +3,7 @@ import { F as FormController } from './form.js';
 import { O as Owner } from './Business.js';
 import { i as identitySchema } from './business-identity-schema.js';
 import { B as Button } from './button.js';
-import { O as heading3 } from './parts.js';
+import { T as heading3 } from './parts.js';
 import './details.js';
 import { a as BusinessFormClickActions } from './event-types2.js';
 import { d as defineCustomElement$8 } from './custom-popper2.js';
@@ -170,7 +170,7 @@ const BusinessOwnerFormCore = /*@__PURE__*/ proxyCustomElement(class BusinessOwn
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
     }
     render() {
-        return (h("form", { key: '58cbb6a1f804dc14fc3d3c873b733353b01d9365', onSubmit: this.validateAndSubmit }, h("fieldset", { key: '23cb93fab96a2d1a3a372057a93f8a5e3b5e886b' }, h("legend", { key: '06f0a9595c675d7f2f708741ef292018ad2b98e7', class: "fw-semibold fs-5", part: heading3 }, this.formTitle), h("br", { key: 'cdde6f04d559cc83bf50282feab27e2917889b74' }), h("div", { key: '25fd59a4755a4344ed0d6c116de79c95db8660df', class: "row gy-3" }, h("owner-form-inputs", { key: 'f839d830b204439f88594b0a16cce37286fe3e0b', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }), h("div", { key: '5dad56a053aa7ad0c04869374769965eba872247', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: '22342bc0f6a5978a94927aa9edddb9979309e647', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: 'ef3d494677011f095d199e736043e3c02a855f2b', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: 'd2d503eabc8b633ec84cabeacfe04c3802689604' }))));
+        return (h("form", { key: 'b7fc4c0d0fdf3a5aab0a246daffa59022255e6ae', onSubmit: this.validateAndSubmit }, h("fieldset", { key: 'eee56a5e2e26184086c1301576695b627a1f2ef4' }, h("legend", { key: 'b3f75638a502cca01da0ed54ec07660554dcd416', class: "fw-semibold fs-5", part: heading3 }, this.formTitle), h("br", { key: '0bc020cc7290615db3d3e1ec2b84d5af99ec86f0' }), h("div", { key: '2e7a09c9f4dffac21f2b3e1efe118542f18d89e8', class: "row gy-3" }, h("owner-form-inputs", { key: '78ffd296d4ecf0d5f2e50a06fb392cbefb1c9dc7', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }), h("div", { key: '73256017645b6987cd96006e5fe080402b0602d2', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: 'e2c288cf27ebc2d4dd9c29b2a2ed8e409d0c7564', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: 'd3d604b4416c8196181ec4fd34b254a0909b2aff', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: '4ad0047c67825990c1e4c02d377901d11a7937fa' }))));
     }
     static get watchers() { return {
         "isLoading": ["loadingWatcher"]

package/dist/module/owner-form-inputs2.js

@@ -24,7 +24,7 @@ const BusinessOwnerFormInputs = /*@__PURE__*/ proxyCustomElement(class BusinessO
         this.formController = undefined;
     }
     render() {
-        return (h("div", { key: '6604b31d64967fbabb85189c72d7d78d98d2c8c8', class: "row gy-3" }, h("div", { key: '7b52874d08593e28ac8e2369534d3697f07128c3', class: "col-12 col-md-8" }, h("form-control-text", { key: '080456fae1d1f024d3e82be43939922fb19f6ef9', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'e0e431c1d7d6716bc368eb1fa06b80d0576a05ee', class: "col-12 col-md-4" }, h("form-control-text", { key: '9134c2a32853cfa00edb42a2db30a85943e0c3f5', name: "title", label: "Title", defaultValue: this.ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: 'b129332c1547d43a2d2e09f19940e3a5a1df988a', class: "col-12 col-md-6" }, h("form-control-text", { key: '1e56b33c0c12898bdb0dd121fa832869deca9a2b', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '0a551a3d5f820e1f0146ee2603b687559756b80b', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '26c8366c9a8c93e69e8396ae1bb8d2478cc9eb81', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'e9416e635eceb13bee1cd259bad100cb165b9e74', class: "col-12 col-md-4" }, h("form-control-date", { key: '9a69bdc97c104169bdc742c341105a208b9a815a', name: "dob_full", label: "Birth Date", defaultValue: this.ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '9dedc8f023a3e6cc47835fc3a749f427c29bbee4', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: 'f1bedfe4d166ed0453a1814a5f02f7912da1e699', name: "identification_number", label: "SSN", defaultValue: this.ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: '32b1cd3be64345be08b27297478ab654d9201b8b', class: "col-12" }, h("justifi-identity-address-form", { key: 'e3292e32b13c290081989a562e22454f1bfe4f83', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))));
+        return (h("div", { key: 'f54192149ae925bcd08b8408816fc41295ef00f4', class: "row gy-3" }, h("div", { key: '1f70faf2c08ebf277b465cb1532276f7525aa47f', class: "col-12 col-md-8" }, h("form-control-text", { key: '7bae6e4b330cbea14e0be40d1b35e804d62f5323', name: "name", label: "Full Name", defaultValue: this.ownerDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '84cbbbf7cfb0e3c41c37b1194292dcb1f191298e', class: "col-12 col-md-4" }, h("form-control-text", { key: 'c106ea1b06e69d4b4fe3647cd2d0289185fae2e9', name: "title", label: "Title", defaultValue: this.ownerDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '8040bd2c6f6d67763578117c9a46e8e82aa18abf', class: "col-12 col-md-6" }, h("form-control-text", { key: '48aea09125f010bc799dc8d0e909f83c33972c3a', name: "email", label: "Email Address", defaultValue: this.ownerDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '00195bf163c16d8052c97de866bda7ac610cb959', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'd02770dcabfc707691ce4262cbca00d30b78a211', name: "phone", label: "Phone Number", defaultValue: this.ownerDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'c86d87082365b5daebce40e69f98a8813198eefd', class: "col-12 col-md-4" }, h("form-control-date", { key: 'cd2cfaf3c8a6fbb28719cb85ad4b3954ac2ff059', name: "dob_full", label: "Birth Date", defaultValue: this.ownerDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: 'f77e5943b8e04dc20cf9c126f6ad8ee67e27ac12', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '3828035484d53d7267c7ce1686658eaba2495147', name: "identification_number", label: "SSN", defaultValue: this.ownerDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: '4a67ced4d2a6f2be7f437e59a119ab97ec8c3ffc', class: "col-12" }, h("justifi-identity-address-form", { key: 'e4fbe8bbd642d623f306236b83be7800db619506', errors: this.errors.address, defaultValues: this.ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))));
     }
     ;
 }, [0, "owner-form-inputs", {

package/dist/module/owner-form.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { b as makeGetIdentity, c as makePatchIdentity, d as makePostIdentity } from './payment-provisioning-actions.js';
+import { c as makeGetIdentity, d as makePatchIdentity, e as makePostIdentity } from './payment-provisioning-actions.js';
 import { I as IdentityService } from './business.service.js';
 import { d as defineCustomElement$9 } from './custom-popper2.js';
 import { d as defineCustomElement$8 } from './form-control-date2.js';
@@ -59,7 +59,7 @@ const BusinessOwnerForm = /*@__PURE__*/ proxyCustomElement(class BusinessOwnerFo
         });
     }
     render() {
-        return (h("owner-form-core", { key: '994ef390ec2423419aa777656a49d9087ef61e72', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, ref: ref => this.coreComponent = ref }));
+        return (h("owner-form-core", { key: '9d1b43ef74d1e2d33cc3145c152564eb297b3cee', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, ref: ref => this.coreComponent = ref }));
     }
 }, [0, "justifi-owner-form", {
         "authToken": [1, "auth-token"],

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "5.0.0";
+const version = "5.1.0";
 const description = "JustiFi Web Components";
 const collection = "dist/collection/collection-manifest.json";
 const main = "dist/index.cjs.js";

package/dist/module/pagination-menu2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { E as ExtendedPagingDefaults } from './Pagination.js';
-import { o as buttonLink, p as buttonDisabled } from './parts.js';
+import { u as buttonLink, v as buttonDisabled } from './parts.js';
 
 const PaginationMenu = /*@__PURE__*/ proxyCustomElement(class PaginationMenu extends HTMLElement {
     constructor() {

package/dist/module/parts.js

@@ -57,7 +57,15 @@ const tableError = `table-error ${text} ${backgroundColor}`;
 // Loading spinner
 const loadingSpinner = `loading-spinner`;
 // Badge
-const badge = `badge ${text}`;
+const badge = `badge ${fontFamily}`;
+const badgePrimary = `${badge} badge-primary`;
+const badgeSecondary = `${badge} badge-secondary`;
+const badgeSuccess = `${badge} badge-success`;
+const badgeDanger = `${badge} badge-danger`;
+const badgeWarning = `${badge} badge-warning`;
+const badgeInfo = `${badge} badge-info`;
+const badgeLight = `${badge} badge-light`;
+const badgeDark = `${badge} badge-dark`;
 // Dropdown-menu
 const dropdownMenu = `dropdown-menu ${text}`;
 // Radio List Item
@@ -65,8 +73,9 @@ const radioListItem = `radio-list-item ${text}`;
 // Skeleton
 const skeleton = `skeleton`;
 // Component specific
-// This allows the billing form to be hidden, for example
+// This allows specific sections of a component to be hidden, for example
 // ::part(billing-form) { display: none; }
 const billingForm = `billing-form`;
+const checkoutSummary = `checkout-summary`;
 
-export { tooltipIcon as A, tooltip as B, tooltipInner as C, inputGroup as D, inputRadioInvalid as E, inputRadioCheckedFocused as F, inputRadioChecked as G, inputRadioFocused as H, inputRadio as I, heading5 as J, card as K, buttonLoading as L, buttonPrimary as M, buttonSecondary as N, heading3 as O, billingForm as P, radioListItem as Q, dropdownMenu as R, heading4 as S, badge as T, heading1 as a, inputInvalid as b, inputFocused as c, input as d, textDanger as e, tableHeadCell as f, getAlternateTableCellPart as g, heading2 as h, inputInvalidAndFocused as i, table as j, tableCell as k, label as l, tableEmpty as m, tableError as n, buttonLink as o, buttonDisabled as p, loadingSpinner as q, alertDanger as r, skeleton as s, text as t, inputCheckboxInvalid as u, inputCheckboxCheckedFocused as v, inputCheckboxFocused as w, inputCheckboxChecked as x, inputCheckbox as y, inputDisabled as z };
+export { dropdownMenu as $, badgeSuccess as A, badgeDanger as B, badgeWarning as C, badgeInfo as D, badgeLight as E, badgeDark as F, alertDanger as G, inputCheckboxInvalid as H, inputCheckboxCheckedFocused as I, inputCheckboxFocused as J, inputCheckboxChecked as K, inputCheckbox as L, inputGroup as M, inputRadioInvalid as N, inputRadioCheckedFocused as O, inputRadioChecked as P, inputRadioFocused as Q, inputRadio as R, heading5 as S, heading3 as T, billingForm as U, card as V, buttonLoading as W, buttonPrimary as X, buttonSecondary as Y, checkoutSummary as Z, radioListItem as _, heading1 as a, heading4 as a0, inputInvalid as b, inputFocused as c, input as d, textDanger as e, inputDisabled as f, tooltipIcon as g, heading2 as h, inputInvalidAndFocused as i, tooltip as j, tooltipInner as k, label as l, tableHeadCell as m, getAlternateTableCellPart as n, table as o, tableCell as p, tableEmpty as q, tableError as r, skeleton as s, text as t, buttonLink as u, buttonDisabled as v, loadingSpinner as w, badge as x, badgePrimary as y, badgeSecondary as z };

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

@@ -1,11 +1,24 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as formatCurrency, a as formatDate, b as formatTime, s as snakeCaseToHumanReadable } from './utils2.js';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { a as formatDate, b as formatTime, s as snakeCaseToHumanReadable } from './utils2.js';
+import { M as MapPaymentStatusToBadge } from './payments-status.js';
 import { E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.js';
-import { T as badge } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
-import { S as Spinner } from './spinner.js';
 import { d as defineCustomElement$1 } from './details.js';
-import { M as MapPaymentStatusToBadge } from './payments-status.js';
+import { S as Skeleton } from './skeleton.js';
+
+const PaymentDetailsLoading = () => (h("div", { class: "row gap-3" },
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "35%", height: "30px" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "70%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "40%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "40%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "100%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "80%" }))));
 
 const PaymentDetailsCore = /*@__PURE__*/ proxyCustomElement(class PaymentDetailsCore extends HTMLElement {
     constructor() {
@@ -45,15 +58,14 @@ const PaymentDetailsCore = /*@__PURE__*/ proxyCustomElement(class PaymentDetails
         });
     }
     render() {
-        var _a;
-        return (h(StyledHost, { key: '7550877e5bc7bf30d0964d496b07c39f57ea23c7' }, this.loading && h(Spinner, { key: '320d191ef2cbd736158382f693bd4e1b2676a850' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: 'cc147622d2821fb3070d3acb17dabbe0d6acb44e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '102fbe95740cfcbeed7d79c500841e4e69644c1b', slot: "head-info", badge: h("span", { slot: 'badge', part: badge, innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '1f6b55ebbc0abb37ced9cda26b193a779f7ba4a9', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cb64b263862128ef00b4923cdfd986ee63d40670', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '4a245ba3ad052ef015d7c5c2abb8d05051e0784a', title: "ID", value: this.payment.id })), h("div", { key: '9721335ed8558618cae9685f83c68e2eff8dfb8b', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '8c460e5675898d68ceb335a56da05b459b81b112', sectionTitle: "Details" }), h("div", { key: '1094ca8b231926460913bbabd9c9816e04d5bb1f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'e9640bbcf361dbeead436eea32a69fa962e34663', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'ffa1411af9d4d78dbeaedcf7c12ce7d7c1e6eb53', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'c5843ff4773b7a2be2afdd659226dd46096f585d', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '8ec788ae9ed769f6af4f32882d72d10877d1de30', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: 'ddd659af132d2628b8187d81ea72fc604e7ea7a8', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '15cb99e66dfc876d65aa8d446564f873aef1ef8a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '499a906f13648cd49a3bf92ccadcc01f0fb430f6', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '75ab13ff4c06f0f58dec6c0fcaad692d6d03b68b', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'aeb538897b387e4811d35dde9fb19a5813c1c049', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '4c8aa277b28bb1ffaf5fbada3a35f284ee2fabb2', sectionTitle: "Payment Method" }),
-            h("div", { key: 'ce52033a650a4f5db13e5c3cdf97191bcb3539b1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '168e45e35fc2e11adbf6881b17ebfd36d0a54a71', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '38af59143d2961cdc29b03e46af06b720dad3c8e', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '07518b2789187d2ae0b3f5edc6510a4b44798154', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '724207946a3e0b1b1cfe00bf0e77bfcd2f8c5982', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '34deb890ddf58566794fcb451d4d422d31f3f8b7', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '714fd2a97e2879dddbaacda6d5289b3985aaeea5' }, this.loading && h(PaymentDetailsLoading, { key: '7f6d24755cea9f3b86cdcaecec470513532f37cc' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '9f3403ce5744053a04c1a6cde0c58a41f15547ac', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '310f3e1087843e2c10aa49b9fb7e6be734168f1d', slot: "head-info", badge: MapPaymentStatusToBadge(this.payment.status), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '5ed10250e7e04961e2fc57a017eea58e26429378', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cd304828a7e38c8ad9fceb15b56391489a9eb938', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '5b70635442c6c76d978d40095d81cda6f7b00cfc', title: "ID", value: this.payment.id })), h("div", { key: '54558d6e59548048a548a83578d1a94694515bde', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0780b044b54ba041e9632f94acdfe71411454297', sectionTitle: "Details" }), h("div", { key: 'e1426b161aad05e561414d6a4c77cb28d3e7c157', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '8a390a81e9b91d6582ee01a93743a8cb4fba57f4', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '8bffacbde88bd44cbdc213b7f24b93087e533670', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '78f5773c98118c39dab6df14fd9beafd7f06df1d', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: 'c620ecf5b7dd9f9896a4a454cc8b507b4c344f45', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '4b7529e27aecf2560d305dc6f906b4ae1f26c2d2', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '1807f3f518b3ddf1296f8c2802b8e66a7a7e8401', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '79183af038116750f07bd65bc843a879a6275961', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'a2a6b8a345068a57e8e647b5f5efa9da5c870697', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'e3c7479795cd85029e1f90b4f7e0e5cfd0cf9099', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '7d49ed552d5b2dc87e6596e025e9c877b838b25a', sectionTitle: "Payment Method" }),
+            h("div", { key: '9a435008ea2746b11281bd237e9a38f471e9a11d', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9b22fcb2e38f690dfb963b783d2139813a920ddc', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '27ed56e879c9598226373f9086f79cd0cc72a9fe', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '9868b544973455fad8af21f4de2936a6d61b21a7', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '80716a8fe5b7bd933b930b35674dfe111948ef62', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'f0c0e2107b079bc6c898c91e5bd6a111b327c419', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'fbc24139e24a3d72624db86e30d0ce7b602cafe1', sectionTitle: "Payment Method" }),
-            h("div", { key: 'cba8888ffd57b95d82ab307f5de83c61f16a75b8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '5d7bbf52c0b06be00bdca98df4926dfa5c7ee25f', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '19f2450384c28970a69a13aa623a0360c7818f46', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'c81914830e67c477c2407112e74afaa127c406c2', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '5c8581983f368d84d6d9044d49ea2cab923b6615', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: 'c8ed7c6c2480365d7fec6c388103aeb1c3622c44', sectionTitle: 'Metadata' }), h("div", { key: 'cca65ed21900b912ea4a22b2e852d0c46946efd1', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'c96c267005a5ee26064d7cd6c03768f83442dfc6', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '1f2d289d3c79b1c496f10ded116ab193d9c4ade0', sectionTitle: "Payment Method" }),
+            h("div", { key: '9b898ec3ccf34e225d465b46a0a645d46f696c91', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '71acc9fe7bca4f922075a33968229919b9660ec0', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'cd62b8e0e55a9888f1d06a107173516af1f65e9e', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '22e2dcefcb76363ca9254392e825a4612c65ac1c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'a6e633cb3e5b82ed9c887b16a346dac257db22dc', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '10d02e4d3e09b50644f7a5c1bb0beca7f0747c0e', sectionTitle: 'Metadata' }), h("div", { key: '119445b2570c4b736b4c9bb0daf88a3047b3ee97', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '794df4cfc8808ea62e6b97127fee7349698e264e', metadata: this.payment.metadata })))))));
     }
     static get watchers() { return {
         "getPaymentDetails": ["updateOnPropChange"]

package/dist/module/payment-method-options.js

@@ -1,28 +1,28 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as config } from './config.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { P as PaymentMethodTypes } from './Payment.js';
-import { d as defineCustomElement$2, P as PaymentMethodOption } from './saved-payment-method.js';
-import { d as defineCustomElement$g } from './bank-account-form2.js';
-import { d as defineCustomElement$f } from './card-form2.js';
-import { d as defineCustomElement$e } from './custom-popper2.js';
-import { d as defineCustomElement$d } from './form-control-checkbox2.js';
-import { d as defineCustomElement$c } from './form-control-help-text3.js';
-import { d as defineCustomElement$b } from './form-control-radio2.js';
-import { d as defineCustomElement$a } from './form-control-select2.js';
-import { d as defineCustomElement$9 } from './form-control-text2.js';
-import { d as defineCustomElement$8 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$7 } from './hidden-input2.js';
-import { d as defineCustomElement$6 } from './iframe-input2.js';
-import { d as defineCustomElement$5 } from './billing-form.js';
-import { d as defineCustomElement$4 } from './new-payment-method.js';
-import { d as defineCustomElement$3 } from './save-new-payment-method.js';
-import { d as defineCustomElement$1 } from './sezzle-payment-method.js';
+import { d as defineCustomElement$3, P as PaymentMethodOption } from './saved-payment-method.js';
+import { d as defineCustomElement$i } from './bank-account-form2.js';
+import { d as defineCustomElement$h } from './billing-form2.js';
+import { d as defineCustomElement$g } from './card-form2.js';
+import { d as defineCustomElement$f } from './custom-popper2.js';
+import { d as defineCustomElement$e } from './form-control-checkbox2.js';
+import { d as defineCustomElement$d } from './form-control-help-text3.js';
+import { d as defineCustomElement$c } from './form-control-radio2.js';
+import { d as defineCustomElement$b } from './form-control-select2.js';
+import { d as defineCustomElement$a } from './form-control-text2.js';
+import { d as defineCustomElement$9 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$8 } from './hidden-input2.js';
+import { d as defineCustomElement$7 } from './iframe-input2.js';
+import { d as defineCustomElement$6 } from './billing-form-wrapper.js';
+import { d as defineCustomElement$5 } from './new-payment-method.js';
+import { d as defineCustomElement$4 } from './save-new-payment-method.js';
+import { d as defineCustomElement$2 } from './sezzle-payment-method.js';
+import { d as defineCustomElement$1 } from './postal-form2.js';
 
 const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMethodOptions extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.toggleCreatingNewPaymentMethod = createEvent(this, "toggleCreatingNewPaymentMethod", 7);
         this.showCard = undefined;
         this.showAch = undefined;
         this.showBnpl = undefined;
@@ -32,9 +32,9 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         this.insuranceToggled = undefined;
         this.authToken = undefined;
         this.accountId = undefined;
-        this.iframeOrigin = config.iframeOrigin;
         this.savedPaymentMethods = [];
         this.paymentAmount = undefined;
+        this.hideCardBillingForm = undefined;
         this.selectedPaymentMethodId = undefined;
         this.paymentMethodOptions = [];
     }
@@ -78,13 +78,13 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
     }
     render() {
         var _a;
-        return (h(Host, { key: '3ab3caf94332163f031ecebe101d45c35e1416bd' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '22ab195ec840e971c774ad2886ebce979c13394d' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
             const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
-                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, paymentMethodGroupId: this.paymentMethodGroupId, ref: (el) => {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }
@@ -119,9 +119,9 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         "insuranceToggled": [4, "insurance-toggled"],
         "authToken": [1, "auth-token"],
         "accountId": [1, "account-id"],
-        "iframeOrigin": [1025, "iframe-origin"],
         "savedPaymentMethods": [16],
         "paymentAmount": [2, "payment-amount"],
+        "hideCardBillingForm": [4, "hide-card-billing-form"],
         "selectedPaymentMethodId": [32],
         "paymentMethodOptions": [32],
         "fillBillingForm": [64],
@@ -133,7 +133,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-method-options", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form", "justifi-new-payment-method", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
+    const components = ["justifi-payment-method-options", "bank-account-form", "billing-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form-wrapper", "justifi-new-payment-method", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method", "postal-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-method-options":
             if (!customElements.get(tagName)) {
@@ -142,80 +142,90 @@ function defineCustomElement() {
             break;
         case "bank-account-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$i();
+            }
+            break;
+        case "billing-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
             }
             break;
         case "card-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "form-control-radio":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "form-control-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "hidden-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "justifi-billing-form-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "justifi-billing-form":
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "justifi-new-payment-method":
+        case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "justifi-save-new-payment-method":
+        case "justifi-saved-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-saved-payment-method":
+        case "justifi-sezzle-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "justifi-sezzle-payment-method":
+        case "postal-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }