@justifi/webcomponents 4.20.0 → 4.21.0

package/dist/module/form-control-number-masked2.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { I as IMask } from './index2.js';
+import { d as defineCustomElement$3 } from './custom-popper2.js';
 import { d as defineCustomElement$2 } from './form-control-error-text2.js';
-import { d as defineCustomElement$1 } from './form-control-help-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const NumberInputMasked = /*@__PURE__*/ proxyCustomElement(class NumberInputMasked extends HTMLElement {
     constructor() {
@@ -59,7 +60,7 @@ const NumberInputMasked = /*@__PURE__*/ proxyCustomElement(class NumberInputMask
         }
     }
     render() {
-        return (h(Host, { key: 'e0a59308376055c019233f3d4649c9a37af963d2', exportparts: "label,input,input-invalid" }, h("div", { key: '52d9440421342fed6a4f97b57586a43d517ded7d', class: "form-group d-flex flex-column" }, h("label", { key: '8302a9fa1111d3b72600304cd0b1fb2c6239d895', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '86653c7b7f4efb9609bae2ecf69bd5e396bd342b', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '71d4d44ff91d06229ccc22e70bc92e0a2050da90', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'b7d42462ae9165acbde68cf59da07eb956a91fd6', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'ec5637a437fc6925f12ed0ff9653de16cebec6c8', exportparts: "label,input,input-invalid" }, h("div", { key: 'fa43aed393941aaa2c9aadf550e2528aca661c90', class: "form-group d-flex flex-column" }, h("div", { key: 'f97bc1662798dd0ac7a01050771f7e2d8b94d3c8', class: "d-flex align-items-start gap-2" }, h("label", { key: '75b17b73150c1c1ef3ca0489aa1dac45b86583b8', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'd1c35542ebf2c49de0abb0488dff23aad8238eaf', helpText: this.helpText })), h("input", { key: '3573366640ca5525b12cf086c92c000a25bfaf8b', ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-error-text", { key: 'db11bee11d3f1f33ac03e8ed0f8687f0b9fff9cf', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
@@ -80,19 +81,24 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-number-masked", "form-control-error-text", "form-control-help-text"];
+    const components = ["form-control-number-masked", "custom-popper", "form-control-error-text", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, NumberInputMasked);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

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

@@ -35,7 +35,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: 'dd43d75b327c05e75b453b954346c6ffcd85a2f5', exportparts: 'label,input,input-invalid' }, h("div", { key: '5215f62251bd89be493ddffe46bf0c466b42e314', class: 'form-group d-flex flex-column' }, h("label", { key: 'f0409970f8d43bcdef92b81363cc24aa1bb691a0', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '9c6a5899e64ba1a8af6af80c63b6a0895351da63', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h("form-control-help-text", { key: 'cd7b4a724427383cafc04137f6feca473695b020', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '04748d3c5b1067b0312a2b7c36369e2a21a7215f', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '5f7a94160460fd8a92d740899a7418c98b3178d0', exportparts: 'label,input,input-invalid' }, h("div", { key: 'c8386c9c72a721d53d33d3894615f7d8f127b1bf', class: 'form-group d-flex flex-column' }, h("label", { key: '754f8714d1d0e42c977dace41e79d0e7b21c7e39', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '4289872c0983d50ff89851aac2309b911e6348df', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h("form-control-help-text", { key: '0de80b8d728865b8978a7daaf54315dbf422dced', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'b0cd9a78aa4c44dc7103c5d6ceced7258b197f16', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './custom-popper2.js';
 import { d as defineCustomElement$2 } from './form-control-error-text2.js';
-import { d as defineCustomElement$1 } from './form-control-help-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const SelectInput = /*@__PURE__*/ proxyCustomElement(class SelectInput extends HTMLElement {
     constructor() {
@@ -34,7 +35,7 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class SelectInput extends H
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e62a08c8ba656cc7e82c0f8f7facccc086fbafe7', exportparts: "label,input,input-invalid" }, h("div", { key: 'f9a4c428311f32f2585ca9259ba31909187b809d', class: "form-group d-flex flex-column" }, h("label", { key: '006a3bd7ae2874bf3fa24e2c053808e51b652d9a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: 'f0ac14e8b74c939b4928b9ce800118f660c90613', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, 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("form-control-help-text", { key: '3a60ff2a2af7668013baf2767d97095379b2d37e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '8c4049d16408f305b8bf1e8a49c91db56991a840', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'f76dcf05e5929448b9a89b1d4b6f18a6f7cae3e5', exportparts: "label,input,input-invalid" }, h("div", { key: '675bc78c7197ce8ded2cbdfb31b77fde5e12d9e5', class: "form-group d-flex flex-column" }, h("div", { key: 'a3f538fb4b3aba7e87071e1838c4d668cb217851', class: "d-flex align-items-start gap-2" }, h("label", { key: '389d9573b53b4ea51492455dc88222714df33387', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e0853d21ebd9e264e87b4707708bfbef3f50a4bb', helpText: this.helpText })), h("select", { key: '50d9af6ee9266eeb514a7b1512fb73b480f5e163', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, 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("form-control-error-text", { key: 'e199881b4ffd032059ea548202ce9fee94b9187a', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]
@@ -55,19 +56,24 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-select", "form-control-error-text", "form-control-help-text"];
+    const components = ["form-control-select", "custom-popper", "form-control-error-text", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-select":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SelectInput);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './custom-popper2.js';
 import { d as defineCustomElement$2 } from './form-control-error-text2.js';
-import { d as defineCustomElement$1 } from './form-control-help-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLElement {
     constructor() {
@@ -37,7 +38,7 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: 'fddfb4134747c8d8caf6594f5450e57fa4c2dc3e', exportparts: "label,input,input-invalid" }, h("div", { key: 'bbd0174fb56d911992907e0a2c453b9d1412b636', class: "form-group d-flex flex-column" }, h("label", { key: 'f5d9d3d6c4694d08d86963df37adbd1b334593b3', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'ae49e4c86782fd0901c1a0e8530981cf1b0b7c65', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '1e1bbc8d39e5caeca559515f72eb17ca9b3ab0b1', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '44c121cb0eb69840440e696e784c7a73689a42f2', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '242da84a35d52f4d44bcaaa1ec016487ffb5936e', exportparts: "label,input,input-invalid" }, h("div", { key: 'a581089ec206ac71f586c837f53aec54e394776a', class: "form-group d-flex flex-column" }, h("div", { key: '88e11b4a8d79e72f63f80415b5dad74d8a47fa5b', class: "d-flex align-items-start gap-2" }, h("label", { key: 'd37f5e37ab6e46c43196638301e46410d70f753c', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '2702eabd98b632487a418facb33855bdb19b5167', helpText: this.helpText })), h("input", { key: 'e70affeeed2f0d0975a827e9d691a05c7732854f', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? " input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h("form-control-error-text", { key: 'f1ba545bec21198a4e78e4989bf5703f17052642', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -60,19 +61,24 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["form-control-text", "form-control-error-text", "form-control-help-text"];
+    const components = ["form-control-text", "custom-popper", "form-control-error-text", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "form-control-text":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TextInput);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/form-control-tooltip.d.ts

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

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

@@ -0,0 +1,6 @@
+import { T as TooltipComponent, d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const FormControlTooltip = TooltipComponent;
+const defineCustomElement = defineCustomElement$1;
+
+export { FormControlTooltip, defineCustomElement };

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

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './custom-popper2.js';
+
+const TooltipComponent = /*@__PURE__*/ proxyCustomElement(class TooltipComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.anchorIcon = undefined;
+        this.tooltip = undefined;
+        this.helpText = undefined;
+    }
+    show() {
+        this.tooltip.classList.add('show');
+    }
+    hide() {
+        this.tooltip.classList.remove('show');
+    }
+    render() {
+        if (!this.helpText) {
+            return null;
+        }
+        return (h("div", { class: "tooltip-container" }, 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: "tooltip-icon" }, 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" }), 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" })), h("custom-popper", { trigger: "hover", placement: "top", anchorRef: this.anchorIcon }, h("div", { class: "tooltip bs-tooltip-top", part: "tooltip", role: "tooltip", ref: (el) => (this.tooltip = el) }, h("div", { class: "tooltip-inner", part: "tooltip-inner" }, this.helpText)))));
+    }
+}, [0, "form-control-tooltip", {
+        "helpText": [1, "help-text"],
+        "anchorIcon": [32],
+        "tooltip": [32]
+    }, [[0, "showEvent", "show"], [0, "hideEvent", "hide"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["form-control-tooltip", "custom-popper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TooltipComponent);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { TooltipComponent as T, defineCustomElement as d };

package/dist/module/gross-payment-chart-core2.js

@@ -11042,7 +11042,7 @@ const GrossPaymentChartCore = /*@__PURE__*/ proxyCustomElement(class GrossPaymen
         }
     }
     render() {
-        return (h(Host, { key: '463d7e132e647e1da6dc5ad5ea54abf95a60e715' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: 'aee0faee30a5c998410cdb28d52107ce2c0cb672' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get watchers() { return {
         "getGrossPayment": ["propChanged"],

package/dist/module/identity-address-form.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { S as StateOptions } from './state-options.js';
 import { n as numberOnlyHandler } from './utils4.js';
+import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-error-text2.js';
-import { d as defineCustomElement$3 } from './form-control-help-text2.js';
-import { d as defineCustomElement$2 } from './form-control-select2.js';
-import { d as defineCustomElement$1 } from './form-control-text2.js';
+import { d as defineCustomElement$3 } from './form-control-select2.js';
+import { d as defineCustomElement$2 } from './form-control-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
 
 const IdentityAddressForm = /*@__PURE__*/ proxyCustomElement(class IdentityAddressForm extends HTMLElement {
     constructor() {
@@ -24,7 +25,7 @@ const IdentityAddressForm = /*@__PURE__*/ proxyCustomElement(class IdentityAddre
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (h(Host, { key: 'd090676d3bb1d9de9ae947ff25d94b5985ace914', exportparts: "label,input,input-invalid" }, h("div", { key: '64ddec6db508d27b709ad551f60fe58494631fe3', class: "row gy-3" }, h("div", { key: '7e0f89b7b8d5a466b89efad75498c5d1f2cac8ea', class: "col-12 col-md-8" }, h("form-control-text", { key: 'ea6055fb3457e28666b11b72173ad70b83a87659', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler })), h("div", { key: '5f6f456c573fb9318e58976decb67274b209fa23', class: "col-12 col-md-4" }, h("form-control-text", { key: '86fffd4641953d0445a7c24d332cda513121b65e', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: 'e06339cefebe37ae0629631fbc5101c9dbc040a6', class: "col-12" }, h("form-control-text", { key: 'd2af696b33092247b6741c8034aaf12ab51aa878', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: 'b655a66fb68f059fa91ae5f9f60fdebe0ae04fad', class: "col-12 col-md-6" }, h("form-control-select", { key: '50a65861a5a39daac199571c5a0273340556e476', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: '30255517e0fa1ede35d7b2525625ebc389c44525', class: "col-12 col-md-6" }, h("form-control-text", { key: 'b7b0a773c7b2dbe05c4bf8e9fc7235a01bf36832', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '804e9aa1ca7b4ae167ae64969107ad6352559ed7', class: "col-12" }, h("form-control-select", { key: '1aa3734e10502bc8f1732f386b60135b8a7d94a6', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
+        return (h(Host, { key: 'd090676d3bb1d9de9ae947ff25d94b5985ace914', exportparts: "label,input,input-invalid" }, h("div", { key: '64ddec6db508d27b709ad551f60fe58494631fe3', class: "row gy-3" }, h("div", { key: '7e0f89b7b8d5a466b89efad75498c5d1f2cac8ea', class: "col-12 col-md-8" }, h("form-control-text", { key: '0fdbbf48001fe60c5bf5e7a07d7b43186ca2f0eb', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler, helpText: "\u200B\u200BEnter your address exactly as stated on your driver's license. No PO Boxes." })), h("div", { key: '2b17a0fcd80dbea0703ac0291d5e509b0c14d9c8', class: "col-12 col-md-4" }, h("form-control-text", { key: 'ae29fceaf3af789789c86f545dab6a9d0e4c8429', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: '55ccf8053ec8e3c1f4534c47d8d23eeac3383d13', class: "col-12" }, h("form-control-text", { key: '3a3ca85cbf0514da6828e3f5a0bf0fd4b9e983c8', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: 'daf6e6031b8dfab6a3e0170f96cc2f0649ded7ce', class: "col-12 col-md-6" }, h("form-control-select", { key: '08791966d72817826f23c3d55ffe3cbaad0ac3bd', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: 'c97882ae4c598f762ec32e9ff54b819077ba7193', class: "col-12 col-md-6" }, h("form-control-text", { key: '562ffc8ad8de252d009a284b7b61f978084034dd', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '6fda38b6ab0618bd9c47ae51417f3b7e10148f53', class: "col-12" }, h("form-control-select", { key: 'df9ec4209e2c82ba05af0160cb74849c20110bae', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
             // just for now so we skip handling country specificities
             disabled: true })))));
     }
@@ -43,29 +44,34 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-identity-address-form", "form-control-error-text", "form-control-help-text", "form-control-select", "form-control-text"];
+    const components = ["justifi-identity-address-form", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-identity-address-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, IdentityAddressForm);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

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

@@ -9,19 +9,21 @@ import './Pagination.js';
 import './Payment.js';
 import './Payout.js';
 import { c as config } from './config.js';
-import { a as BusinessFormServerErrors, b as BusinessFormClickActions } from './business-form-types.js';
+import { b as BusinessFormServerErrors, c as BusinessFormClickActions } from './business-form-types.js';
 import { a as Business } from './Business.js';
 import { J as JustifiAnalytics } from './Analytics.js';
 import { S as StyledHost } from './styled-host.js';
 import { c as checkPkgVersion } from './check-pkg-version.js';
-import { d as defineCustomElement$e } from './form-alert2.js';
-import { d as defineCustomElement$d } from './form-control-date2.js';
-import { d as defineCustomElement$c } from './form-control-error-text2.js';
-import { d as defineCustomElement$b } from './form-control-help-text2.js';
-import { d as defineCustomElement$a } from './form-control-monetary2.js';
-import { d as defineCustomElement$9 } from './form-control-number-masked2.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$g } from './custom-popper2.js';
+import { d as defineCustomElement$f } from './form-alert2.js';
+import { d as defineCustomElement$e } from './form-control-date2.js';
+import { d as defineCustomElement$d } from './form-control-error-text2.js';
+import { d as defineCustomElement$c } from './form-control-help-text2.js';
+import { d as defineCustomElement$b } from './form-control-monetary2.js';
+import { d as defineCustomElement$a } from './form-control-number-masked2.js';
+import { d as defineCustomElement$9 } from './form-control-select2.js';
+import { d as defineCustomElement$8 } from './form-control-text2.js';
+import { d as defineCustomElement$7 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$6 } from './additional-questions.js';
 import { d as defineCustomElement$5 } from './business-core-info.js';
 import { d as defineCustomElement$4 } from './business-representative.js';
@@ -140,49 +142,59 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-form", "form-alert", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-additional-questions", "justifi-business-core-info", "justifi-business-representative", "justifi-identity-address-form", "justifi-legal-address-form"];
+    const components = ["justifi-business-form", "custom-popper", "form-alert", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions", "justifi-business-core-info", "justifi-business-representative", "justifi-identity-address-form", "justifi-legal-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, BusinessForm);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
         case "form-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "form-control-monetary":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

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

@@ -65,7 +65,7 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLEle
         return this.childRef.resize();
     }
     render() {
-        return (h("justifi-payment-method-form", { key: '58843b8a47f35d716845de11f6a66d8960bc0776', ref: el => {
+        return (h("justifi-payment-method-form", { key: 'e31d3c703e1a0c3778ddeb88d118ea3ef88d0adf', ref: el => {
                 if (el) {
                     this.childRef = el;
                 }

package/dist/module/justifi-checkout.js

@@ -8,10 +8,11 @@ import './Payout.js';
 import { c as config } from './config.js';
 import { J as JustifiAnalytics } from './Analytics.js';
 import { c as checkPkgVersion } from './check-pkg-version.js';
+import { d as defineCustomElement$e } from './custom-popper2.js';
 import { d as defineCustomElement$d } from './form-control-error-text2.js';
-import { d as defineCustomElement$c } from './form-control-help-text2.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$c } from './form-control-select2.js';
+import { d as defineCustomElement$b } from './form-control-text2.js';
+import { d as defineCustomElement$a } from './form-control-tooltip2.js';
 import { d as defineCustomElement$9 } from './billing-form.js';
 import { d as defineCustomElement$8 } from './checkout-core.js';
 import { d as defineCustomElement$7 } from './new-payment-method.js';
@@ -145,11 +146,11 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         this.checkoutCoreRef.fillBillingForm(fields);
     }
     render() {
-        return (h("justifi-checkout-core", { key: 'ea50f0df79dae86294ccfdf2ec523f0fb81433e4', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
+        return (h("justifi-checkout-core", { key: '24400b7f50a91d2c24e372a030fde6b0a1af9e66', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, ref: el => {
                 if (el) {
                     this.checkoutCoreRef = el;
                 }
-            } }, h("div", { key: '301247cf7c916ba1c6c5464e3c2f0226d0f6f041', slot: "insurance" }, h("slot", { key: 'a75ff85e5a6d954e7c0d3c24abac518a2765f889', name: "insurance" }))));
+            } }, h("div", { key: '0f530bd18cab94b2ab3707b22908198878d34a4a', slot: "insurance" }, h("slot", { key: '94d10781b8df51ab34df5e414e304537682d8c2c', name: "insurance" }))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -175,29 +176,34 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-checkout", "form-control-error-text", "form-control-help-text", "form-control-select", "form-control-text", "justifi-billing-form", "justifi-checkout-core", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
+    const components = ["justifi-checkout", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-billing-form", "justifi-checkout-core", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-payment-method-options", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-checkout":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Checkout);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }

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

@@ -10,10 +10,11 @@ import { J as JustifiAnalytics } from './Analytics.js';
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
 import { c as checkPkgVersion } from './check-pkg-version.js';
+import { d as defineCustomElement$9 } from './custom-popper2.js';
 import { d as defineCustomElement$8 } from './form-control-error-text2.js';
-import { d as defineCustomElement$7 } from './form-control-help-text2.js';
-import { d as defineCustomElement$6 } from './form-control-select2.js';
-import { d as defineCustomElement$5 } from './form-control-text2.js';
+import { d as defineCustomElement$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 './billing-form.js';
 import { d as defineCustomElement$3 } from './payment-method-form.js';
 import { d as defineCustomElement$2 } from './payment-method-selector.js';
@@ -127,15 +128,15 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
         }
     }
     render() {
-        return (h(StyledHost, { key: 'f7d035a9ed8b16016493aa07a85a6b4d6d83b5f5' }, h("form", { key: 'fb9354b439332ef4ee67e915f27b60b9b744e6e2', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '303fbccf9beb30c1d822f0ac148128dfba9d158f', class: "col-12" }, h("justifi-payment-method-selector", { key: 'f71353d3f90ab50461a57ce3738ea853ca4d1cc3', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: 'd9024a406dcde487ff2bb7d34385da0a1be8aef5', class: "col-12" }, h("justifi-payment-method-form", { key: '010488c96f1b6b5af049b89151cea9ce61f263bb', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
+        return (h(StyledHost, { key: '3b0fcfc9adfb9ada04dc4a0bb8c9f826bf3123ff' }, h("form", { key: '6aabed0f73249035573f7219f4968188de54cfc1', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '3095e15537a5aeb21818e9e357ce9261aa440a58', class: "col-12" }, h("justifi-payment-method-selector", { key: '2103a057989d408a808cd52d47c81a8432346a11', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: '987ba032ed6e9e801a00a94458aa6d8ab8da19fa', class: "col-12" }, h("justifi-payment-method-form", { key: '74159cfbc52d2b1c0c9ab92c13ce137077703f43', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
                 if (el) {
                     this.paymentMethodFormRef = el;
                 }
-            } })), h("div", { key: 'c8b41e9d6bc0d21db4bc1efa12852480ed4a0bbd', class: "col-12" }, h("justifi-billing-form", { key: '2226122296e6b9da8359b90fe563b6c4342c72f3', legend: "Billing Info", ref: el => {
+            } })), h("div", { key: '41b6830678da64fed9a076d828d03d1caabfe58d', class: "col-12" }, h("justifi-billing-form", { key: '60aaa8e895cdbb45b5f631390b8da7dce271d817', legend: "Billing Info", ref: el => {
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { key: '5aa12164db0d1ac4570db49b7a1bc527d974a8ab', name: 'insurance' }), h("div", { key: '5b0ad786dcf96a4c83696b1e3d1cd09345313807', class: "col-12" }, h(Button, { key: 'b3a55eaf9403d33a0e0769ca2c6c42b086f4da9a', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
+            } })), h("slot", { key: 'd91413a542cf6be2797cd0c4ca67b8dc83431fed', name: 'insurance' }), h("div", { key: 'd4d7a3f318e19af84f7519c351ef590e31bd2ba5', class: "col-12" }, h(Button, { key: 'cbe0d83b648697514759c47d76fd9dcfada21371', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
     }
     static get style() { return JustifiPaymentFormStyle0; }
 }, [1, "justifi-payment-form", {
@@ -157,29 +158,34 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-form", "form-control-error-text", "form-control-help-text", "form-control-select", "form-control-text", "justifi-billing-form", "justifi-payment-method-form", "justifi-payment-method-selector"];
+    const components = ["justifi-payment-form", "custom-popper", "form-control-error-text", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-billing-form", "justifi-payment-method-form", "justifi-payment-method-selector"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PaymentForm);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "form-control-select":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "form-control-text":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }