@justifi/webcomponents 5.7.2 → 5.7.3-rc-01

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

@@ -51,10 +51,10 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         return part;
     }
     render() {
-        return (h(Host, { key: '5360f4917c4af8d4e40522a25e838703d8374480' }, h("div", { key: '56a3a99c81ebbf00d1ff5befa1a96363660806ae', class: "form-group d-flex flex-column" }, h("div", { key: '5556531a79f39fecd1cc4027568bc3642f68ed68', class: "d-flex gap-2" }, h("label", { key: 'b722b7e91adaf94c57698cf5743d43d8cbb04957', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '109aabf5047eebe8254ed49379b297af05f68ac2', helpText: this.helpText })), h("input", { key: 'eb9862be33313981dccda15889d315893344ff41', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '8b7c599df49cd5f6cd113a6dee5b85309488b581' }, h("div", { key: '17acab0e5128fc00e15e2f3cc1714de968f8f635', class: "form-group d-flex flex-column" }, h("div", { key: '7ffaab5a1c8d6a8d2ae06937ae06bddfdd3e4d42', class: "d-flex gap-2" }, h("label", { key: 'd4ca9a70d58d6d34fe9a2f104f1e022025b52bf3', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c352a7b657e47f39d40a1a7b058b0b7a5b55e8e4', helpText: this.helpText })), h("input", { key: 'c1e0946e86137b27a17d690d475058b6c687b652', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = 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-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '01217373b82eee84fae370f504cfee157c6f83ec', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '2324adaf7553fbcb65eaf1a0dbc7eed0c1d7208c', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]

package/dist/module/form-control-file-v22.js

@@ -11,7 +11,7 @@ const FileInput = /*@__PURE__*/ proxyCustomElement(class FileInput extends HTMLE
         this.formControlBlur = createEvent(this, "formControlBlur", 7);
     }
     render() {
-        return (h(Host, { key: 'a047767dfcdd22535de0f797e05ba1124f5476c1', exportparts: "label,input,input-invalid" }, h("div", { key: '2b2eba9c135edc67135ee1fac2ddae29714a8139', class: "form-group d-flex flex-column" }, h("div", { key: 'c7825bbeef90e85d43d9690da84f14c802520d68', class: "d-flex align-items-start gap-2" }, h("label", { key: '3b9a273ee2d27edc17d6798fd5bb161650368c88', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'efb7ad8c5040a615d1c0ed8923c75e477294d6a4', helpText: this.helpText })), h("input", { key: '212de1de46ec3392e12535f137232328dbdf4681', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: '573f0ddd4238786336d0a78c59b434bc83d8bb02', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '0e05130899c474fe1cae7da51a3e1c9d284c8188', exportparts: "label,input,input-invalid" }, h("div", { key: '81aac7c81010283a17ae6f95958260739ba8f521', class: "form-group d-flex flex-column" }, h("div", { key: '50be24013b6a998714524a974e4a4118d8fe9b1e', class: "d-flex align-items-start gap-2" }, h("label", { key: '8094b17e38012c757647fe050a3d2d4680db31d9', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e2e1307070cfd4ebdf99396eb974e514b0e86de2', helpText: this.helpText })), h("input", { key: '784a515fbd7dd9a33e6631e1b98e599aa58c7e8c', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: 'e657fffc7079bc83ebbcf4468026401221ef6796', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
 }, [0, "form-control-file-v2", {

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

@@ -47,10 +47,10 @@ const FileInput = /*@__PURE__*/ proxyCustomElement(class FileInput extends HTMLE
         return part;
     }
     render() {
-        return (h(Host, { key: 'c34cbf8874c33d945d81a93646372ac9dc687362' }, h("div", { key: 'cacf5f210a0adb6f408ac05efe4279d9eb1ae3b8', class: "form-group d-flex flex-column" }, h("div", { key: '936cb5268fa2c63f9931895f7a0b46ed5b4776ec', class: "d-flex align-items-start gap-2" }, h("label", { key: '6dc1dd3be36337cc3c4bb72a4e4d42c6e7c2a239', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '4c4a2c965882e7e96d36b16e6448fa4efd003950', helpText: this.helpText })), h("input", { key: '469cf033fae879306ecbfdcdb9e6d74fdb4b4265', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '329fd1cedefedb6bd17acfbb30adfefecefb19ca' }, h("div", { key: 'abdd1db599e47f367bc56008386026361ee8aa3b', class: "form-group d-flex flex-column" }, h("div", { key: '9306d438e038947b68cc3b8b2faa2ab412fab203', class: "d-flex align-items-start gap-2" }, h("label", { key: '164c4e92e01d5219013623d0edaa3c96a814ff6c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '2d7fe58881cfa259f3d2ba8edbc6f07411ea26c6', helpText: this.helpText })), h("input", { key: '1964930b98527640df99e1e22b6322e0627bc668', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            } }), h(FormControlErrorText, { key: '7359b6f39ac038230ce1d2d60454a4d4e69c6bb9', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '02ffabfccf4e06936e0ed44fe2ad715f7f44fe3f', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
 }, [0, "form-control-file", {

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

@@ -50,10 +50,10 @@ const MonetaryInput = /*@__PURE__*/ proxyCustomElement(class MonetaryInput exten
         return input;
     }
     render() {
-        return (h(Host, { key: '49b912649df6d869e20a79017363c738a17e00c1' }, h("div", { key: '2c30b89dd46fafe1cd04d186c90ee8389585e1b8', class: "form-group d-flex flex-column" }, h("label", { key: 'e526de8712e2ea3c91ce897d89c5246bbf4391a1', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'c9e7a522371ac171186d45da231943c6cbc202fa', name: this.name, helpText: this.helpText }), h("div", { key: '4e9dc549b30327528fa099ea9b451659def605f7', class: "input-group" }, h("span", { key: '5f4d6854d6cc15b7d0dbbdcf08c9dd25fec5c8d0', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: 'c04d0dce879da4d53bf6dc4925bac7729408a09f', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '88cfae6c94312f40c13c73d38acf47253c41640a' }, h("div", { key: '23b4f228ae880b83d1487d5cbf435c45ec6e21d2', class: "form-group d-flex flex-column" }, h("label", { key: '7ba13edbecfa0c918593bbc478097a02666e5fd3', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'e7a703b4438f6ac97119385158273d5b88792eb4', name: this.name, helpText: this.helpText }), h("div", { key: '415a2d1dc979e41bd3acd5938b676147cc17b9e2', class: "input-group" }, h("span", { key: 'a0aa732bcf5ccf5cbfa2fac954f9229d5959abc0', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '02f62da97a7cc826bf0437e95d162659187511e3', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '4ff864c4ffc66727ac14ef6e6cb7b25c32dd6867', errorText: this.errorText, name: this.name }))));
+            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: 'd384b64c9551eaf13dbbd75bcd4b9bad0291d923', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]

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

@@ -68,10 +68,10 @@ const NumberInputMasked = /*@__PURE__*/ proxyCustomElement(class NumberInputMask
         return input;
     }
     render() {
-        return (h(Host, { key: '328a9d2bf17d2ec2a8a9fa5acf6bbe76af38a38a' }, h("div", { key: '24d1757d7d554ac65e7c2413490425ca3d06aefc', class: "form-group d-flex flex-column" }, h("div", { key: '4548a8ee8d7538f2c3b7ddb0d76ec8c7342cc88a', class: "d-flex align-items-start gap-2" }, h("label", { key: 'c58ccd5ecb756e084a30d9686603e54487bf34ab', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '50d1aeed268375b7b2a9845065ccdc4e1dc5a495', helpText: this.helpText })), h("input", { key: 'ed473e972cc773b9a914dde41d9bff2d8880c604', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: 'cb63ba287e7fc1ee36b212118b137c6cf3b655b5' }, h("div", { key: 'db73b8a97ea151737018354f24f0e4f0efad92da', class: "form-group d-flex flex-column" }, h("div", { key: '833c67c07e655d7394b9a262ecfc90f9c28fa06b', class: "d-flex align-items-start gap-2" }, h("label", { key: 'cb21d0026c79860ae7b03b311832c2bc5d1541ba', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '25e97d3cfe5611fdfbb31dee90a5c9a284beaf18', helpText: this.helpText })), h("input", { key: 'a1eaaa42cac4325eea57a5814611af3dfada4270', ref: el => (this.textInput = 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-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '6e02db8068b1df62e757de4dd7df5673ad375180', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '9a412bb22888801d7a5ae67f5d840d9b46525e5e', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]

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

@@ -44,10 +44,10 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         return input;
     }
     render() {
-        return (h(Host, { key: '575b10375e81774d2ce099cb9f79960fe530ea71' }, h("div", { key: '6f23da58c5fbf994dbf814022ab99668c0c71f77', class: 'form-group d-flex flex-column' }, h("label", { key: '4b19d3067770ce1523e88a7f701a0e193098eb5f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'e6331df9a0484fa12e05d63b3b45af3a9d8b0993', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '01d3a08bbd6dc5aab1a2da27007ba35585d8c97b' }, h("div", { key: '78ca32dadb2a598846266ae595ef156d0cedc66f', class: 'form-group d-flex flex-column' }, h("label", { key: '8a7e94d0dbc675f2ade59b984b4eb609323fd227', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '61cc9f3fbe322d4e14e54750809b2e1572b14ff2', 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-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '55ef88b41cea29d14df3412a9743685114cfda13', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'efad443056dba5b77f86da12854b2a3668c101cd', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '9ff16beb0781040517f8e54fe5d46c2df4cc817e', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '2f77c35f2738fb792956e8723670f77354896d59', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -32,10 +32,10 @@ const RadioInput = /*@__PURE__*/ proxyCustomElement(class RadioInput extends HTM
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: 'c509c9fa1e33816ade27c55f3053cd964f1f1144', class: 'form-group d-flex flex-column' }, h("div", { key: '7067e770576550bc9627cc57dfff24a7f6f6951c', class: "form-check" }, h("input", { key: '9a6d01184eb3be812728dc92ad40d14c1f3e465d', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '6407ba394e0a5e35ce8f9a488942eaff2a6524bf', class: 'form-group d-flex flex-column' }, h("div", { key: '079639b8cd67ea1e68786e051a6248729cc6d9ac', class: "form-check" }, h("input", { key: '40e1e492de6a55f22de384a9e246aa810709b84c', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: '7f54b31c722389a5397e907cc1a400f5da181d21', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '1424f36dfba3af3573fa844d86192428afde1082', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '4e3d2d14f8f328c8c6278cf474bfc5858c3954f1', errorText: this.errorText, name: this.name })));
+            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: '7df3ada6721528e7a1e0895b4b8c018c55fa6c86', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '70e2e3794604d2a1c7b5f4a363742a784b515b37', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'b54b84856b46406fe7f978ad85514b20e4a1ba40', errorText: this.errorText, name: this.name })));
     }
 }, [0, "form-control-radio", {
         "label": [1],

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

@@ -44,10 +44,10 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class SelectInput extends H
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f55283c73225466b10cec78e6e5ff1c268142d1b' }, h("div", { key: '48beb377ca664b867598f8e472a3bb4825aecf9b', class: "form-group d-flex flex-column" }, h("div", { key: '13debfb6a725d7f247eb5601e3361a3964b826e9', class: "d-flex align-items-start gap-2" }, h("label", { key: '15ac64fb03a5c1cb8f55c18bd7eb41d66328e599', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3d8b43ed6e997234f7c64daf41b2286bec93340e', helpText: this.helpText })), h("select", { key: '1c3eb5699a0b76c694a02fe50e8070483b2960e6', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '605b6cb9bfa7bac528ee0af9c4deb5e7b1356b93' }, h("div", { key: 'f8b42609971ff02c4bc147a113bb4a025d32bcd8', class: "form-group d-flex flex-column" }, h("div", { key: '26c87da7b92edbb7fd41825a4e64b642778d0808', class: "d-flex align-items-start gap-2" }, h("label", { key: '43ad562c323b586bf7ab0260258d8678ef3194aa', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1e4b1fa0e9bae57b6e783fb873de38c49ae7a8a4', helpText: this.helpText })), h("select", { key: 'bef2df140499a642ea9bf5bd3f6d7b558042e733', 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: 'd223fd1fad44de99812b0e3a3429e3931b798c2c', 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: '99abaaa766c1270cf1cfd926320d343393b13d1d', errorText: this.errorText, name: this.name }))));
     }
     static get watchers() { return {
         "defaultValue": ["handleDefaultValueChange"]

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

@@ -45,10 +45,10 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
         return input;
     }
     render() {
-        return (h(Host, { key: '9ceda4ac9f8bd1ab572652b1818672948ad7d66f' }, h("div", { key: 'da631a05be3b84ca86a91a360eb7f6a3a3468b78', class: "form-group d-flex flex-column" }, h("div", { key: 'd5c5b7fe29e611806c63e43aa99c9831d4e8ba35', class: "d-flex align-items-start gap-2" }, h("label", { key: '327ca9d8520ba4814104667da7cd8275489431ee', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '32678aefb28b06734c80e1f37b5c4b546ad0770b', helpText: this.helpText })), h("input", { key: '85152fdebfa1081e84e2c8adf760e4f7f6a94ea0', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'fab6618fdcf4d8c5f61687ecd5edfd6783754ec8' }, h("div", { key: '8f5b56c46fcd890c2601dd3b79fe60438bd561ef', class: "form-group d-flex flex-column" }, h("div", { key: '2226c532baa84905d8051e2222f24105b224d42b', class: "d-flex align-items-start gap-2" }, h("label", { key: '7c516dce181a938168dbe4961a90a946c723fc91', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'f4868f88e4f3e4795e25ad505e78cf8ab212623d', helpText: this.helpText })), h("input", { key: '10f02be3c0d055089697155878fedc23aa9f31e3', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: 'd0d8bd801df53a377010b89167d30ded49bc2cdc', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '02c21c4b071903db49e2e8b786275247d75c92f9', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -44,10 +44,10 @@ const TextInput = /*@__PURE__*/ proxyCustomElement(class TextInput extends HTMLE
         return input;
     }
     render() {
-        return (h(Host, { key: 'b1f6375f194cbbda1b2a7d6b421a1491cafc05cb' }, h("div", { key: 'c372f254b00a9a50505cc9473ad138cebcf5495b', class: "form-group d-flex flex-column" }, h("label", { key: 'bea34d76380a9892fd30e3ae1e8cd4e11c3edcae', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '06f7fd1ac978e0f82adbd1cad272fa5c627bd88d', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '9e8752d26a1b81e14a2666b1eeca224355ac7bc6' }, h("div", { key: '1db9d60d316f7d17a0e08fa6859e1b05ad0f325d', class: "form-group d-flex flex-column" }, h("label", { key: '7d955df10cd4fa6324911ee015e87881562aa528', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '3f12740611c14799405a2e070f74022cbb17edfa', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '2375f0026db86411561e3381e8ca487859cc432c', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'def27e9c4e4add94e0ecc5a5c3579c754a17fbad', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '30a25e257d36cf691e19dcb3cb14e1fbdab66c69', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'f74b90c9621eb993d62b8417bb14c31a62153843', errorText: this.errorText, name: this.name }))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -11033,7 +11033,7 @@ const GrossPaymentChartCore = /*@__PURE__*/ proxyCustomElement(class GrossPaymen
         }
     }
     render() {
-        return (h(Host, { key: 'b336dc186a34b6624d415cb072819b4dfe10620f' }, this.loading && h(Spinner, { key: '5a2ca3c4efd9f5acd2bac804490877654d44b39c' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: '0201a1f9445d3eb9800aca09098b5b58a24b6923' }, this.loading && h(Spinner, { key: 'c6e39699e3bfaf3d7d0f5907d7085604e1fe5b9d' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get watchers() { return {
         "getGrossPayment": ["propChanged"],

package/dist/module/hidden-input2.js

@@ -76,7 +76,7 @@ const HiddenInput = /*@__PURE__*/ proxyCustomElement(class HiddenInput extends H
         return input;
     }
     render() {
-        return (h(Host, { key: '32b302de9983db3ced26f1780bf116e63091b9ad' }, h("input", { key: 'c8fbe6dc11c8b743d307557aab107852403441ae', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+        return (h(Host, { key: '05e1f461fcdf006dc2b5db2b4c10450cd7db1c8c' }, h("input", { key: 'dc7589d1a68f7eb31c97281445448a8f2dcf3796', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
     }
 }, [0, "hidden-input", {
         "isFocused": [32],

package/dist/module/iframe-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { F as FormControlErrorText } from './form-control-error-text.js';
-import { p as packageJson } from './package.js';
+import { w as webcomponentsPackageJson } from './package.js';
 import { a as iframeInputStyles } from './iframe-input-styles-state.js';
 import { T as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, i as input, l as label } from './parts.js';
 
@@ -1578,7 +1578,7 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
             clientId,
             paymentMethodMetadata,
             account,
-            componentVersion: packageJson.version,
+            componentVersion: webcomponentsPackageJson.version,
         });
     }
     initializeFrameCommunicationService() {
@@ -1617,10 +1617,10 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
         return params;
     }
     render() {
-        return (h(Host, { key: '7482645d98277dfb65e78a2003e020216fcb52c3', class: "form-group d-flex flex-column" }, h("div", { key: '746fca9a555309152d5cf3943d31d3b3b2c9bfde', style: {
+        return (h(Host, { key: '2af3e5fa30d517f882488289c4b547c28adae089', class: "form-group d-flex flex-column" }, h("div", { key: '361be04621a8cc152701744a1a06692cc8740fec', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '55b203e278ec100baf7949a91eb6a43135c82402', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'c3dd73db2accf012c5a8f3a5c8e32863fe87fd73', 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: '5eb7c35da6ca7910ccf74a24d77ee47d6b4479f9', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '807e8814bbac8cd2e2b409367b3205238b8f7d1c', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '0cfd76ca44133fd218542cd97391754d33c2b205', 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: '53eb1248d2596a306c6b36b41983fa51cba73fc4', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -1630,7 +1630,7 @@ const IframeInput = /*@__PURE__*/ proxyCustomElement(class IframeInput extends H
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: '291b487d0b798b6658d83b9c9f775ba4f02e09de', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '681f58f474a0c82c5b0b9888156865e0dd496477', errorText: this.errorText, name: this.inputId }))));
     }
     get el() { return this; }
 }, [0, "iframe-input", {

package/dist/module/justifi-bank-account-form.d.ts

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

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

@@ -0,0 +1,103 @@
+import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import { S as Skeleton } from './skeleton.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
+import { d as defineCustomElement$3 } from './hidden-input2.js';
+import { d as defineCustomElement$2 } from './iframe-input2.js';
+
+const BankAccountFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" },
+        h("div", { class: "row mb-3" },
+            h("div", { class: "col-12 align-content-end" },
+                h(Skeleton, { height: "18px", width: "120px" }),
+                h(Skeleton, { height: "36px" }))),
+        h("div", { class: "row" },
+            h("div", { class: "col-12 align-content-end" },
+                h(Skeleton, { height: "18px", width: "110px" }),
+                h(Skeleton, { height: "36px" })))));
+};
+
+const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.iframeOrigin = "https://components.justifi.ai";
+        this.isReady = false;
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    componentDidRender() {
+        const elements = [
+            this.accountNumberIframeElement,
+            this.routingNumberIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
+        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
+        return accountNumberIsValid && routingNumberIsValid;
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account }) {
+        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(StyledHost, { key: 'e0a71dff66a2786c0f182595758c2fc7a36c940e' }, h(BankAccountFormSkeleton, { key: 'b8e530e282ff062f53e196782c49855aed5084d3', isReady: this.isReady }), h("hidden-input", { key: '9b877adccc33cfa1151c6fcc0a847fddd7459875' }), h("div", { key: '6fc462b4aea6d7a3d469eda6c077c09202ac5066', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: 'bad1c793767232d22139f06e91c63fecb75d5e6b', class: "row mb-3" }, h("iframe-input", { key: '2e015f0d5e526f309d63b122f0ea900224b0eb91', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '7f2c7e8ca7675c3f936702f605a26f4698addf65', class: "row" }, h("iframe-input", { key: '21eb81b7e69f3e1b376b38e7d533992d977cc2c7', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+    }
+}, [1, "justifi-bank-account-form", {
+        "iframeOrigin": [1, "iframe-origin"],
+        "isReady": [32],
+        "validate": [64],
+        "tokenize": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-bank-account-form", "hidden-input", "iframe-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-bank-account-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BankAccountForm);
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const JustifiBankAccountForm = BankAccountForm;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiBankAccountForm, defineCustomElement };

package/dist/module/justifi-billing-information-form.d.ts

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

package/dist/module/justifi-billing-information-form.js

@@ -0,0 +1,94 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { b as billingFormSchema } from './billing-form-schema.js';
+import { $ as billingForm } from './parts.js';
+import { n as numberOnlyHandler } from './utils3.js';
+import { S as StateOptions } from './state-options.js';
+import { F as FormController } from './form.js';
+import { S as StyledHost } from './styled-host.js';
+import './details.js';
+import './event-types.js';
+import { d as defineCustomElement$5 } from './custom-popper2.js';
+import { d as defineCustomElement$4 } from './form-control-select2.js';
+import { d as defineCustomElement$3 } from './form-control-text2.js';
+import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
+
+const BillingInformationForm = /*@__PURE__*/ proxyCustomElement(class BillingInformationForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new FormController(billingFormSchema());
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setInitialValues(fields);
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(StyledHost, { key: '69c50df0f08e367aeb924bdde683793a542179d5' }, h("div", { key: 'de669a4fc15f3041672d9a093ce6cc80cef65d9e', part: billingForm }, h("form", { key: 'fb079f46703caaed345a9d7cadd380eba599a972' }, h("fieldset", { key: '8ebed9ab4c21b4c4bd490df6654287ac5dd301c8' }, h("div", { key: 'a5a9d27770724af4ea4e2ffed03b26a1d12773f9', class: "row gy-3" }, h("div", { key: 'e5ed5cca7c1bee4033df78c86c8e992b6851ed10', class: "col-12" }, h("form-control-text", { key: '427c31a6f1344a2786dbde7288a0f958957fdd22', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '6e222b1644b34f20f11f516d6de5e8e85f8277ac', class: "col-12" }, h("form-control-text", { key: '011574712b4ae735bfee96c7d6739e23ddd7318c', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'ecddd8f79102ef471053b5920072350e39ac313d', class: "col-12" }, h("form-control-text", { key: '95a37ac3c37c4c717bbefe9fa1b172e84027422e', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '3b14bb063904e57a5e2b1112b6f719875bbf33b7', class: "col-12" }, h("form-control-text", { key: 'cfaf3a8bd3c7ce50f47d721170829e2bfb92fff6', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: '5613add4617df1e292ed0b0ea3a8cefc619c71e2', class: "col-12" }, h("form-control-select", { key: '698b66f67beb9bb5d3501e23f49655e2b3a0a4f1', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '5dd514ba36bb2e1f398c88053dbb35356f3ef811', class: "col-12" }, h("form-control-text", { key: '8825a1a2c2235ee83461a626b0ccdfeb9adbb74a', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+    }
+}, [1, "justifi-billing-information-form", {
+        "formController": [32],
+        "billingInfo": [32],
+        "errors": [32],
+        "getValues": [64],
+        "fill": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-billing-information-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-billing-information-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BillingInformationForm);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const JustifiBillingInformationForm = BillingInformationForm;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiBillingInformationForm, defineCustomElement };

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

@@ -3,7 +3,7 @@ import { E as ErrorState } from './utils.js';
 import { B as BusinessService } from './business.service.js';
 import { m as makeGetBusiness } from './get-business.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Checkout.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { d as defineCustomElement$8 } from './additional-questions-details2.js';
 import { d as defineCustomElement$7 } from './business-details-core2.js';
 import { d as defineCustomElement$6 } from './core-info-details2.js';

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

@@ -12,7 +12,7 @@ import './Payment.js';
 import './Refund.js';
 import './Document.js';
 import { a as Business, c as BusinessFormServerErrors } from './Business.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
 import { H as Header1 } from './header-1.js';

package/dist/module/justifi-card-form.d.ts

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

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

@@ -0,0 +1,111 @@
+import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { S as Skeleton } from './skeleton.js';
+import './details.js';
+import './event-types.js';
+import { S as StyledHost } from './styled-host.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
+import { d as defineCustomElement$3 } from './hidden-input2.js';
+import { d as defineCustomElement$2 } from './iframe-input2.js';
+
+const CardFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    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" })))));
+};
+
+const JustifiCardForm$1 = /*@__PURE__*/ proxyCustomElement(class JustifiCardForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.iframeOrigin = "https://components.justifi.ai";
+        this.isReady = false;
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    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;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
+        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
+        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
+        const cvvIsValid = await this.cvvIframeElement.validate();
+        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account, }) {
+        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(StyledHost, { key: '44aa8e7da60f3dc8408e53f1ca4bf1ec98e838be' }, h(CardFormSkeleton, { key: 'eaea67379e10386d215284de04cd140ac0af0274', isReady: this.isReady }), h("hidden-input", { key: '6bdd3a8aef52e4d2bb7e5a7855578af5e491d04f' }), h("div", { key: '8e271c01ecd6c178f44f9cd9d331d6fc6240bce4', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: '568ac8e93eac648b43d047b2ba149230f7bd2e2f', class: "mb-3" }, h("iframe-input", { key: '5dde288003664ba6fb768a9e5837e4069e749ae5', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '57d7153ff9f21fbbfe2fbf41d664fbbc05fd72db', class: "row" }, h("div", { key: 'a6f2dcd5a98428f2af8773c7ebf76ea3c232a2a9', class: "col-4 align-content-end" }, h("iframe-input", { key: 'ac7ef13f9c9e788a065f6fe3485f8aeb20a3f6e8', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '36c7531f0f7f4a5c98eb36f1c3c395d392567041', class: "col-4 align-content-end" }, h("iframe-input", { key: '2c04a8aa66b73e1e485dd124b27ebf8d9da043d8', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'e413f4a9232c6c8f21fd9738d6b641d2ff9c547f', class: "col-4 align-content-end" }, h("iframe-input", { key: 'bf1204c99ec33e349fe07a741a4ba80d20def1f8', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+    }
+}, [1, "justifi-card-form", {
+        "iframeOrigin": [1, "iframe-origin"],
+        "isReady": [32],
+        "validate": [64],
+        "tokenize": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-card-form", "hidden-input", "iframe-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-card-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JustifiCardForm$1);
+            }
+            break;
+        case "hidden-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "iframe-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const JustifiCardForm = JustifiCardForm$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiCardForm, defineCustomElement };

package/dist/module/justifi-checkout-summary.d.ts

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