@justifi/webcomponents 6.14.4-rc.1 → 6.14.4

package/dist/module/card-form2.js

@@ -1,16 +1,21 @@
-import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { S as Skeleton } from './skeleton.js';
 import { w as waitForConfig, c as configState } from './config-state.js';
 import { d as generateTabId } from './utils2.js';
 import { c as checkPkgVersion } from './check-pkg-version.js';
+import { C as ComponentErrorSeverity, d as ComponentErrorMessages, c as ComponentErrorCodes } from './Plaid.js';
+import './Pagination.js';
+import './Business.js';
+import './ApplePay.js';
+import { B as Button } from './button.js';
+import './justifi-details2.js';
+import './event-types.js';
+import './justifi-radio-list-item2.js';
+import { d as defineCustomElement$3 } from './form-alert2.js';
 import { d as defineCustomElement$2 } from './hidden-input2.js';
 import { d as defineCustomElement$1 } from './iframe-input2.js';
 
-const CardFormSkeleton = (props) => {
-    const { isReady } = props;
-    if (isReady) {
-        return null;
-    }
+const CardFormSkeleton = () => {
     return (h("div", { class: "container-fluid p-0" }, h("div", { class: "mb-3" }, h(Skeleton, { height: "18px", width: "100px" }), h(Skeleton, { height: "36px" })), h("div", { class: "row" }, h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "80px" }), h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "30px" }), h(Skeleton, { height: "36px" })))));
 };
 
@@ -20,7 +25,13 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLEle
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.isReady = false;
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.iframeState = 'loading';
+        this.reloadIframes = () => {
+            this.iframeState = 'loading';
+            this.iframeElements.forEach((element) => element.reload());
+            this.watchIframesLoad();
+        };
     }
     async componentWillLoad() {
         await waitForConfig();
@@ -28,20 +39,12 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLEle
         this.tabId = generateTabId();
         checkPkgVersion();
     }
-    componentDidRender() {
-        const elements = [
-            this.cardNumberIframeElement,
-            this.expirationMonthIframeElement,
-            this.expirationYearIframeElement,
-            this.cvvIframeElement,
-        ];
-        Promise.all(elements.map((element) => {
-            return new Promise((resolve) => {
-                element.addEventListener('iframeLoaded', () => { resolve(); });
-            });
-        })).then(() => {
-            this.isReady = true;
-        });
+    componentDidLoad() {
+        this.watchIframesLoad();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.loadAbortController) === null || _a === void 0 ? void 0 : _a.abort();
     }
     async validate() {
         const cardNumberIsValid = await this.cardNumberIframeElement.validate();
@@ -54,16 +57,70 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLEle
         const result = await this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
         return result;
     }
