@justifi/webcomponents 6.11.0 → 6.12.0

package/dist/collection/components/tokenize-payment-method/{internal-tokenize-payment-method.js → justifi-tokenize-payment-method.js}

@@ -16,7 +16,7 @@ const ERROR_MESSAGES = {
     FORM_NOT_READY: 'Payment form not ready',
     VALIDATION_ERROR: 'Validation error',
 };
-export class InternalTokenizePaymentMethod {
+export class JustifiTokenizePaymentMethod {
     constructor() {
         this.computedHideSubmitButton = false;
         this.isLoading = false;
@@ -44,10 +44,6 @@ export class InternalTokenizePaymentMethod {
         this.selectedPaymentMethod = event.detail;
         checkoutStore.selectedPaymentMethod = { type: event.detail };
     }
-    async fillBillingForm(fields) {
-        var _a;
-        (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.fill(fields);
-    }
     async tokenizePaymentMethod(event) {
         event === null || event === void 0 ? void 0 : event.preventDefault();
         this.validateRequiredProps();
@@ -85,6 +81,9 @@ export class InternalTokenizePaymentMethod {
             this.isLoading = false;
         }
     }
+    async fillBillingForm(fields) {
+        checkoutStore.billingFormFields = fields;
+    }
     async validate() {
         if (!this.areFormsReady()) {
             return { isValid: false, errors: { general: ERROR_MESSAGES.FORM_NOT_READY } };
@@ -99,6 +98,9 @@ export class InternalTokenizePaymentMethod {
         };
         return result;
     }
+    async getValues() {
+        return this.billingFormRef.getValues();
+    }
     async tokenize() {
         try {
             const billingFormFieldValues = await this.billingFormRef.getValues();
@@ -107,7 +109,8 @@ export class InternalTokenizePaymentMethod {
                 account: this.accountId || checkoutStore.accountId,
                 paymentMethodMetadata: this.buildPaymentMethodMetadata(billingFormFieldValues),
             };
-            return await this.paymentMethodFormRef.tokenize(config);
+            const result = await this.paymentMethodFormRef.tokenize(config);
+            return result;
         }
         catch (error) {
             return error;
@@ -218,10 +221,11 @@ export class InternalTokenizePaymentMethod {
             return { error: tokenizeResponse.error };
         }
         const tokenizeResponseData = tokenizeResponse.data;
-        return {
+        const result = {
             token: ((_a = tokenizeResponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeResponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token),
             data: tokenizeResponseData,
         };
+        return result;
     }
     buildPaymentMethodMetadata(billingFormFieldValues) {
         return this.shouldSavePaymentMethod
@@ -238,18 +242,28 @@ export class InternalTokenizePaymentMethod {
     }
     renderPaymentMethodOption(paymentMethodType) {
         const isSelected = this.selectedPaymentMethod === paymentMethodType && checkoutStore.selectedPaymentMethod.id === undefined;
-        return (h("div", { class: "payment-method" }, h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
+        return (h("div", { class: "payment-method" }, h("radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
     }
     renderSelectedPaymentMethodForm(paymentMethodType) {
-        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodType), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType })), h("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID, label: this.savePaymentMethodLabel }))));
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodType), h("div", { class: "mt-4" }, h("billing-form", { ref: (el) => {
+                if (el)
+                    this.billingFormRef = el;
+            }, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType })), h("div", { class: "mt-4" }, h("save-new-payment-method", { hidden: !this.paymentMethodGroupID, label: this.savePaymentMethodLabel }))));
     }
     renderPaymentMethodForm(paymentMethodType) {
-        return paymentMethodType === PAYMENT_METHODS.NEW_CARD ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
+        return paymentMethodType === PAYMENT_METHODS.NEW_CARD ? (h("card-form", { ref: (el) => {
+                if (el)
+                    this.paymentMethodFormRef = el;
+            } })) : (h("bank-account-form", { ref: (el) => {
+                if (el)
+                    this.paymentMethodFormRef = el;
+            } }));
     }
     render() {
-        return (h(StyledHost, { key: '86d79320ea44f9e791ab91739075d160769743fb' }, h("form", { key: 'd8b62d8d0442085822a51eeaef816809e2bd1f05' }, h("fieldset", { key: 'c792bba0b82c19f05ce551b95157479d407113e2' }, h("div", { key: '57e93910091e25344a371ac081aa657c683049b4', class: "row gy-3" }, h("div", { key: 'bc63e26c74b247ec4d5d5ee9510d8370b9e36f17', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: '1d9acd0beee80e8b339204d7328a0d2e9078b9a3', class: "col-12" }, h("justifi-button", { key: '18a968b57420f0690e6f6c98b5e108f769b61d4b', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (h(StyledHost, { key: '2d4349f3e5ad632981cdeb14dbe4e483f79379da' }, h("form", { key: '754afee2c5229cf016bd8fc0cf81041cf37270a8' }, h("fieldset", { key: '01867151a09d384e1258ef7f62fbc88c526706cc' }, h("div", { key: '7ba453d4629a0c2ef583daddcb9cf02ac5eee265', class: "row gy-3" }, h("div", { key: '4148f2269c738a00f2684d69d4a83a4ab2424f2b', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'e67b09357571aadfb3d2712f55954506748b3826', class: "col-12" }, h("internal-button", { key: 'c2e805060ff7e9e97144533ffad3b4a02433e792', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
-    static get is() { return "internal-tokenize-payment-method"; }
+    static get is() { return "justifi-tokenize-payment-method"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "accountId": {
@@ -499,12 +513,12 @@ export class InternalTokenizePaymentMethod {
     }
     static get methods() {
         return {
-            "fillBillingForm": {
+            "tokenizePaymentMethod": {
                 "complexType": {
-                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "signature": "(event?: MouseEvent) => Promise<PaymentMethodPayload>",
                     "parameters": [{
-                            "name": "fields",
-                            "type": "BillingFormFields",
+                            "name": "event",
+                            "type": "MouseEvent",
                             "docs": ""
                         }],
                     "references": {
@@ -512,25 +526,34 @@ export class InternalTokenizePaymentMethod {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "BillingFormFields": {
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "../checkout/payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        },
+                        "ComponentErrorCodes": {
                             "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::BillingFormFields"
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorCodes"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<PaymentMethodPayload>"
                 },
                 "docs": {
                     "text": "",
                     "tags": []
                 }
             },
-            "tokenizePaymentMethod": {
+            "fillBillingForm": {
                 "complexType": {
-                    "signature": "(event?: MouseEvent) => Promise<PaymentMethodPayload>",
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
                     "parameters": [{
-                            "name": "event",
-                            "type": "MouseEvent",
+                            "name": "fields",
+                            "type": "BillingFormFields",
                             "docs": ""
                         }],
                     "references": {
@@ -538,22 +561,13 @@ export class InternalTokenizePaymentMethod {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "PaymentMethodPayload": {
-                            "location": "import",
-                            "path": "../checkout/payment-method-payload",
-                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
-                        },
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        },
-                        "ComponentErrorCodes": {
+                        "BillingFormFields": {
                             "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::ComponentErrorCodes"
+                            "path": "../checkout/billing-form/billing-form-schema",
+                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
-                    "return": "Promise<PaymentMethodPayload>"
+                    "return": "Promise<void>"
                 },
                 "docs": {
                     "text": "",
@@ -581,6 +595,28 @@ export class InternalTokenizePaymentMethod {
                     "tags": []
                 }
             },
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../checkout/billing-form/billing-form-schema",
+                            "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "tokenize": {
                 "complexType": {
                     "signature": "() => Promise<any>",

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -108,7 +108,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '7a5bab9f568f74c4cc7635a5844ca9a48c506521' }, h("style", { key: '9d073f9cc6b46141f05def0a5fa51d61ce2ec1b0' }, `
+        return (h("div", { key: 'eb1e7317215bc36f340ac0cd8b5826cc302c3693' }, h("style", { key: '1acdb1992e684a654d659e7472758e016b4b11d6' }, `
           .popper-content {
             display: none;
           }
@@ -116,7 +116,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '7cea0b75df433ed9b5a8e46b015814a954f47c99', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '6a6f628864ce86989413f80b8a39f7fe089d6633' }))));
+          `), h("div", { key: '53ff89449687b84469c9cfbb83c7807b6e95e003', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: 'f8f516747c2ad6c2e32efefeaa33f319a202bba6' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

package/dist/collection/ui-components/details/{details.js → justifi-details.js}

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { ErrorState } from "./utils";
-export class Details {
+export class JustifiDetails {
     render() {
-        return (h("div", { key: '77d9c172a85e392d3c21d7d789dd2c264858f571' }, this.errorMessage ?
+        return (h("div", { key: 'b91f85e2f62f1ea80409367208117f805299c397' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));

package/dist/collection/ui-components/form/form-control-checkbox.js

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlHelpText, FormControlErrorText } from "../../ui-components";
 import { inputCheckbox, inputCheckboxChecked, inputCheckboxCheckedFocused, inputCheckboxFocused, inputCheckboxInvalid, label } from "../../styles/parts";
-export class CheckboxInput {
+export class FormControlCheckbox {
     constructor() {
         this.isFocused = false;
         this.errorText = '';
@@ -34,10 +34,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: '56962751d91674cfeb2716ba90bb9e9751ea4f66' }, h("div", { key: 'e3bb3cac2bf8ae03fc72558b3c00ef32ee56f61d', class: 'form-group d-flex flex-column' }, h("div", { key: '7be82e8be1da073c8f0e5ca7d609ce1d29c82c5e', class: "form-check" }, h("input", { key: 'f6b5f0ed365937feeb6ee0d885c55a27f21eaec0', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'dc2fdbd7fd92a0205b15e4b302458d8f0d775b35' }, h("div", { key: 'f32f7d5cb559282cece071f3623bdab80998bc04', class: 'form-group d-flex flex-column' }, h("div", { key: '5481439484b97ad733a0051f1722a5c3ed45778d', class: "form-check" }, h("input", { key: '9e96a563e5b0b1a9589dff7eb4f3eb3038d4918b', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: 'dda8703d86506cdd5a3b3549f3c54296830ff20f', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'a4260e0cc463ad937128d46a3eb251191319473d', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'de41ad6865a3d0414fa850ee5439cc11abf31f4f', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: '11a27a415d7741d8a29dde8d1fd029c2e143f235', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: '3e0ef15182200a48d3cf3142c3511a0ad8095db3', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'e85175ea76f6073d7ee813a3f2d8eaecc044601a', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-date.js

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
-export class DateInput {
+export class FormControlDate {
     constructor() {
         this.isFocused = false;
         this.maxDate = this.currentDate;
@@ -42,10 +42,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '04fe677b669177d1ea7d4e8e426d190b74118a02' }, h("div", { key: '9b1479566eeba80113ccf466f8eaf56efce2da47', class: "form-group d-flex flex-column" }, h("div", { key: '81f2620f428f5d9c7caeb0973dacc942337207b2', class: "d-flex gap-2" }, h("label", { key: '8e483165943647e63dcf2eea780582f0ea77dce8', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '44162246cc52b4e6600b1c1399de588d98d28a15', helpText: this.helpText })), h("input", { key: '87cc9774e38ff9de3067c9f750afc6312eb72993', 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: '4bde5edec967df1c66865f5f20d24fa386e261ff' }, h("div", { key: 'fa0a944cd5d06f7e705737bd7fa98d80b8fd1555', class: "form-group d-flex flex-column" }, h("div", { key: '44dcf29339d380087fe7a98173a2033d16ad6764', class: "d-flex gap-2" }, h("label", { key: '8a0a38ace6f4a3db0388013f12381d4afec000bd', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c9105a132a81408c304ab24f08c559289d68648b', helpText: this.helpText })), h("input", { key: '7938856aa5c1dca7d6c1ce89b3318eec3055348a', 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: '8a34b1155e7f0e732de278f61bd8eef223bf69ef', 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: '5e523b911d4b4810c7512c4dda63a3204eabb11a', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file-v2.js

@@ -1,13 +1,13 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "./form-helpers/form-control-error-text";
-export class FileInput {
+export class FormControlFileV2 {
     constructor() {
         this.errorText = '';
         this.inputHandler = () => { };
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '852cd7deb91a1305b0941c90f1ea0b00ee2a9f69', exportparts: "label,input,input-invalid" }, h("div", { key: 'd1c094c73bb6414137f5e1acfd38c0048debef27', class: "form-group d-flex flex-column" }, h("div", { key: 'da46f17f893e4c9557725294404e2451f001ffec', class: "d-flex align-items-start gap-2" }, h("label", { key: '1197fab50023e2028d8eb18a40e7675c3cb88283', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e0834b634350912a26ce08f0d5f1a2dca824cd9f', helpText: this.helpText })), h("input", { key: '98fad302f019cc8abd081834ae006f406d457d5b', 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: '71c5a49575314fca8a6f4434c0634a3cdf82b084', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '5df12f5dc87f1c7d5b18676a9d4a7b257719b2fa', exportparts: "label,input,input-invalid" }, h("div", { key: '57b02e11bd44c405635a2f6253637b288bafdd41', class: "form-group d-flex flex-column" }, h("div", { key: 'd62f4ae4183e33af3105d76d0180ebe0f54983e5', class: "d-flex align-items-start gap-2" }, h("label", { key: '82d8b58d0147f4fc6302c3852a44a73d9fcf34e0', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ec4e21a9d4105b751b099378ce49c55a95ef36b2', helpText: this.helpText })), h("input", { key: '332527088f01b11bb06af38c73f39d3040d925b7', 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: 'd7caedcf4b1263e3c133310312374bc6d61b82c2', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file-v2"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file.js

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
-export class FileInput {
+export class FormControlFile {
     constructor() {
         this.isFocused = false;
         this.errorText = '';
@@ -40,10 +40,10 @@ export class FileInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '5dae73a138845ac8e08102905fb9ccae526519b5' }, h("div", { key: '38fa7c7c23abf18530a1508e93dee487382f8456', class: "form-group d-flex flex-column" }, h("div", { key: '3c90cfef275acbc2383f3af046b342408e524659', class: "d-flex align-items-start gap-2" }, h("label", { key: '65af257367512c58f75bff6ecc09248148c0929f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'd54ddf27dd6197f52487e342963e442dc04aa459', helpText: this.helpText })), h("input", { key: '033108ddee4cac2aca98bcde260ab391e24b8ce5', 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: '1f5c8bdc73c664cf40acb4f5b61db454bbda36a0' }, h("div", { key: '77f0007875132d26dd8df91dfb53386da9e15ce4', class: "form-group d-flex flex-column" }, h("div", { key: 'a6885165580120dbaffaedf60edf2e2cc9883a9f', class: "d-flex align-items-start gap-2" }, h("label", { key: '489b6d49a60f8339722537084f64746e5625297d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fc581e32bfb8935e79648c0a670bcb26bf225fe4', helpText: this.helpText })), h("input", { key: '34ddfe0796848feadcd6249ed861c5fa623840d4', 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: '81aec26bc0781bbcfe531d37c0dd4bf6966ef9ce', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: '4a0c1869b8b19a01273d8f1ca3f3cd92134ddb58', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-monetary.js

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { FormControlErrorText, FormControlHelpText } from "..";
 import { input, inputDisabled, inputFocused, inputInvalid, label, inputAdornment } from "../../styles/parts";
 import { formatCurrency } from "../../utils/utils";
-export class MonetaryInput {
+export class FormControlMonetary {
     constructor() {
         this.isFocused = false;
         this.defaultValue = '0';
@@ -42,10 +42,10 @@ export class MonetaryInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '2c0e7cdc644343a61c87852733ee805739ecaaa1' }, h("div", { key: '998eb7ec3125af116e876e837982d2f37285ce4c', class: "form-group d-flex flex-column" }, h("label", { key: '90cff5cbb09cf4f39c04c12c10eae45a6ada97c5', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'be23587b830c4e6e96abcd53a78108543c5ad1c4', name: this.name, helpText: this.helpText }), h("div", { key: '6f47b9e86f4af9c641f26dc631fabc917bc06e8c', class: "input-group" }, h("span", { key: '0e39a178edf94795851c0c52dc054a8a61c2643b', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '8bb615087578002c9990dbf7528536ae2cb7aa01', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'c91bf2d63e4cd717dfc472f5b16dac9c3e9fdd69' }, h("div", { key: '8f1eaae0f9dfbcc97adf788a5b955824dc68dbd2', class: "form-group d-flex flex-column" }, h("label", { key: '1965936a9e14612fdb8aec07e0def943e1e1344a', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'dd517aee7a39c71c1fe98b6c53a4528c9d3826d5', name: this.name, helpText: this.helpText }), h("div", { key: 'bb62ed9e6c9db38f39581d7f86483a242330c295', class: "input-group" }, h("span", { key: '5a358beea95c1eed695b8ca5e5f9a7a82b0864b1', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '5c37a1edb6a229634536c2c7ad4cb4c2cfff211b', 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: 'd97f18500d2fe6cf23bad8a872f1d0e965ccb114', 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: '5cb05fe585766d5f037c33d86485a6002894c781', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-number-masked.js

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import IMask from "imask";
 import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
-export class NumberInputMasked {
+export class FormControlNumberMasked {
     constructor() {
         this.imask = null;
         this.isFocused = false;
@@ -63,10 +63,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '8e8abaf2afd497cf83ef9661374606b899c0f730' }, h("div", { key: 'b9281582a6dc56d34e67541ecf7eda264d911f97', class: "form-group d-flex flex-column" }, h("div", { key: '41816d8d12b7feca244efee7df3afae3594ac687', class: "d-flex align-items-start gap-2" }, h("label", { key: 'c41b28d631cccb4f21ae61763e7afbc866475cc6', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'd665eb4abc33a53389d9417fa83b8bff46af90ef', helpText: this.helpText })), h("input", { key: 'fbfa6e0768f52ad5e5a92609e9cb1d8c8bd34966', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: 'c70d3fcce4d3e1e120008b03a708bb3d1038777b' }, h("div", { key: 'fc3c3cf5637121a7c6f662649a1b3910ec503afa', class: "form-group d-flex flex-column" }, h("div", { key: 'c06e87a0d72942e421c37ab406b7f71d4e7f2c54', class: "d-flex align-items-start gap-2" }, h("label", { key: 'eedeec0161e3085cd65ea08b3fb4517ff62c6ffc', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '9fb05bd91836ca51750f30a714a7940493bfad8b', helpText: this.helpText })), h("input", { key: 'ef12caf83b42b0de0c33ece690bdd927b9b9a02c', 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: 'db0b75ce2d99e1707b383c0d443416b42f4b620e', 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: '8791f48bed5d6508b7cccad7bba8da7d65f96ffc', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-number.js

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText, FormControlHelpText } from "../../ui-components";
 import { input, inputFocused, inputInvalid, inputInvalidAndFocused, label } from "../../styles/parts";
-export class NumberInput {
+export class FormControlNumber {
     constructor() {
         this.isFocused = false;
         this.disabled = false;
@@ -37,10 +37,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '7d26854332ed1db6e00ee16ec336e409d250df9e' }, h("div", { key: 'f32c52eba6c4248318713da7f18e3f10f3eb11f0', class: 'form-group d-flex flex-column' }, h("label", { key: 'c3ecbd98d9e29692715faa68c9f432df76a7348e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '4eedd84af0d8520271bbc0fcd892d0ca1115d20a', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '07b767b8c9091079f121d1df2b552c7d406f47b1' }, h("div", { key: '1c6c234435bb5571d3bbf5123f6f47cf51b095d6', class: 'form-group d-flex flex-column' }, h("label", { key: '883c05703351e32c7e12dbf7d984f888825606e3', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '9b841736efd2971cf93c1167ec1fd1c1d5045ec9', 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: 'a2692df1434bd7202f8ab5062d37ec309a1c6405', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '958a10550de7a048fa17055cf35ac344fa1b77d8', 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: '26133a236b3c8b2cc14dce1c1244f3b1a9163605', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'e69f03f593e1632fada2d1f6dd56aaf5612a2da7', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-radio.js

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { inputRadio, inputRadioChecked, inputRadioCheckedFocused, inputRadioFocused, inputRadioInvalid, label } from "../../styles/parts";
-export class RadioInput {
+export class FormControlRadio {
     constructor() {
         this.isFocused = false;
         this.inputHandler = () => { };
@@ -29,10 +29,10 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: 'fcb9bd7844b2e2f2e6407a8e61518c6ace87a5a2', class: 'form-group d-flex flex-column' }, h("div", { key: '189a20da8a1731e58c6acfefc1b9ee3c69fab51b', class: "form-check" }, h("input", { key: '10d4f36dda13f27ee7e142b5e7f6d968a959fc99', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '155f8db94cbc78a33daeaace0ea6b9e403d6856d', class: 'form-group d-flex flex-column' }, h("div", { key: 'f2c34e5513e584a68c6117775124eeb40d8a4de3', class: "form-check" }, h("input", { key: '50114b7a8428cc78b963442cf92eda6d0146f824', 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: '3b197897facca29a319ed9837657e9f21b1bbf5b', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '9a6916c08a3a36ab071d80d62465e9278aa7ab97', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'ef989f755e5abd3d4a4569fb31dcdb534b0ceee2', 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: '759a69de65a6fc043494d394a118c55b1e948e75', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '18ca0f0b27657d1a159b9eb4839290969f349d7e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e4bffdf3cd4596a3b42fb6098be620005d68296e', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-select.js

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
-export class SelectInput {
+export class FormControlSelect {
     constructor() {
         this.isFocused = false;
         this.handleFormControlInput = (event) => {
@@ -35,10 +35,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b648fe3ee0eb7a0ab3193a4a2af2bd3ff0259c67' }, h("div", { key: '080b8394a2372987e60c6a2a5f12248b6757f0c0', class: "form-group d-flex flex-column" }, h("div", { key: '3dc9a2e4149bfeb4a2149e939a7d6a5c23ac7a1d', class: "d-flex align-items-start gap-2" }, h("label", { key: 'e75008716af1607f78b86d094c8437f249e232f7', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'f11fbd1bc45491db16bf50b767d9de64e3061aca', helpText: this.helpText })), h("select", { key: 'caa48e738c2539f157aeaaa246be4b828fd1dbb7', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '181f9882efa122d1158475b03c5d91b6a596a029' }, h("div", { key: 'ab62345c08da6d3d33fa110937c936758e065eb3', class: "form-group d-flex flex-column" }, h("div", { key: 'a4cd1468d4c57b63ee25f25cca6f42ea08b70ef4', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ebb6e16b2e11a3623c3152eb8e1b51412fa4d1ae', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '5d5d414a90927659661b6a2e167056c938e9c5a7', helpText: this.helpText })), h("select", { key: '8105c889f7fdb9376848c6057ccd58b9c62841a4', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: 'c3f9c19129e0cdad72e567b7edc036ab9f686a5d', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: '061a26387560f0b8085e83e1c373a43340146469', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-text.js

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
-export class TextInput {
+export class FormControlText {
     constructor() {
         this.isFocused = false;
         this.handleFormControlInput = (event) => {
@@ -36,10 +36,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'dd36cf4579d1509c825cd204680df5368b73ee81' }, h("div", { key: 'b132778abe33e23ecb769dbc8ac5e97ac3b55816', class: "form-group d-flex flex-column" }, h("div", { key: 'ee12f7b5281b930aa180b9a29653cb32eaaf642f', class: "d-flex align-items-start gap-2" }, h("label", { key: '3ed5821ff735cef7bea9782c5d013848e4ce3c43', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'd2efd753e723f51cab216c9f571ab9b41500fac7', helpText: this.helpText })), h("input", { key: '34c413363e78224da4f69cca441ec8b5766d19ed', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '4ab9e7a2c6312b568de8a8ee429ef02f3f792173' }, h("div", { key: 'e273e0bc062be883505fe3047d41a741eaf23a44', class: "form-group d-flex flex-column" }, h("div", { key: 'a7496dd4f6b5549f26752ca2de35a34c5261e439', class: "d-flex align-items-start gap-2" }, h("label", { key: '97480c49cb0fcd3c75d123c6033df4880755baf0', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e2a53e4e15be4f9f739a79afeaf28c3671c14a4d', helpText: this.helpText })), h("input", { key: '1571553d763734454026b2c4feaa88a9535f2057', 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: '2707a89236283522ef8b35ddb371e302fb17d00c', 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: '44f7c7847a2255ff3ddd83f542ff6690d1aed798', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-textarea.js

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { input, inputDisabled, inputFocused, inputInvalid, inputInvalidAndFocused, label } from "../../styles/parts";
-export class TextInput {
+export class FormControlTextarea {
     constructor() {
         this.isFocused = false;
         this.helpText = '';
@@ -42,10 +42,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'c2f4587d1cbfdfea257b5a6649f6cf4f59bedff9' }, h("div", { key: '381c1aab5057b7ba2c736fb4fecdccfe40ee2d5e', class: "form-group d-flex flex-column" }, h("label", { key: '4bb62b512792bd76d9dc3ebadf06c2a35cf474f7', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '50e0c18dd7d18675f6c947ee8136856dc535c580', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '1e73c7219f321b73bc6001cde222b33ba79a7338' }, h("div", { key: 'dc682efd7a21e80ed1936cf69a186d3fab258de8', class: "form-group d-flex flex-column" }, h("label", { key: '526bcc6604b03b79737e4211c6d7a282cbd71979', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '4dab395c565c7180631042f99ac3b91382df4ca1', 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: 'f90c3f3ccf76277c433b93d14196b41e9447246d', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '281a97d333c2e383a73aa016cb88ee71dcb85b2a', 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: 'dc851b2b46a3be03c65121a7e1f957f6c6d20c1b', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3f09a6b275b4218aff7588f90a3cdb0de02ae8bb', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {

package/dist/collection/ui-components/form/form-helpers/form-control-tooltip/form-control-tooltip.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { tooltip, tooltipIcon, tooltipInner } from "../../../../styles/parts";
-export class TooltipComponent {
+export class FormControlTooltip {
     show() {
         this.tooltip.classList.add('show');
     }

package/dist/collection/ui-components/form/hidden-input.js

@@ -87,7 +87,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '5697b5e318914b8866bc6ad2fb2009e5f8c8d80f' }, h("input", { key: '3370d11bc6e5a49f28dd2e95bf1d92ee7a0dd892', 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: 'd3aa78cd75de1a781c8100c121933122c6db599b' }, h("input", { key: '7ac01ecc01ca776cd6928a3a1d1e0b2baa4b8965', 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' } })));
     }
     static get is() { return "hidden-input"; }
     static get states() {

package/dist/collection/ui-components/form/iframe-input.js

@@ -77,10 +77,10 @@ export class IframeInput {
         return params;
     }
     render() {
-        return (h(Host, { key: 'e85f5a2417ccc46ac8df23a695c6ef3fcd71577e', class: "form-group d-flex flex-column" }, h("div", { key: '02878f7fb1e720aa97a67e72d5f1711e0fbd0668', style: {
+        return (h(Host, { key: 'a3039409160cb6fd7dd2e7bf189e241f34ddeca6', class: "form-group d-flex flex-column" }, h("div", { key: 'dab356c30fedca21f6092cfbaf576e23df36b318', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '57c46b739fb284c4ee618594f04cc5ff128bf16c', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '4634650c721673a52ea55e331154a624c19266dc', 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: 'facd226e399f41537657603c50c45887c1177c42', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '0469fb973476f92cd5b275b62e4a462521448273', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'd91253d593d700279c0d869b34d3d4f5d572759a', 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: '2a3676ad3d25daedccaa0cb2297f505641b47497', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -90,7 +90,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: '73c34b9ab89a21e6b3203904988bf8a542eb01f8', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: 'e54b9c1a7ef5da3bed2eb62e25a28c91865f1f40', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {

package/dist/collection/ui-components/index.js

@@ -7,6 +7,6 @@ export * from './headers/header-2';
 export * from './headers/header-3';
 export * from './form/form-helpers/form-control-help-text';
 export * from './form/form-helpers/form-control-error-text';
-export * from './details/details';
+export * from './details/justifi-details';
 export * from './table';
 export * from './shadow-dom-components/justifi-radio-list-item';