@justifi/webcomponents 5.7.6-rc-21 → 5.7.7

package/dist/cjs/{form-control-select_2.cjs.entry.js → form-control-select_3.cjs.entry.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-dm_GlYlb.js');
+var index = require('./index-C9hBD-32.js');
 var parts = require('./parts-9jMf1erK.js');
-var formControlErrorText = require('./form-control-error-text-HM0zQerh.js');
+var formControlErrorText = require('./form-control-error-text-B-P5UDhm.js');
 require('./event-types-YOY5TKUN.js');
 
 const SelectInput = class {
@@ -42,10 +42,10 @@ const SelectInput = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '9842d5b2a2069292ded1b960bc024d7995a6d58e' }, index.h("div", { key: 'b4b5fe37f88661d2f592864adb16ae997a38b484', class: "form-group d-flex flex-column" }, index.h("div", { key: 'f70c40c7e4bdd58b985ac9b6e76fbf48ff15261e', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '6b1d9e1f3b22e702962c1d23a057f08222af5e1a', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'fae7835adde280a8c4f48f3c9b169240aac3672d', helpText: this.helpText })), index.h("select", { key: 'bee75d1bb56ed104473efcad7d8c432b50bfbb38', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (index.h(index.Host, { key: '16afff88a986b1e1b5596aeb3c780c11632ead9e' }, index.h("div", { key: '6a025a451737f626e6597e667a8825e815250f89', class: "form-group d-flex flex-column" }, index.h("div", { key: 'e6582c06498576f23b55dfc454e2c8f73e736e4a', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '6d8c53a2404c66d04e217faf397db3e7e7f95f70', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '80f38de1fafd576e340603147917194a0ca88def', helpText: this.helpText })), index.h("select", { key: 'a747f1946d552aa2bef3141b3ec05119a2fa0f15', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (index.h("option", { value: option.value }, option.label)))), index.h(formControlErrorText.FormControlErrorText, { key: 'f5df46552aa8124b344260bca05bd02c695d0fe6', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (index.h("option", { value: option.value }, option.label)))), index.h(formControlErrorText.FormControlErrorText, { key: 'f2a725b0cac08bb1ad33d8af4e8a0efb64fe9d45', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
@@ -90,10 +90,10 @@ const TextInput = class {
         return parts.input;
     }
     render() {
-        return (index.h(index.Host, { key: 'cd84a88604a278f60d81b3069449c1a4d5477d19' }, index.h("div", { key: 'e1ac6fc0c40c1a7142ed873654c44edf476101a5', class: "form-group d-flex flex-column" }, index.h("div", { key: '4bdefa049238c098e0a9fd036707e2e29089610b', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '749b24acf4ea40e4dcf5c87ef0c5e833696469ae', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'a054ccd7be60d88ef69f88a55514f54fffd8abb3', helpText: this.helpText })), index.h("input", { key: '7444a06fd70bb71d8f481697c90a0f94154314f0', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (index.h(index.Host, { key: '54560107b58c2a11f306b499dc926be155b22b51' }, index.h("div", { key: 'a62dab043fa298ae060c7e910b1748af607b8bd5', class: "form-group d-flex flex-column" }, index.h("div", { key: 'ad624f874d571ee713c8f36cf24faab4d3bcf27d', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '6c0b79ef74a686975c2d2071d80f877fae7428c1', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '0eb37ab82f5eb69cc28db76249fcf45633b8bba5', helpText: this.helpText })), index.h("input", { key: 'd23affba3abef502dadf503ef59d140d20fccb89', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), index.h(formControlErrorText.FormControlErrorText, { key: '093124125e3aae9c156993718fb602f74b9446dd', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), index.h(formControlErrorText.FormControlErrorText, { key: '58224f241eab27ca2e46883acce95f88a2a8eebf', errorText: this.errorText, name: this.name }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -101,5 +101,24 @@ const TextInput = class {
     }; }
 };
 
+const TooltipComponent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    show() {
+        this.tooltip.classList.add('show');
+    }
+    hide() {
+        this.tooltip.classList.remove('show');
+    }
+    render() {
+        if (!this.helpText) {
+            return null;
+        }
+        return (index.h("div", { class: "tooltip-container" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-question-square tooltip-icon", viewBox: "0 0 16 16", ref: (el) => (this.anchorIcon = el), part: parts.tooltipIcon }, index.h("path", { d: "M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" }), index.h("path", { d: "M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94" })), index.h("custom-popper", { trigger: "hover", placement: "top", anchorRef: this.anchorIcon }, index.h("div", { class: "tooltip bs-tooltip-top", part: parts.tooltip, role: "tooltip", ref: (el) => (this.tooltip = el) }, index.h("div", { class: "tooltip-inner", part: parts.tooltipInner }, this.helpText)))));
+    }
+};
+
 exports.form_control_select = SelectInput;
 exports.form_control_text = TextInput;
+exports.form_control_tooltip = TooltipComponent;

package/dist/cjs/{get-business-o5jPq_ME.js → get-business-BJrtsomz.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var Business = require('./Business-DCRzZf0w.js');
-var ComponentError = require('./ComponentError-D4OLnOkg.js');
-var utils = require('./utils-DvUQQLmR.js');
+var ComponentError = require('./ComponentError-C4MdBBMe.js');
+var utils = require('./utils-l0veqT9y.js');
 
 const makeGetBusiness = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
     var _a;

package/dist/cjs/{get-payment-details-DtCXaIMx.js → get-payment-details-BbfnopoD.js}

@@ -1,20 +1,22 @@
 'use strict';
 
-require('./config-state-5xZf-jax.js');
-require('./dinero-BwNN_k7x.js');
-var ComponentError = require('./ComponentError-D4OLnOkg.js');
-var Refund = require('./Refund-CqWNG8sx.js');
+require('./config-state-BBOZIS8x.js');
+require('./utils-Dewr6SlQ.js');
+var ComponentError = require('./ComponentError-C4MdBBMe.js');
+require('./Checkout-BbhldGDh.js');
 require('./Pagination-Dediz133.js');
+var Payment = require('./Payment-D6XuQ4Ve.js');
+require('./Refund-1bG6RRPO.js');
 require('./Business-DCRzZf0w.js');
 require('./Dispute-CruQTF6_.js');
-var utils = require('./utils-DvUQQLmR.js');
+var utils = require('./utils-l0veqT9y.js');
 
 const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess, onError, final }) => {
     var _a;
     try {
         const response = await service.fetchPayment(id, authToken);
         if (!response.error) {
-            onSuccess({ payment: new Refund.Payment(response.data) });
+            onSuccess({ payment: new Payment.Payment(response.data) });
         }
         else {
             const responseError = utils.getErrorMessage(response.error);

package/dist/cjs/{get-payout-csv-DE_D9y08.js → get-payout-csv-CXEQkjDm.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var ComponentError = require('./ComponentError-D4OLnOkg.js');
-var utils = require('./utils-DvUQQLmR.js');
+var ComponentError = require('./ComponentError-C4MdBBMe.js');
+var utils = require('./utils-l0veqT9y.js');
 
 const makeGetPayoutCSV = ({ authToken, service }) => async ({ payoutId, onError }) => {
     try {

package/dist/cjs/{get-subaccounts-CwCH5rC8.js → get-subaccounts-CpCJjnYt.js}

@@ -1,14 +1,16 @@
 'use strict';
 
-var Api = require('./Api-CPuq_15r.js');
-var ComponentError = require('./ComponentError-D4OLnOkg.js');
-var Refund = require('./Refund-CqWNG8sx.js');
+var Api = require('./Api-DLhABIj9.js');
+var ComponentError = require('./ComponentError-C4MdBBMe.js');
+require('./Checkout-BbhldGDh.js');
 require('./Pagination-Dediz133.js');
+require('./Payment-D6XuQ4Ve.js');
+var Refund = require('./Refund-1bG6RRPO.js');
 require('./Business-DCRzZf0w.js');
 require('./Dispute-CruQTF6_.js');
-require('./config-state-5xZf-jax.js');
-require('./dinero-BwNN_k7x.js');
-var utils = require('./utils-DvUQQLmR.js');
+require('./config-state-BBOZIS8x.js');
+require('./utils-Dewr6SlQ.js');
+var utils = require('./utils-l0veqT9y.js');
 
 const api = Api.Api();
 class SubAccountService {

package/dist/cjs/gross-payment-chart-core.cjs.entry.js

@@ -1,10 +1,9 @@
 'use strict';
 
-var index = require('./index-dm_GlYlb.js');
-var utils = require('./utils-BaGF9XIe.js');
-var utils$1 = require('./utils-Df-pajL7.js');
-var spinner = require('./spinner-Kb1BFvnL.js');
-require('./dinero-BwNN_k7x.js');
+var index = require('./index-C9hBD-32.js');
+var utils = require('./utils-Dewr6SlQ.js');
+var utils$1 = require('./utils-Bzyj4qWe.js');
+var spinner = require('./spinner-jmeA44Ee.js');
 require('./parts-9jMf1erK.js');
 
 /*!
@@ -11055,7 +11054,7 @@ const GrossPaymentChartCore = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '14360f11f9b118e347ee73739f03c3631fbef1a4' }, this.loading && index.h(spinner.Spinner, { key: 'a5190472afdbf507c6c36c8aaae1473bffc80dcf' }), !this.errorMessage ? index.h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : utils$1.ErrorState(this.errorMessage)));
+        return (index.h(index.Host, { key: '9c0cca988c30933ff2e2b0f9822525fff507e299' }, this.loading && index.h(spinner.Spinner, { key: '37dd49dd0337e1e1358d65735be502926e30a4ea' }), !this.errorMessage ? index.h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : utils$1.ErrorState(this.errorMessage)));
     }
     static get watchers() { return {
         "getGrossPayment": ["propChanged"],

package/dist/cjs/{header-1-DD41iNlG.js → header-1-DRA3f4Jh.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-dm_GlYlb.js');
+var index = require('./index-C9hBD-32.js');
 var parts = require('./parts-9jMf1erK.js');
 
 const Header1 = (props) => {

package/dist/cjs/{header-3-D9Wa0IfT.js → header-3-sOdOpfx3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-dm_GlYlb.js');
+var index = require('./index-C9hBD-32.js');
 var parts = require('./parts-9jMf1erK.js');
 
 const Header3 = (props) => {

package/dist/cjs/iframe-input-styles-state-DH-5a2Mg.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var index = require('./index-B32W0A3m.js');
+
+const iframeInputStylesStore = index.createStore({
+    focused: {
+        boxShadow: '',
+        border: '',
+    },
+    focusedAndInvalid: {
+        boxShadow: '',
+        border: '',
+    },
+    fontStyles: {
+        fontFamily: '',
+        fontSize: '',
+        fontWeight: '',
+        lineHeight: '',
+        margin: '',
+        padding: '',
+    },
+});
+const { state: iframeInputStyles, set: iframeInputStylesSet, } = iframeInputStylesStore;
+
+exports.iframeInputStyles = iframeInputStyles;
+exports.iframeInputStylesSet = iframeInputStylesSet;

package/dist/cjs/{hidden-input_2.cjs.entry.js → iframe-input_4.cjs.entry.js}

@@ -1,108 +1,21 @@
 'use strict';
 
-var index$1 = require('./index-dm_GlYlb.js');
-var index = require('./index-Yd9aLenr.js');
-var parts = require('./parts-9jMf1erK.js');
+var index = require('./index-C9hBD-32.js');
 var _commonjsHelpers = require('./_commonjsHelpers-BJu3ubxk.js');
-var formControlErrorText = require('./form-control-error-text-HM0zQerh.js');
-var _package = require('./package-B9ks67gS.js');
-
-const iframeInputStylesStore = index.createStore({
-    focused: {
-        boxShadow: '',
-        border: '',
-    },
-    focusedAndInvalid: {
-        boxShadow: '',
-        border: '',
-    },
-    fontStyles: {
-        fontFamily: '',
-        fontSize: '',
-        fontWeight: '',
-        lineHeight: '',
-        margin: '',
-        padding: '',
-    },
-});
-const { state: iframeInputStyles, set: iframeInputStylesSet, } = iframeInputStylesStore;
-
-const HiddenInput = class {
-    constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.isFocused = false;
-        this.errorText = '';
-    }
-    async componentDidLoad() {
-        const fontStyles = await this.getBaseFontStyles();
-        iframeInputStylesSet('fontStyles', fontStyles);
-        const focusedStyles = await this.getFocusedStyles();
-        iframeInputStylesSet('focused', focusedStyles);
-        const focusedAndInvalidStyles = await this.getFocusedAndInvalidStyles();
-        iframeInputStylesSet('focusedAndInvalid', focusedAndInvalidStyles);
-    }
-    async getBaseFontStyles() {
-        return new Promise((resolve, _reject) => {
-            setTimeout(() => {
-                const computedStyles = getComputedStyle(this.hiddenInput);
-                const styles = {
-                    fontFamily: computedStyles.fontFamily,
-                    fontSize: computedStyles.fontSize,
-                    fontWeight: computedStyles.fontWeight,
-                    lineHeight: computedStyles.lineHeight,
-                    margin: computedStyles.margin,
-                    padding: computedStyles.padding,
-                    color: computedStyles.color,
-                };
-                resolve(styles);
-            }, 500);
-        });
-    }
-    ;
-    async getFocusedStyles() {
-        return new Promise((resolve, _reject) => {
-            this.hiddenInput.focus();
-            setTimeout(() => {
-                this.hiddenInput.blur();
-                let computedStyles = getComputedStyle(this.hiddenInput);
-                resolve({
-                    boxShadow: computedStyles.boxShadow,
-                    border: computedStyles.border,
-                });
-            }, 500);
-        });
-    }
-    async getFocusedAndInvalidStyles() {
-        return new Promise((resolve, _reject) => {
-            this.hiddenInput.focus();
-            this.errorText = 'Error';
-            setTimeout(() => {
-                const computedStyles = getComputedStyle(this.hiddenInput);
-                const styles = {
-                    boxShadow: computedStyles.boxShadow,
-                    border: computedStyles.border,
-                };
-                this.hiddenInput.blur();
-                resolve(styles);
-            }, 500);
-        });
-    }
-    get part() {
-        if (this.isFocused && this.errorText) {
-            return parts.inputInvalidAndFocused;
-        }
-        if (this.errorText) {
-            return parts.inputInvalid;
-        }
-        if (this.isFocused) {
-            return parts.inputFocused;
-        }
-        return parts.input;
-    }
-    render() {
-        return (index$1.h(index$1.Host, { key: 'eb0135c733e6a4273855b6c74efab83e51d3788d' }, index$1.h("input", { key: '48577dd678d44b2382bbeadcaa2efc14484f8638', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
-    }
-};
+var formControlErrorText = require('./form-control-error-text-B-P5UDhm.js');
+var _package = require('./package-C0-LCfay.js');
+var iframeInputStylesState = require('./iframe-input-styles-state-DH-5a2Mg.js');
+var parts = require('./parts-9jMf1erK.js');
+var index_esm = require('./index.esm-BleZSAc0.js');
+var schemaValidations = require('./schema-validations-jek_iZ9W.js');
+var header3 = require('./header-3-sOdOpfx3.js');
+require('./event-types-YOY5TKUN.js');
+var utils = require('./utils-DAyWinG2.js');
+var stateOptions = require('./state-options-CIT9xdTz.js');
+require('./index-B32W0A3m.js');
+require('./business-form-options-CMII7nIK.js');
+require('./Business-DCRzZf0w.js');
+require('./helpers-B5OCqlIM.js');
 
 var iframeResizer = {exports: {}};
 
@@ -1644,8 +1557,8 @@ const MessageEventType = {
 
 const IframeInput = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.iframeLoaded = index$1.createEvent(this, "iframeLoaded");
+        index.registerInstance(this, hostRef);
+        this.iframeLoaded = index.createEvent(this, "iframeLoaded");
         this.isFocused = false;
         this.isValid = true;
         this.dispatchMessageEvent = (event) => {
@@ -1699,9 +1612,9 @@ const IframeInput = class {
     get style() {
         if (this.isFocused) {
             if (!this.isValid) {
-                return iframeInputStyles.focusedAndInvalid;
+                return iframeInputStylesState.iframeInputStyles.focusedAndInvalid;
             }
-            return iframeInputStyles.focused;
+            return iframeInputStylesState.iframeInputStyles.focused;
         }
         return null;
     }
@@ -1709,16 +1622,16 @@ const IframeInput = class {
         // map the iframeInputStyles.fontStyles properties to the urlParams 
         // and encode each property with btoa
         const encodedObject = Object.fromEntries(Object
-            .entries(iframeInputStyles.fontStyles)
+            .entries(iframeInputStylesState.iframeInputStyles.fontStyles)
             .map(([key, value]) => [key, btoa(String(value))]));
         const params = new URLSearchParams(encodedObject).toString();
         return params;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '07a697a99ef1b601c3f95d176c0eb28a695afff5', class: "form-group d-flex flex-column" }, index$1.h("div", { key: 'f9a1cf30b2020ae9de993dc363b07cd1e897c82d', style: {
+        return (index.h(index.Host, { key: 'c7e816ffb97c88217b50e8e8ecc5c0fe210bcdbe', class: "form-group d-flex flex-column" }, index.h("div", { key: '2e38b8e3ddeaba93556c52f20ff67b8324255bda', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, index$1.h("label", { key: '09c186cb27e0fc75352c8028f1ff4e92866f3984', class: "form-label", htmlFor: "", part: parts.label }, this.label || ''), index$1.h("div", { key: '758ea464591a51ddc183256ebcd66238602bc4cc', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, index$1.h("iframe", { key: 'c2956bb89e30fe2ba1a9111fe71681883470879b', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, index.h("label", { key: '75c8d278c641316e797c4cd79905ff554920a4fc', class: "form-label", htmlFor: "", part: parts.label }, this.label || ''), index.h("div", { key: 'e06f9f5f09fb0b3679df6195c1557698790a6331', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, index.h("iframe", { key: 'c5f7a5c687855d59057dfa52c8f4b5c157c24107', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -1728,10 +1641,139 @@ const IframeInput = class {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), index$1.h(formControlErrorText.FormControlErrorText, { key: '0ab5542c8c8a8242aefee11cc4c1b0815f27f0aa', errorText: this.errorText, name: this.inputId }))));
+            } })), index.h(formControlErrorText.FormControlErrorText, { key: '116d0495276351a49014fe565977a244596284ee', errorText: this.errorText, name: this.inputId }))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+const fullBillingSchema = () => index_esm.create$3({
+    name: schemaValidations.identityNameValidation.required('Enter full name'),
+    address_line1: schemaValidations.lineOneValidation.required('Enter street address'),
+    address_line2: schemaValidations.lineTwoValidation.nullable(),
+    address_city: schemaValidations.cityValidation.required('Enter city'),
+    address_state: schemaValidations.stateValidation.required('Select state'),
+    address_postal_code: schemaValidations.postalValidation.required('Enter postal code')
+});
+const postalOnlySchema = () => index_esm.create$3({
+    name: schemaValidations.identityNameValidation.nullable(),
+    address_line1: schemaValidations.lineOneValidation.nullable(),
+    address_line2: schemaValidations.lineTwoValidation.nullable(),
+    address_city: schemaValidations.cityValidation.nullable(),
+    address_state: schemaValidations.stateValidation.nullable(),
+    address_postal_code: schemaValidations.postalValidation.required('Enter postal code')
+});
+const nameOnlySchema = () => index_esm.create$3({
+    name: schemaValidations.identityNameValidation.required('Enter full name'),
+    address_line1: schemaValidations.lineOneValidation.nullable(),
+    address_line2: schemaValidations.lineTwoValidation.nullable(),
+    address_city: schemaValidations.cityValidation.nullable(),
+    address_state: schemaValidations.stateValidation.nullable(),
+    address_postal_code: schemaValidations.postalValidation.nullable()
+});
+
+const BankAccountBillingFormSimple = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new index_esm.FormController(nameOnlySchema());
+    }
+    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 (index.h(index.Host, { key: '26bb004c8683881a5f7b6a4a7de3b1e2c680d157' }, index.h("div", { key: '89951cc4128e5b6578943af160eb44eb64d02272', part: parts.billingForm, class: "mt-4" }, index.h("form", { key: '06ff2993369ed913abd9973fc7bb87514d047671' }, index.h("fieldset", { key: '29b61ffe7a9047a9909d8ed3688c41b9bbedc1d0' }, this.legend && (index.h("legend", { key: 'eb02a71dfa08b5b5b5e3646f96d9a6882b71bda0' }, this.legend)), index.h("div", { key: 'b6c5e23355c9a70423f23540f2a7191ae33aa738', class: "row gy-3" }, index.h("div", { key: 'a7f5606df9c5ca03de56ccaf3a809550a8437ff0', class: "col-12" }, index.h("form-control-text", { key: '688e677b9ceb86ae0c41715b12edbc6cee913424', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
+    }
+};
+
+const BillingFormFull = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new index_esm.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 (index.h(index.Host, { key: 'e9d36cd879429f6d2fe05d2fc424b09a53fda517' }, index.h("div", { key: '3a979f2f763b96e22341ce87597a53bd1dd69de4', part: parts.billingForm, class: "mt-4" }, index.h(header3.Header3, { key: 'bd55292d19691da184eb079361f03ce72a369fa0', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), index.h("form", { key: '5ad294e59acc1374abd835a1281ca9351914261d' }, index.h("fieldset", { key: 'b8a1e4c537c6ca214a8e233d513dbe9673ad440e' }, this.legend && (index.h("legend", { key: '871ce543139ea01c89e2198ab6d0d6d5a5bdb2d7' }, this.legend)), index.h("div", { key: 'fc5334df48a1aabd2cfe2344fc934f6eb6fe5f94', class: "row gy-3" }, index.h("div", { key: '1b0e96757b37d15f5c90e0322293c4615d195e57', class: "col-12" }, index.h("form-control-text", { key: '95312a600e8c0b1f0c082dbde3d11fac41683f8c', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: 'b658488bf748d0d75fc032daef27ca4c72b81deb', class: "col-12" }, index.h("form-control-text", { key: 'aed40a410554a29ebc94979cbfe7e7aebe3e03c0', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), index.h("div", { key: '7a297f8670a3a421bf06737e158d71b119e0f92e', class: "col-12" }, index.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 })), index.h("div", { key: 'fe6c3eeec6c496d846d48e420030689c05248e02', class: "col-12" }, index.h("form-control-text", { key: 'ac9dea33795c8a0a8f0b602dc108611cfebf0be6', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), index.h("div", { key: 'ecbe044931a98b9b0df870f8899303775ddf92d1', class: "col-12" }, index.h("form-control-select", { key: 'b6c25c9170d4f97c81b57e44513dbaa8a7166c3b', name: 'address_state', label: 'State', options: stateOptions.StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), index.h("div", { key: '216602a05107394f90b495f30be393efbc01371f', class: "col-12" }, index.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: utils.numberOnlyHandler }))))))));
+    }
+};
+
+const CardBillingFormSimple = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new index_esm.FormController(postalOnlySchema());
+    }
+    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 (index.h(index.Host, { key: '579768ec89e37b775a2406ba687a9a18e1c1fb44' }, index.h("div", { key: '5a98c4adf327f5e09421fbbd78c9f13f031579c6', part: parts.billingForm, class: "mt-4" }, index.h("form", { key: '4e2b9e9b3ae5d15f6705e418edb2307ec28e19f2' }, index.h("fieldset", { key: 'baa9735b69a185a229a6db3fa9ddc3adb02a8748' }, this.legend && (index.h("legend", { key: '65320d5245a39d67aa9389e54ef02fa87bea9bb8' }, this.legend)), index.h("div", { key: '1e8b4f9de1d6b0f24bb6ef3c8b282f34bf16c04c', class: "row gy-3" }, index.h("div", { key: '75fb250b91a586982c9a80fc544c2685cfb2f0e1', class: "col-12" }, index.h("form-control-text", { key: 'db2be476b7f49596faf8a93f40501d89aae3d84f', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: utils.numberOnlyHandler }))))))));
     }
-    get el() { return index$1.getElement(this); }
 };
 
-exports.hidden_input = HiddenInput;
 exports.iframe_input = IframeInput;
+exports.justifi_bank_account_billing_form_simple = BankAccountBillingFormSimple;
+exports.justifi_billing_form_full = BillingFormFull;
+exports.justifi_card_billing_form_simple = CardBillingFormSimple;

package/dist/cjs/{index-Yd9aLenr.js → index-B32W0A3m.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-dm_GlYlb.js');
+var index = require('./index-C9hBD-32.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/dist/cjs/{index-dm_GlYlb.js → index-C9hBD-32.js}

@@ -4,7 +4,7 @@ const NAMESPACE = 'webcomponents';
 const BUILD = /* webcomponents */ { hydratedSelectorName: "hydrated", lazyLoad: true, slotRelocation: true, updatable: true};
 
 /*
- Stencil Client Platform v4.36.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.36.3 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -1486,7 +1486,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       Cstr.observedAttributes = Array.from(
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
-          ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
+          ...members.filter(([_, m]) => m[0] & 31 /* HasAttribute */).map(([propName, m]) => {
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
             return attrName;

package/dist/cjs/{insurance-state-Cyva9u6S.js → insurance-state-e44s1lUQ.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-dm_GlYlb.js');
+var index = require('./index-C9hBD-32.js');
 var parts = require('./parts-9jMf1erK.js');
-var index$1 = require('./index-Yd9aLenr.js');
+var index$1 = require('./index-B32W0A3m.js');
 
 const Header2 = (props) => {
     return index.h("h2", { class: `header-2 ${props === null || props === void 0 ? void 0 : props.class}`, part: parts.heading2 }, props.text);
@@ -12,8 +12,6 @@ const insuranceValuesStore = index$1.createStore({});
 const { state: insuranceValues, on: insuranceValuesOn } = insuranceValuesStore;
 const insuranceErrorsStore = index$1.createStore({});
 const { state: insuranceErrors } = insuranceErrorsStore;
-// Track previous values to detect actual changes vs initial setting
-const previousInsuranceValues = {};
 const validateInsuranceValues = () => {
     let valid = true;
     Object.keys(insuranceValues).forEach((key) => {
@@ -28,24 +26,8 @@ const validateInsuranceValues = () => {
     });
     return { isValid: valid };
 };
-// Helper function to check if a value has actually changed (not just initially set)
-const hasInsuranceValueChanged = (key, newValue) => {
-    const hadPreviousValue = previousInsuranceValues.hasOwnProperty(key);
-    const previousValue = previousInsuranceValues[key];
-    if (!hadPreviousValue) {
-        // First time setting this value, track it but don't consider it a "change"
-        previousInsuranceValues[key] = newValue;
-        return false;
-    }
-    const hasChanged = previousValue !== newValue;
-    if (hasChanged) {
-        previousInsuranceValues[key] = newValue;
-    }
-    return hasChanged;
-};
 
 exports.Header2 = Header2;
-exports.hasInsuranceValueChanged = hasInsuranceValueChanged;
 exports.insuranceErrors = insuranceErrors;
 exports.insuranceValues = insuranceValues;
 exports.insuranceValuesOn = insuranceValuesOn;

package/dist/cjs/justifi-additional-questions-form-step-core_6.cjs.entry.js

@@ -1,30 +1,31 @@
 'use strict';
 
-var index = require('./index-dm_GlYlb.js');
+var index = require('./index-C9hBD-32.js');
 var businessAdditionalQuestionsSchema = require('./business-additional-questions-schema-DNbSH3E-.js');
 var index_esm = require('./index.esm-BleZSAc0.js');
 var Business = require('./Business-DCRzZf0w.js');
 var formInputMasks = require('./form-input-masks-DgXd0f4V.js');
 var parts = require('./parts-9jMf1erK.js');
-var skeleton = require('./skeleton-x-GSs3xk.js');
+var skeleton = require('./skeleton-C7DQRD6r.js');
 require('./event-types-YOY5TKUN.js');
 var businessFormOptions = require('./business-form-options-CMII7nIK.js');
 var eventTypes = require('./event-types-DNOUef41.js');
-var Refund = require('./Refund-CqWNG8sx.js');
+var Refund = require('./Refund-1bG6RRPO.js');
 var schemaValidations = require('./schema-validations-jek_iZ9W.js');
-require('./config-state-5xZf-jax.js');
-require('./dinero-BwNN_k7x.js');
-var ComponentError = require('./ComponentError-D4OLnOkg.js');
+require('./config-state-BBOZIS8x.js');
+require('./utils-Dewr6SlQ.js');
+var ComponentError = require('./ComponentError-C4MdBBMe.js');
+require('./Checkout-BbhldGDh.js');
 require('./Pagination-Dediz133.js');
+require('./Payment-D6XuQ4Ve.js');
 require('./Dispute-CruQTF6_.js');
 var utils = require('./utils-DAyWinG2.js');
-var button = require('./button-CfVQSysQ.js');
+var button = require('./button-DsHDMHaa.js');
 var businessIdentitySchema = require('./business-identity-schema-CclzWSOn.js');
 var stateOptions = require('./state-options-CIT9xdTz.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 require('./helpers-B5OCqlIM.js');
-require('./utils-BaGF9XIe.js');
-require('./index-Yd9aLenr.js');
+require('./index-B32W0A3m.js');
 
 class BankAccount {
     constructor(data) {