+    get isReady() {
+        return this.iframeState === 'ready';
+    }
+    get iframeElements() {
+        return [
+            this.cardNumberIframeElement,
+            this.expirationMonthIframeElement,
+            this.expirationYearIframeElement,
+            this.cvvIframeElement,
+        ];
+    }
+    watchIframesLoad() {
+        var _a;
+        (_a = this.loadAbortController) === null || _a === void 0 ? void 0 : _a.abort();
+        const { signal } = (this.loadAbortController = new AbortController());
+        const pending = new Set(this.iframeElements.map((element) => element.inputId));
+        const loaded = Promise.all(this.iframeElements.map((element) => (new Promise((resolve) => {
+            element.addEventListener('iframeLoaded', () => {
+                pending.delete(element.inputId);
+                resolve();
+            }, { once: true, signal });
+        }))));
+        const deadline = new Promise((_resolve, reject) => {
+            const timeoutId = window.setTimeout(() => reject(new Error(`Iframes failed to load: ${Array.from(pending).join(', ')}`)), 10000);
+            signal.addEventListener('abort', () => {
+                window.clearTimeout(timeoutId);
+                reject(new Error('iframe load watch aborted'));
+            }, { once: true });
+        });
+        Promise.race([loaded, deadline]).then(() => {
+            var _a;
+            if (signal.aborted)
+                return;
+            this.iframeState = 'ready';
+            (_a = this.loadAbortController) === null || _a === void 0 ? void 0 : _a.abort();
+        }).catch((e) => {
+            var _a;
+            if (signal.aborted)
+                return;
+            this.iframeState = 'error';
+            (_a = this.loadAbortController) === null || _a === void 0 ? void 0 : _a.abort();
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.IFRAME_LOAD_ERROR,
+                message: ComponentErrorMessages.IFRAME_LOAD_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+                data: {
+                    errorMessage: e.message,
+                },
+            });
+        });
+    }
+    renderIframeError() {
+        return (h("div", null, h("form-alert", { text: ComponentErrorMessages.IFRAME_LOAD_ERROR, hideAlert: false }), h(Button, { variant: "link", clickHandler: this.reloadIframes, "aria-label": "Reload payment form", type: "button" }, "Try again")));
+    }
     render() {
-        return (h("div", { key: 'd3cb1fca6595f60e5f5f122b73d3d6c11a826423' }, h(CardFormSkeleton, { key: 'f83dcbbc214d460bb21c015ec051436ed5cf6670', isReady: this.isReady }), h("hidden-input", { key: '5fad0d06303d0ddb55c30c2cd94014255f2a8cec' }), h("div", { key: '68440756a1aad69b5c95245e7a2a5feb16899dca', class: "container-fluid p-0", style: {
+        return (h("div", { key: 'e6250721d89b25d536a5c40743decb7c2f0e9037' }, this.iframeState === 'loading' && h(CardFormSkeleton, { key: 'd3885015e28ade3f1d166d3a3ea91c212e4c08f9' }), this.iframeState === 'error' && this.renderIframeError(), h("hidden-input", { key: '083b462140adf1907e4c796ec99ce72f68a3dcef' }), h("div", { key: 'd20f7dccc152cb16bd216eb5886c7eee46cbd4f1', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'b39eab56c79463935f1a1bb15cc867997f026e7b', class: "mb-3" }, h("iframe-input", { key: '25a2390a8c3c92d5e6eceafe6b821202ecb22d76', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '68766798d954a0b3d093ae13c3c2955f819da4f2', class: "row" }, h("div", { key: '05539f1ac8ebb0397574d55b4b76d7acdb7d2dca', class: "col-4 align-content-end" }, h("iframe-input", { key: '4c437a4384e6c301e18824d799784c1133e70ee3', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: 'b9a5b8b5dda1d8ab6305c9dc1ef9b655eb02fb3d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c1a412c20e75d21c1084a4b93f22362c367c1907', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: 'abdfdbd7eb784871011397a7c5fdf371e3c6baf0', class: "col-4 align-content-end" }, h("iframe-input", { key: '08dff072e785846d7543018c194b4df6ce5b343e', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
+            } }, h("div", { key: 'd06fa0c936dc7963caf3e27ab4cbfee804822bc3', class: "mb-3" }, h("iframe-input", { key: '1050720e0aec9b5e38b7a97fce95229faf490b6f', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '5a37f9da6509890bc3b6e5e5d3061fef82ac8650', class: "row" }, h("div", { key: '249456011e5dca659243dc68495da16fdff5a183', class: "col-4 align-content-end" }, h("iframe-input", { key: '49f3a8baa14867708a9f1dad7f61830d86847473', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: 'e7fd325d2f39c7c293789931fda9de2f76faa4d4', class: "col-4 align-content-end" }, h("iframe-input", { key: '10beda8d2bfacdcf8ab3b17ffae858306312a06f', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: 'de4a844a20da09910f710567e62d2b06f144abe7', class: "col-4 align-content-end" }, h("iframe-input", { key: '555a6c96fadb9e5466c76ea259c5d001e16468d6', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
 }, [256, "card-form", {
-        "isReady": [32],
         "iframeOrigin": [32],
         "tabId": [32],
+        "iframeState": [32],
         "validate": [64],
         "tokenize": [64]
     }]);
@@ -71,13 +128,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["card-form", "hidden-input", "iframe-input"];
+    const components = ["card-form", "form-alert", "hidden-input", "iframe-input"];
     components.forEach(tagName => { switch (tagName) {
         case "card-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CardForm);
             }
             break;
+        case "form-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "hidden-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

package/dist/module/checkout.store.js

@@ -104,10 +104,24 @@ function getCheckoutState() {
     };
 }
 function onAnyChange(callback) {
-    Object.keys(initialState).forEach((key) => {
-        // @ts-ignore - onChange is generically typed by stencil/store but not exported here
-        onChange(key, (newValue) => callback(key, newValue));
+    let pending = false;
+    let active = true;
+    const unsubscribe = Object.keys(initialState).map((key) => {
+        return onChange(key, () => {
+            if (pending || !active)
+                return;
+            pending = true;
+            queueMicrotask(() => {
+                pending = false;
+                if (active)
+                    callback();
+            });
+        });
     });
+    return () => {
+        active = false;
+        unsubscribe.forEach((off) => off());
+    };
 }
 
 export { onAnyChange as a, getCheckoutState as b, checkoutStore as c, getAvailablePaymentMethodTypes as g, onChange as o };

package/dist/module/customer-details2.js

@@ -43,7 +43,7 @@ const CustomerDetails = /*@__PURE__*/ proxyCustomElement(class CustomerDetails e
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h("div", { key: '91b627ab79cff98fc4bb2b76e9e9159b99bcdc44' }, h("div", { key: 'ddb074202926fca96c40fba3724b1a603ef29bf8', class: "row gy-3" }, h("div", { key: '680d03bb31e19a1ab7aa560195a802dc2a7f1bcf', class: "col-12" }, h("h2", { key: 'b9e47dc34c931a18373053384dac93ccd45e4823', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '286716947b073de829fe525eb855864f51d72234', class: "col-12" }, h("form-control-text", { key: '2b9369bfbb55fa87ee8448324f6ff8480679ba58', label: "Full Name", name: "customer_name", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_name, inputHandler: this.inputHandler, errorText: this.errors.customer_name })), h("div", { key: '89f384a11dcac912a189b4909586a3e1db603f25', class: "col-12" }, h("form-control-text", { key: 'c6dfbeb68b117d840a39bfe4e96be7d18d5395b7', label: "Email", name: "customer_email_address", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.customer_email_address, inputHandler: this.inputHandler, errorText: this.errors.customer_email_address })), h("div", { key: '29c2e48fabafe27b878294e3267a9ec04a91a2a4', class: "col-12" }, h("form-control-textarea", { key: 'ec734cbef65f6263e462b86332be24c92a1173ad', label: "Billing Address", name: "customer_billing_address", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.customer_billing_address, inputHandler: this.inputHandler, errorText: this.errors.customer_billing_address })), h("div", { key: 'f944aca1e6594cdcc20bb69bd1aa625536d05ac0', class: "col-12" }, h("form-control-file-v2", { key: 'f227a8b81e6b8409152f61ae6906319577663dd3', label: "Customer Signature", name: "customer_signature", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.customer_signature })), h("div", { key: '4804ef68cc6f5d0006568aca8bc57086243af4de', class: "col-12" }, h("form-control-file-v2", { key: 'a0dba5cfa046de4bca065d7bb20ec2a5abd57fc9', label: "Customer Communication", name: "customer_communication", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.customer_communication })))));
+        return (h("div", { key: 'e4f028d0369b88c270aa610ab457921ee729f1cb' }, h("div", { key: 'ba4d130e343603baa3c1b3d8141b981f97cb7133', class: "row gy-3" }, h("div", { key: 'a21d574e6fbd3daef4960b39aba9568060a79ebd', class: "col-12" }, h("h2", { key: 'a87274deacfdb31ae769252f7418416152528d43', class: "h5", part: heading5 }, "Customer Details")), h("div", { key: '2aa05a739cc38a95860b255dab7142fd1a7932d3', class: "col-12" }, h("form-control-text", { key: 'b4fa7ef3c75d3c2ddc83292c2a13c80ee2a6a4cf', label: "Full Name", name: "customer_name", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_name, inputHandler: this.inputHandler, errorText: this.errors.customer_name })), h("div", { key: 'b8a6851094599ed3683f3c14f18305ff0a8ed557', class: "col-12" }, h("form-control-text", { key: '4c8d73b3001a36502c6e6083eafdc8e06af86d23', label: "Email", name: "customer_email_address", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.customer_email_address, inputHandler: this.inputHandler, errorText: this.errors.customer_email_address })), h("div", { key: '45d406392c4ba199d77583f18874797f4b7c125e', class: "col-12" }, h("form-control-textarea", { key: '757de489531e8e28beb052403842d191e2a45be1', label: "Billing Address", name: "customer_billing_address", defaultValue: (_c = this.disputeResponse) === null || _c === void 0 ? void 0 : _c.customer_billing_address, inputHandler: this.inputHandler, errorText: this.errors.customer_billing_address })), h("div", { key: '3e339e0f275e1ab8e195d77973b60af364d5cdc6', class: "col-12" }, h("form-control-file-v2", { key: '64175687470e62ce55d62163b8d231c481fce2a6', label: "Customer Signature", name: "customer_signature", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_d = this.documentErrors) === null || _d === void 0 ? void 0 : _d.customer_signature })), h("div", { key: '27d1ac884a8986c8e9a23c92296e2f8871ec0f45', class: "col-12" }, h("form-control-file-v2", { key: 'f7169172d91f4ea785d1532bb4a442cba8cc1c9e', label: "Customer Communication", name: "customer_communication", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_e = this.documentErrors) === null || _e === void 0 ? void 0 : _e.customer_communication })))));
     }
 }, [256, "customer-details", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/dispute-notification2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { b as formatCurrency } from './utils2.js';
-import { j as text, L as heading4 } from './parts.js';
+import { j as text, M as heading4 } from './parts.js';
 import { B as Button } from './button.js';
 import { S as Skeleton } from './skeleton.js';
 import './justifi-details2.js';
@@ -56,8 +56,8 @@ const DisputeNotification = /*@__PURE__*/ proxyCustomElement(class DisputeNotifi
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (h("div", { key: '325018c414e82b5c1bc7d9c5aa444b5a9d4e83d6', class: "dispute-notification-root" }, this.isLoading && (h("div", { key: 'deffb8ef248e32962aca084a564e83aa5f222b0a', style: { marginBottom: '8px' } }, h(Skeleton, { key: '6f6c630b3122b1b2fd480470f5df7683f19de612', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: '11f46711fed1094496c64551f084351c08f598be', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'fc7e2eac76e1cbc329147f3da39a8c28c51a7b6a', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && this.isDueDatePassed() && (h("div", { key: '0ef159acf9fe5b12dc0dcddab6b7583e5fc9a799', part: text }, h("h1", { key: 'db263006990c5b4cf178f7f81650ad7602765532', class: "h4", part: heading4 }, "The due date (", (_b = this.dispute) === null || _b === void 0 ? void 0 :
-            _b.due_date, ") for this dispute has passed"), h("p", { key: '185c6f952ef46e3aec625cab73c943b3046ef6b4' }, "You can no longer submit evidence to counter this dispute."))), ((_c = this.dispute) === null || _c === void 0 ? void 0 : _c.needsResponse) && !this.isDueDatePassed() && (h("div", { key: 'd4536104addc500277fbde990b7b33ba8ff54c7e', part: text }, h("h1", { key: '198138cc6541c0aeeae458e2de1e3ae0c695328d', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '6902ce5e3e94ab7f71ee6d0c6a7604ef97f0e740' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: 'f49d1ac855365480edc61e0af117230e2f3dbe1f', class: "h5" }, "Dispute details"), h("div", { key: 'f3868a098dbc4a613d676b8580c053527f9d5fad', class: "d-table gap-2" }, h("div", { key: '7699bc619b652ffe1c77cf6e5e0dac967679b1e6', class: "d-table-row gap-2" }, h("span", { key: '9de67b45877120f54f724f1efe7b3f4d4b035d30', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'bfd79f86b5b81daf2a34f5874fcff03a05d1e64d', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_d = this.dispute) === null || _d === void 0 ? void 0 : _d.amount))), h("div", { key: '0e57d56172859eb5857a1930cb837569157026d9', class: "d-table-row gap-2" }, h("span", { key: '0b615bd8f9a9add7d18d50be4f4f644707576de2', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '46288c67be32fe2d95fea88f5b0148f22552a2c9', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_e = this.dispute) === null || _e === void 0 ? void 0 : _e.reason)), h("div", { key: 'c68280b0f36280804fb6231236d942174c189456', class: "d-table-row gap-2" }, h("span", { key: 'ed3f145aa0f2c949b80d7033e4ecb818a4a4fa68', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Due Date"), h("span", { key: '4c4530acbc570fb13b5f53947714bd250ff99cab', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_f = this.dispute) === null || _f === void 0 ? void 0 : _f.due_date))), h("div", { key: '3244bb6bdbed2b4e28c479c2d4db2d0ae152f2f0', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '3716a28cec93e70690ad96bfc0c5f3b7b56f8ecb', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '7f326ed6f298c9f1091b160c63e386864329190e', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.underReview) && (h("div", { key: 'd705ae48c1f30b904ac31bbdbab9e955868f51e1', part: text }, h("h1", { key: '712cebef3699a8c2a97bcb69ae68e0b491090c88', class: "h4", part: heading4 }, "This payment is disputed and under review"), h("p", { key: 'ca95b2c8bdc6083a3fbb1dd63c6bdaa4699ae2a7' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_h = this.dispute) === null || _h === void 0 ? void 0 : _h.won) && (h("div", { key: 'c0cb4c8342aa4f022d76e95123a047b7b707f562', part: text }, h("h1", { key: '797966d237d4b46eb1b880deb7fa21746f5b3b1e', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: '2f9eed1a5f34f772206112488af22aa8b35c07b6' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_j = this.dispute) === null || _j === void 0 ? void 0 : _j.lost) && (h("div", { key: '9a90af51218ed921e27519363995f12e29713bfd', part: text }, h("h1", { key: '736ee5cf8f65d780d4812e24ea9050dcc0d109a4', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: '9ca83087b028e1078bcc2cd0b552e8f5379932d1' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
+        return (h("div", { key: '55685c8b421d48fb041862b2ae2ff0605a3a0b7f', class: "dispute-notification-root" }, this.isLoading && (h("div", { key: '93fba7164eea0a00231f2f762a1370fe2ba4ca52', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'db8ca80547c4e022ee9cbb59b51cf1d199a65f0c', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: '15c884a6bbfcab6e89d9eb36cfcdc14a0505c25a', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: '61474f21b3f82c1cff6455c7d87c0474a4c5ebdd', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && this.isDueDatePassed() && (h("div", { key: '724f8896f7985469d457d5dea5936dc8ef0b30c0', part: text }, h("h1", { key: 'd4e86227300211d8ab792e8ae128912166957b02', class: "h4", part: heading4 }, "The due date (", (_b = this.dispute) === null || _b === void 0 ? void 0 :
+            _b.due_date, ") for this dispute has passed"), h("p", { key: '40e2fff6dadd6426d847cbc7164a72bb137ee44d' }, "You can no longer submit evidence to counter this dispute."))), ((_c = this.dispute) === null || _c === void 0 ? void 0 : _c.needsResponse) && !this.isDueDatePassed() && (h("div", { key: '1efebe3baa295271c793faaba07b9d62a7f19e93', part: text }, h("h1", { key: 'a6e10b6d4e8f01aacefb8d3cd5244eecbbb251e6', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: 'fb99d2061fcae2a6b59a1121340bb141f8a2bcb2' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '5e6a34864d24df666ab69291e98dc569946933ad', class: "h5" }, "Dispute details"), h("div", { key: '6a189bf2c84fad8024d60da7c6972917e8768fa9', class: "d-table gap-2" }, h("div", { key: '1d76955da64391406f2cf082d473fac4da8f6be9', class: "d-table-row gap-2" }, h("span", { key: '7dcc2947c8e2ba7e388dde66ec426b9d95e87938', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'b45cdeebd1ee9f0b6e4a023a41e496c28c265c64', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_d = this.dispute) === null || _d === void 0 ? void 0 : _d.amount))), h("div", { key: 'd33fd1331385a3b8bad3f44bb8d0d92c7d9fb3eb', class: "d-table-row gap-2" }, h("span", { key: 'd4a5c2fae926b736c6516522b32965c1f55d7623', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '034868aa10b8179e485f2cc497adcf9caaca123d', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_e = this.dispute) === null || _e === void 0 ? void 0 : _e.reason)), h("div", { key: '8b56d8237d8039f90ec9141cc94e0147bc0e49bd', class: "d-table-row gap-2" }, h("span", { key: 'f301c07b7ceb2f54f642e764a61b359445962d17', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Due Date"), h("span", { key: '3c7478dd78c2cd58b9eee3a3b30b0816ab8011bc', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_f = this.dispute) === null || _f === void 0 ? void 0 : _f.due_date))), h("div", { key: '1c912ca4428f444d4dd4f27584a8a64099524539', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: 'd15adbc5be96fbfe0545e87c57e1fe34449d4c8f', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '0d7b4a74b52210106929114bb8d7db76eeadedd6', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.underReview) && (h("div", { key: '8f1e958c5601d937d71da120e908acdb9b303367', part: text }, h("h1", { key: '67012e992b666b145bff9cf70011a0de88452e1e', class: "h4", part: heading4 }, "This payment is disputed and under review"), h("p", { key: 'fda8d98bffac5daf67574aabc854e58b5a754de0' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_h = this.dispute) === null || _h === void 0 ? void 0 : _h.won) && (h("div", { key: '8c3699f761f941114b4fa91cad166c78def3dc00', part: text }, h("h1", { key: '411280747b719b85240bde3ab052ba4bd43437e3', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: '82edec3d96009d23454f6ac63651b6763b4b22a4' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_j = this.dispute) === null || _j === void 0 ? void 0 : _j.lost) && (h("div", { key: '68416771d44d09201b630d7b25952894ce4a096c', part: text }, h("h1", { key: 'dcaf92df776e75aa78762c07fdbb750f1933311a', class: "h4", part: heading4 }, "This payment was disputed"), h("p", { key: '811fcf0b3a9f38fcf857998a672286e5c5ae0a9a' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
     }
 }, [256, "dispute-notification", {
         "dispute": [16],

package/dist/module/dispute-response2.js

@@ -3,7 +3,7 @@ import { c as checkPkgVersion } from './check-pkg-version.js';
 import { D as DisputeManagementClickActions, b as makeUpdateDisputeResponse, c as makeCreateDisputeEvidence, m as makeSubmitDisputeResponse, a as DisputeService } from './event-types3.js';
 import { J as JustifiAnalytics } from './Analytics.js';
 import { C as ComponentErrorSeverity, c as ComponentErrorCodes } from './Plaid.js';
-import { L as heading4 } from './parts.js';
+import { M as heading4 } from './parts.js';
 import { B as Button } from './button.js';
 import { d as defineCustomElement$f } from './additional-statement2.js';
 import { d as defineCustomElement$e } from './cancellation-policy2.js';
@@ -221,7 +221,7 @@ const DisputeResponse = /*@__PURE__*/ proxyCustomElement(class DisputeResponse e
         return this.currentStep === 0;
     }
     render() {
-        return (h("div", { key: '7f9c8d56cfb86cea73ab2f299b83ff0de28f5c3e', class: "dispute-response-root" }, h("div", { key: 'a805bf54df79453127557bf651c3d776a381241f', class: "row gy-3" }, h("div", { key: '2e6bc9cbe369e0ea5d200bc0934b4cad50f3c76f', class: "col-12" }, h("h1", { key: '9876e9c87c6dfb405e7bad46d64fdb40ad048142', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: '045028232da5331c7041ad222c4e98364674ace3', class: "col-12" }, this.currentStepComponent), h("div", { key: '0455c4856a44340ce25c1c4c8f776abb197f919f', class: "col-12" }, h("div", { key: '5b990cc1d41b3a7152d727c941e9758ed70f75a1', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next")))))));
+        return (h("div", { key: '50c96cb107115c27ff993ed7288a58cd801ef936', class: "dispute-response-root" }, h("div", { key: '0ebe2541c4245c6371d3aa8cdfb58b3f92f2d96e', class: "row gy-3" }, h("div", { key: '78feb00f6f5b8fb96ceacba2e7bcda1342f8a244', class: "col-12" }, h("h1", { key: 'a86ab0cd63ebb945a69982ea05607ae4eadc1cf8', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: 'f9a5e9cad90d03ae773aaeb2e72049b453d05472', class: "col-12" }, this.currentStepComponent), h("div", { key: '838c642fdf957bf0e3fd8d4ef4c4abc79c2d6f61', class: "col-12" }, h("div", { key: '6b8af6fa4face4debee72950e86e3bc9461406da', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next")))))));
     }
     static get watchers() { return {
         "disputeId": ["propChanged"],

package/dist/module/document-upload-list2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { B as card, h as heading2, C as table, D as tableHeadCell, E as tableCell } from './parts.js';
+import { C as card, h as heading2, D as table, E as tableHeadCell, F as tableCell } from './parts.js';
 
 const DocumentUploadList = /*@__PURE__*/ proxyCustomElement(class DocumentUploadList extends HTMLElement {
     constructor(registerHost) {

package/dist/module/duplicate-charge2.js

@@ -42,7 +42,7 @@ const DuplicateCharge = /*@__PURE__*/ proxyCustomElement(class DuplicateCharge e
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'ec4cfa15f2830ec56dfd9184728c1badeb9e1dfd' }, h("div", { key: '0e107461e759478735aecabea93baf060169dd14', class: "row gy-3" }, h("div", { key: '22b9223c3e92d2183d65d9125a3ebefd341c140f', class: "col-12" }, h("h2", { key: 'cf386e687b18a4f232b935a847270d8ad463db32', class: "h5", part: heading5 }, "Duplicate Charge")), h("div", { key: 'dd8cc52b7b6cfe955a09e29c145f70761db87068', class: "col-12" }, h("form-control-text", { key: 'ff024fd4e90adc3a991036eb535258bad98ab199', label: "Original Payment ID", name: "duplicate_charge_original_payment_id", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.duplicate_charge_original_payment_id, inputHandler: this.inputHandler, errorText: this.errors.duplicate_charge_original_payment_id })), h("div", { key: '0df77b3c8d8a8a777c8258cd0ca075df73552ee4', class: "col-12" }, h("form-control-textarea", { key: '27bfe00c3bdab393b35f3ca26360db65f487d789', label: "Duplicate Charge Explanation", name: "duplicate_charge_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.duplicate_charge_explanation, inputHandler: this.inputHandler, errorText: this.errors.duplicate_charge_explanation })), h("div", { key: '8420318e367111cb73c1235c363973d7f34aa25c', class: "col-12" }, h("form-control-file-v2", { key: '71717a0c8d02e2c8198b365f61b1a6727a619e6b', label: "Duplicate Charge Documentation", name: "duplicate_charge_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.duplicate_charge_documentation })))));
+        return (h("div", { key: 'a4be51ca28d0558a06a96429c9f6967de65f7687' }, h("div", { key: 'e240189e3a8d31963667e6779a9497ab8258f983', class: "row gy-3" }, h("div", { key: 'c22af27a5e94810c4daa4105d30b69a9bac3ea84', class: "col-12" }, h("h2", { key: '6b09237bb4a404c03a20f1dd3687b1b2b6c02f72', class: "h5", part: heading5 }, "Duplicate Charge")), h("div", { key: '91cca8f6bfe938aad35d57f1360cea9c8a46b89b', class: "col-12" }, h("form-control-text", { key: '88cd9fad95f55f1302cf8b638eee372279c0b601', label: "Original Payment ID", name: "duplicate_charge_original_payment_id", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.duplicate_charge_original_payment_id, inputHandler: this.inputHandler, errorText: this.errors.duplicate_charge_original_payment_id })), h("div", { key: '930ddf5ae0d1f22e87f40d422cc7cc3cf202cf78', class: "col-12" }, h("form-control-textarea", { key: 'ab6764a1f982f6be6dd0fc94d5f6630b54fca654', label: "Duplicate Charge Explanation", name: "duplicate_charge_explanation", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.duplicate_charge_explanation, inputHandler: this.inputHandler, errorText: this.errors.duplicate_charge_explanation })), h("div", { key: '8ca0a2a0b69d577022bd82d7f04fe8205ee66e7f', class: "col-12" }, h("form-control-file-v2", { key: '9a5e4ac52a949a8a7b4bcabd397f8b38edbff159', label: "Duplicate Charge Documentation", name: "duplicate_charge_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.duplicate_charge_documentation })))));
     }
 }, [256, "duplicate-charge", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/electronic-evidence2.js

@@ -39,7 +39,7 @@ const ElectronicEvidence = /*@__PURE__*/ proxyCustomElement(class ElectronicEvid
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'cf4615613589be984c7d5b6b50f0b5239895d81d' }, h("div", { key: '1f96c50146d009cc4d0d0ccbee41c31144e7f746', class: "row gy-3" }, h("div", { key: '3a671ff5c959efaee8dc57dda073de113489f0a6', class: "col-12" }, h("h2", { key: '3b73879b357d3465c6c76b27db17b6dbdce7c538', class: "h5", part: heading5 }, "Electronic Evidence")), h("div", { key: '35c0ff43bc1dcdba8916b51da636347395c98901', class: "col-12" }, h("form-control-text", { key: 'cdabf70034babf41ba227f66936f8b340f104ca3', label: "Purchase IP Address", name: "customer_purchase_ip_address", helpText: "The IP address used by the customer during the purchase.", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_purchase_ip_address, inputHandler: this.inputHandler, errorText: this.errors.customer_purchase_ip_address })), h("div", { key: 'd9920bf1548e14c6adadbc63dc41a1a90cc1a3cc', class: "col-12" }, h("form-control-file-v2", { key: '8eec5b79872eeeda77702d9f4cc9003a627e6682', label: "Activity Logs", name: "activity_log", helpText: "Any server or activity logs that provide evidence of the customer's access to or download of the purchased digital product. This information should encompass IP addresses, relevant timestamps, and any detailed records of activity.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.activity_log })))));
+        return (h("div", { key: 'edbcd0fd94da7a6fb25403bca804133cd20be070' }, h("div", { key: '82263da6e6a92b478366025bf648fce4f3f91db6', class: "row gy-3" }, h("div", { key: 'f6435773410b5561ead0e4a20637a57b785b8c50', class: "col-12" }, h("h2", { key: 'c911fb7238d292f9d11627e13729cf613192cb13', class: "h5", part: heading5 }, "Electronic Evidence")), h("div", { key: 'ae43f664aa254449df9cf2c6e851e2e9c532c90e', class: "col-12" }, h("form-control-text", { key: 'a7781046a1ef45514831affa9c650b7849100817', label: "Purchase IP Address", name: "customer_purchase_ip_address", helpText: "The IP address used by the customer during the purchase.", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.customer_purchase_ip_address, inputHandler: this.inputHandler, errorText: this.errors.customer_purchase_ip_address })), h("div", { key: '47ba5795dde01a4d62fbdeae9e5b7b29cd538cc5', class: "col-12" }, h("form-control-file-v2", { key: 'a44528a479ec5fa2d60e357aa577b1a44f81a074', label: "Activity Logs", name: "activity_log", helpText: "Any server or activity logs that provide evidence of the customer's access to or download of the purchased digital product. This information should encompass IP addresses, relevant timestamps, and any detailed records of activity.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.activity_log })))));
     }
 }, [256, "electronic-evidence", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/form-alert2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { M as alertDanger } from './parts.js';
+import { y as alertDanger } from './parts.js';
 
 const FormAlert = /*@__PURE__*/ proxyCustomElement(class FormAlert extends HTMLElement {
     constructor(registerHost) {

package/dist/module/form-control-checkbox2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { G as inputCheckboxInvalid, H as inputCheckboxCheckedFocused, I as inputCheckboxFocused, J as inputCheckboxChecked, K as inputCheckbox, l as label } from './parts.js';
+import { H as inputCheckboxInvalid, I as inputCheckboxCheckedFocused, J as inputCheckboxFocused, K as inputCheckboxChecked, L as inputCheckbox, l as label } from './parts.js';
 import { F as FormControlHelpText } from './form-control-help-text2.js';
 import { F as FormControlErrorText } from './form-control-error-text.js';
 import './justifi-details2.js';
@@ -45,10 +45,10 @@ const FormControlCheckbox = /*@__PURE__*/ proxyCustomElement(class FormControlCh
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: 'dc2fdbd7fd92a0205b15e4b302458d8f0d775b35' }, h("div", { key: 'f32f7d5cb559282cece071f3623bdab80998bc04', class: 'form-group d-flex flex-column' }, h("div", { key: '5481439484b97ad733a0051f1722a5c3ed45778d', class: "form-check" }, h("input", { key: '9e96a563e5b0b1a9589dff7eb4f3eb3038d4918b', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'c125c58c5883ba06b2a671551340b0ee316308af' }, h("div", { key: 'fd4b904ef4f20c357ef3aa9ce8b69b452f62bc0e', class: 'form-group d-flex flex-column' }, h("div", { key: 'b787782fcd23cbb044df6ea95a441fd71045815a', class: "form-check" }, h("input", { key: '72e4b3bed060f8b93fa53b254f6d492082270e62', ref: el => (this.checkboxElement = el), type: "checkbox", 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-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: '11a27a415d7741d8a29dde8d1fd029c2e143f235', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '3e0ef15182200a48d3cf3142c3511a0ad8095db3', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'e85175ea76f6073d7ee813a3f2d8eaecc044601a', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: '8a17ab6e5144bb06486c1e74035576b5ce473621', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'd0be5c8bf0cd51bf2251a5d780538d2e053163cb', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'ebffb11e0e2fa1dd2846d389604856fc04943b55', errorText: this.errorText, name: this.name }))));
     }
 }, [256, "form-control-checkbox", {
         "label": [1],

package/dist/module/form-control-select2.js

@@ -47,10 +47,10 @@ const FormControlSelect = /*@__PURE__*/ proxyCustomElement(class FormControlSele
     }
     render() {
         var _a;
-        return (h(Host, { key: 'bf6556107b1f272aa6bc4f89cb0f2a889f8b9d1d' }, h("div", { key: 'be1644d78987676c9af452831e25c3effc31a67c', class: "form-group d-flex flex-column" }, h("div", { key: '62eaea4bdbee959d6e785c00c4f41f642c0a16af', class: "d-flex align-items-start gap-2" }, h("label", { key: '641ada798c78ca0c649ec76029c157069636838b', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3a04fe21799a54e402e8afead34b60898c804af4', helpText: this.helpText })), h("select", { key: '54188864be36aed540647275cd84eae738eb633f', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '181f9882efa122d1158475b03c5d91b6a596a029' }, h("div", { key: 'ab62345c08da6d3d33fa110937c936758e065eb3', class: "form-group d-flex flex-column" }, h("div", { key: 'a4cd1468d4c57b63ee25f25cca6f42ea08b70ef4', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ebb6e16b2e11a3623c3152eb8e1b51412fa4d1ae', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '5d5d414a90927659661b6a2e167056c938e9c5a7', helpText: this.helpText })), h("select", { key: '8105c889f7fdb9376848c6057ccd58b9c62841a4', 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 => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: '387753bf79494f44a91858175af74d48a9e9c051', 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 => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: '061a26387560f0b8085e83e1c373a43340146469', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]

package/dist/module/header-3.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core/internal/client';
-import { y as heading3 } from './parts.js';
+import { z as heading3 } from './parts.js';
 
 const Header3 = (props) => {
     return h("h3", { class: `header-3 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading3 }, props.text);

package/dist/module/iframe-input2.js

@@ -1583,6 +1583,9 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
             componentVersion: webcomponentsPackageJson.version,
         });
     }
+    async reload() {
+        this.iframeElement.src = this.iframeSrc;
+    }
     initializeFrameCommunicationService() {
         var _a;
         this.frameService = new FrameCommunicationService(this.iframeElement, this.iframeOrigin);
@@ -1618,11 +1621,14 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
         const params = new URLSearchParams(encodedObject).toString();
         return params;
     }
+    get iframeSrc() {
+        return `${this.iframeOrigin}?${this.urlParams}`;
+    }
     render() {
-        return (h(Host, { key: '60e76f1a33ddd4ea5b89cd31a1b6906ff53c5ddb', class: "form-group d-flex flex-column" }, h("div", { key: '5fdef33ae8deb616929478d06fddc01b97233f0a', style: {
+        return (h(Host, { key: 'ec85f26f88845957744034690b1ab0342009485c', class: "form-group d-flex flex-column" }, h("div", { key: 'e4b29dedfa037218b984bbcd00d3aed3bf6987bd', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: 'e37adecf5024d4c77561d3ca269f49c398fc8fd7', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '206a703cd84d713155aa754576410f495b4329fe', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '214ecd5b4fa9d075b91ea73b9edd09fdfa0cdf12', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '9e9539cc47e48b835dac8a0510899e6a2a25b46b', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '45b0ef6167e59c542b7e72e9dbdb76c9d29bcfb1', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: 'f52a24114c2e6de9cb110b20db28782125f3db9f', id: this.inputId, name: this.inputId, src: this.iframeSrc, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -1632,7 +1638,7 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: 'bec41e86a063eacb8f1f741b446c64db540d9e4d', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '6cec57e9a2d5ef4901302087e270255248cde0f1', errorText: this.errorText, name: this.inputId }))));
     }
     get el() { return this; }
 }, [256, "iframe-input", {
@@ -1643,7 +1649,8 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
         "isValid": [32],
         "errorText": [32],
         "validate": [64],
-        "tokenize": [64]
+        "tokenize": [64],
+        "reload": [64]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/module/index3.js

@@ -1,14 +1,17 @@
 import * as StencilCore from '@stencil/core/internal/client';
 
-const appendToMap = (map, propName, value) => {
+const appendToMap = (map, refsByValue, propName, value) => {
+    let ref = refsByValue.get(value);
+    if (!ref) {
+        ref = new WeakRef(value);
+        refsByValue.set(value, ref);
+    }
     let refs = map.get(propName);
     if (!refs) {
-        refs = [];
+        refs = new Set();
         map.set(propName, refs);
     }
-    if (!refs.some((ref) => ref.deref() === value)) {
-        refs.push(new WeakRef(value));
-    }
+    refs.add(ref);
 };
 const debounce = (fn, ms) => {
     let timeoutId;
@@ -34,13 +37,15 @@ const debounce = (fn, ms) => {
  */
 const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
 const cleanupElements = debounce((map) => {
-    for (let key of map.keys()) {
-        const refs = map.get(key).filter((ref) => {
+    map.forEach((refs, key) => {
+        const nextRefs = new Set();
+        refs.forEach((ref) => {
             const elm = ref.deref();
-            return elm && isConnected(elm);
+            if (elm && isConnected(elm))
+                nextRefs.add(ref);
         });
-        map.set(key, refs);
-    }
+        map.set(key, nextRefs);
+    });
 }, 2_000);
 const core = StencilCore;
 const forceUpdate = core.forceUpdate;
@@ -53,23 +58,24 @@ const stencilSubscription = () => {
     }
     const ensureForceUpdate = forceUpdate;
     const ensureGetRenderingRef = getRenderingRef;
+    const refsByElement = new WeakMap();
     const elmsToUpdate = new Map();
     return {
         dispose: () => elmsToUpdate.clear(),
         get: (propName) => {
             const elm = ensureGetRenderingRef();
             if (elm) {
-                appendToMap(elmsToUpdate, propName, elm);
+                appendToMap(elmsToUpdate, refsByElement, propName, elm);
             }
         },
         set: (propName) => {
             const refs = elmsToUpdate.get(propName);
             if (refs) {
-                const nextRefs = refs.filter((ref) => {
+                const nextRefs = new Set();
+                refs.forEach((ref) => {
                     const elm = ref.deref();
-                    if (!elm)
-                        return false;
-                    return ensureForceUpdate(elm);
+                    if (elm && ensureForceUpdate(elm))
+                        nextRefs.add(ref);
                 });
                 elmsToUpdate.set(propName, nextRefs);
             }

package/dist/module/justifi-apple-pay2.js

@@ -539,7 +539,7 @@ const JustifiApplePay = /*@__PURE__*/ proxyCustomElement(class JustifiApplePay e
                 this.error = null;
                 this.applePayStarted.emit();
                 const paymentRequest = {
-                    countryCode: this.countryCodeForCurrency(checkoutStore.paymentCurrency),
+                    countryCode: this.countryCode,
                     currencyCode: checkoutStore.paymentCurrency,
                     merchantCapabilities: [
                         ApplePayMerchantCapability.SUPPORTS_3DS,
@@ -603,12 +603,6 @@ const JustifiApplePay = /*@__PURE__*/ proxyCustomElement(class JustifiApplePay e
             });
         }
     }
-    countryCodeForCurrency(currency) {
-        if (currency.toLowerCase() == "cad") {
-            return "CA";
-        }
-        return "US";
-    }
     loadApplePaySDK() {
         if (this.sdkLoaded)
             return;

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

@@ -6,7 +6,8 @@ import { S as StyledHost } from './styled-host.js';
 import './justifi-details2.js';
 import './event-types.js';
 import './justifi-radio-list-item2.js';
-import { d as defineCustomElement$4 } from './bank-account-form2.js';
+import { d as defineCustomElement$5 } from './bank-account-form2.js';
+import { d as defineCustomElement$4 } from './form-alert2.js';
 import { d as defineCustomElement$3 } from './hidden-input2.js';
 import { d as defineCustomElement$2 } from './iframe-input2.js';
 
@@ -54,7 +55,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-bank-account-form", "bank-account-form", "hidden-input", "iframe-input"];
+    const components = ["justifi-bank-account-form", "bank-account-form", "form-alert", "hidden-input", "iframe-input"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-bank-account-form":
             if (!customElements.get(tagName)) {
@@ -62,6 +63,11 @@ function defineCustomElement$1() {
             }
             break;
         case "bank-account-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-alert":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/module/justifi-card-form.js

@@ -6,7 +6,8 @@ import { S as StyledHost } from './styled-host.js';
 import './justifi-details2.js';
 import './event-types.js';
 import './justifi-radio-list-item2.js';
-import { d as defineCustomElement$4 } from './card-form2.js';
+import { d as defineCustomElement$5 } from './card-form2.js';
+import { d as defineCustomElement$4 } from './form-alert2.js';
 import { d as defineCustomElement$3 } from './hidden-input2.js';
 import { d as defineCustomElement$2 } from './iframe-input2.js';
 
@@ -44,7 +45,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-card-form", "card-form", "hidden-input", "iframe-input"];
+    const components = ["justifi-card-form", "card-form", "form-alert", "hidden-input", "iframe-input"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-card-form":
             if (!customElements.get(tagName)) {
@@ -52,6 +53,11 @@ function defineCustomElement$1() {
             }
             break;
         case "card-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-alert":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }