@justifi/webcomponents 4.23.0 → 5.0.0-rc-1

package/dist/cjs/form-control-select_3.cjs.entry.js

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+const formControlErrorText = require('./form-control-error-text-a2fd5fc1.js');
+
+const SelectInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.formControlInput = index.createEvent(this, "formControlInput", 7);
+        this.formControlBlur = index.createEvent(this, "formControlBlur", 7);
+        this.handleFormControlInput = (event) => {
+            const target = event.target;
+            const name = target.getAttribute('name');
+            this.inputHandler(name, target.value);
+            this.formControlInput.emit(target.value);
+        };
+        this.updateInput = (newValue) => {
+            this.selectElement.value = newValue;
+        };
+        this.isFocused = false;
+        this.name = undefined;
+        this.label = undefined;
+        this.options = undefined;
+        this.inputHandler = undefined;
+        this.defaultValue = undefined;
+        this.helpText = undefined;
+        this.errorText = undefined;
+        this.disabled = undefined;
+    }
+    handleDefaultValueChange(newValue) {
+        this.updateInput(newValue);
+    }
+    componentDidLoad() {
+        this.updateInput(this.defaultValue);
+    }
+    get part() {
+        let part = parts.input;
+        if (this.errorText) {
+            part = parts.inputInvalid;
+        }
+        if (this.disabled) {
+            part = parts.inputDisabled;
+        }
+        if (this.isFocused) {
+            part = parts.inputFocused;
+        }
+        return part;
+    }
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: 'f7c77b6bcef56ad9bee73f9bfcac24bea025893d' }, index.h("div", { key: 'f6a15dd79da5e8c6c41219e68a025cecdc12e7d8', class: "form-group d-flex flex-column" }, index.h("div", { key: '73bbe07c72a568a4c70e1f806fc6c53d78902b56', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '79d749b1a0d818cb4b65468cc0b4fdfc9c76136f', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '34f1dd32c494652df248c492990ad5bda62aa59d', helpText: this.helpText })), index.h("select", { key: '257d4cd10e37b1707a299ef1bce0e36102cad16b', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (index.h("option", { value: option.value }, option.label)))), index.h(formControlErrorText.FormControlErrorText, { key: '8aba26a249c5fdcead2ace90d47cdb891e152dba', errorText: this.errorText, name: this.name }))));
+    }
+    static get watchers() { return {
+        "defaultValue": ["handleDefaultValueChange"]
+    }; }
+};
+
+const TextInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.formControlInput = index.createEvent(this, "formControlInput", 7);
+        this.formControlBlur = index.createEvent(this, "formControlBlur", 7);
+        this.handleFormControlInput = (event) => {
+            const target = event.target;
+            const name = target.getAttribute('name');
+            this.inputHandler(name, target.value);
+            this.formControlInput.emit({ name, value: target.value });
+        };
+        this.updateInput = (newValue) => {
+            const inputElement = this.el.querySelector('input');
+            if (inputElement) {
+                inputElement.value = newValue || '';
+            }
+        };
+        this.isFocused = false;
+        this.name = undefined;
+        this.label = undefined;
+        this.inputHandler = undefined;
+        this.defaultValue = undefined;
+        this.helpText = undefined;
+        this.errorText = undefined;
+        this.maxLength = undefined;
+        this.keyDownHandler = undefined;
+        this.disabled = undefined;
+    }
+    handleDefaultValueChange(newValue) {
+        this.updateInput(newValue);
+    }
+    componentDidLoad() {
+        this.updateInput(this.defaultValue);
+    }
+    get part() {
+        if (this.errorText) {
+            return parts.inputInvalid;
+        }
+        if (this.disabled) {
+            return parts.inputDisabled;
+        }
+        if (this.isFocused) {
+            return parts.inputFocused;
+        }
+        return parts.input;
+    }
+    render() {
+        return (index.h(index.Host, { key: '1303fabdad4bbf9ec2cf02e8dacbcafed74d3b8f' }, index.h("div", { key: 'd5438a9fd0c6b197a23f546181c1c57342824f7b', class: "form-group d-flex flex-column" }, index.h("div", { key: 'df99160e9af69f44bc369e579de9219e10797114', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '669a04f01feac1aa712b6d8d43576a2f2f352cef', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: 'e2572600e8d8a64d2b5db676cf5e407921a280e9', helpText: this.helpText })), index.h("input", { key: '9bae401bab3d6183b0b1f5bcee0546a8cb8bb499', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), index.h(formControlErrorText.FormControlErrorText, { key: '098d7991c5c68730eedcc19ad62424a84a9acc70', errorText: this.errorText, name: this.name }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "defaultValue": ["handleDefaultValueChange"]
+    }; }
+};
+
+const TooltipComponent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.anchorIcon = undefined;
+        this.tooltip = undefined;
+        this.helpText = undefined;
+    }
+    show() {
+        this.tooltip.classList.add('show');
+    }
+    hide() {
+        this.tooltip.classList.remove('show');
+    }
+    render() {
+        if (!this.helpText) {
+            return null;
+        }
+        return (index.h("div", { class: "tooltip-container" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-question-square tooltip-icon", viewBox: "0 0 16 16", ref: (el) => (this.anchorIcon = el), part: parts.tooltipIcon }, index.h("path", { d: "M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" }), index.h("path", { d: "M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94" })), index.h("custom-popper", { trigger: "hover", placement: "top", anchorRef: this.anchorIcon }, index.h("div", { class: "tooltip bs-tooltip-top", part: parts.tooltip, role: "tooltip", ref: (el) => (this.tooltip = el) }, index.h("div", { class: "tooltip-inner", part: parts.tooltipInner }, this.helpText)))));
+    }
+};
+
+exports.form_control_select = SelectInput;
+exports.form_control_text = TextInput;
+exports.form_control_tooltip = TooltipComponent;

package/dist/cjs/{get-payout-csv-1eed32ee.js → get-payout-csv-4e60474e.js}

@@ -3,7 +3,7 @@
 const Api = require('./Api-f5280a80.js');
 require('./Checkout-a528241d.js');
 require('./Pagination-0da8f095.js');
-require('./Payment-87b47c43.js');
+require('./Payment-d074b246.js');
 require('./SubAccount-fda5ec5b.js');
 const config = require('./config-05767cba.js');
 const ComponentError = require('./ComponentError-233ac749.js');

package/dist/cjs/{get-subaccounts-1d2fb201.js → get-subaccounts-2ea9676c.js}

@@ -3,7 +3,7 @@
 const Api = require('./Api-f5280a80.js');
 require('./Checkout-a528241d.js');
 require('./Pagination-0da8f095.js');
-require('./Payment-87b47c43.js');
+require('./Payment-d074b246.js');
 const SubAccount = require('./SubAccount-fda5ec5b.js');
 const config = require('./config-05767cba.js');
 const ComponentError = require('./ComponentError-233ac749.js');

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

@@ -2,9 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb499e95.js');
-const utils = require('./utils-e88fbc94.js');
-const utils$1 = require('./utils-189dc30d.js');
+const index = require('./index-5b9a3b5f.js');
+const utils = require('./utils-a21b7453.js');
+const utils$1 = require('./utils-fc17191b.js');
+const spinner = require('./spinner-c11fcb44.js');
+require('./parts-811ddb9c.js');
 
 /*!
  * @kurkle/color v0.3.2
@@ -10974,9 +10976,6 @@ const generateChartOptions = (total, dates, endDate) => {
     });
 };
 
-const grossPaymentChartCss = ":host{display:block}";
-const GrossPaymentChartCoreStyle0 = grossPaymentChartCss;
-
 Chart.register(plugin_colors, BarController, BarElement, CategoryScale, LinearScale, plugin_legend, plugin_tooltip, plugin_title);
 const GrossPaymentChartCore = class {
     constructor(hostRef) {
@@ -11045,13 +11044,12 @@ const GrossPaymentChartCore = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '80dfc1ae805ac7e1d34222037de6f492feabf619' }, this.loading && utils$1.LoadingState(), !this.errorMessage ? index.h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : utils$1.ErrorState(this.errorMessage)));
+        return (index.h(index.Host, { key: 'ac73fa9c5543c6c9b7170ccc99d1a48b2e1d28b5' }, this.loading && index.h(spinner.Spinner, { key: 'eb847368027fef8f004c913d0a09cf692f493ce3' }), !this.errorMessage ? index.h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : utils$1.ErrorState(this.errorMessage)));
     }
     static get watchers() { return {
         "getGrossPayment": ["propChanged"],
         "grossVolumeReport": ["grossVolumeReportChanged"]
     }; }
 };
-GrossPaymentChartCore.style = GrossPaymentChartCoreStyle0;
 
 exports.gross_payment_chart_core = GrossPaymentChartCore;

package/dist/cjs/header-1-cb7af794.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+
+const Header1 = (props) => {
+    return index.h("h1", { class: `header-1 ${props === null || props === void 0 ? void 0 : props.class}`, part: parts.heading1 }, props.text);
+};
+
+exports.Header1 = Header1;

package/dist/cjs/header-3-75e50713.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const index = require('./index-5b9a3b5f.js');
+const parts = require('./parts-811ddb9c.js');
+
+const Header3 = (props) => {
+    return index.h("h3", { class: `header-3 ${props === null || props === void 0 ? void 0 : props.class}`, part: parts.heading3 }, props.text);
+};
+
+exports.Header3 = Header3;

package/dist/cjs/iframe-input-styles-state-d0de0b24.js

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

package/dist/cjs/{justifi-billing-form_2.cjs.entry.js → iframe-input.cjs.entry.js}

@@ -2,66 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fb499e95.js');
-const index_esm = require('./index.esm-97cf6825.js');
-const schemaValidations = require('./schema-validations-e8a17401.js');
-const stateOptions = require('./state-options-4fbcb48a.js');
-const utils = require('./utils-bc03ca40.js');
-const styledHost = require('./styled-host-1adf46c3.js');
-const _package = require('./package-bc606eae.js');
-const utils$1 = require('./utils-ba79e868.js');
-require('./business-form-options-5db0bd5e.js');
-require('./Business-aa799fec.js');
-require('./helpers-602962eb.js');
-
-const BillingFormSchema = index_esm.create$3({
-    name: schemaValidations.identityNameValidation.required('Enter full name'),
-    address_line1: schemaValidations.lineOneValidation.required('Enter street address'),
-    address_line2: schemaValidations.lineTwoValidation.nullable(),
-    address_city: schemaValidations.cityValidation.required('Enter city'),
-    address_state: schemaValidations.stateValidation.required('Select state'),
-    address_postal_code: schemaValidations.postalValidation.required('Enter postal code'),
-});
-
-const billingFormCss = ":host{display:block}justifi-billing-form{margin-left:calc(var(--jfi-layout-padding) * -1);margin-right:calc(var(--jfi-layout-padding) * -1)}*::part(label){color:var(--jfi-form-label-color);font-family:var(--jfi-form-label-font-family);font-weight:var(--jfi-form-label-font-weight);font-size:var(--jfi-form-label-font-size);margin:var(--jfi-form-label-margin)}*::part(input){background-color:var(--jfi-form-control-background-color);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-radius:var(--jfi-form-control-border-radius);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);font-size:var(--jfi-form-control-font-size);font-weight:var(--jfi-form-control-font-weight);line-height:var(--jfi-form-control-line-height);margin:var(--jfi-form-control-margin);padding:var(--jfi-form-control-padding)}*::part(input):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}";
-const JustifiBillingFormStyle0 = billingFormCss;
-
-const BillingForm = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-        this.legend = undefined;
-        this.formController = undefined;
-        this.billingInfo = undefined;
-        this.errors = {};
-    }
-    componentWillLoad() {
-        this.formController = new index_esm.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 (index.h(styledHost.StyledHost, { key: '221838c3ba8255b62db0f2feee7b227b0d240627', exportparts: "label,input,input-invalid" }, index.h("form", { key: '87377d7776c3fdf7ffa351f25522921b233dd16f' }, index.h("fieldset", { key: '821487e408ec634dd23417604f02f1aa212dcb2a' }, this.legend && index.h("legend", { key: 'c042f51480e23ad455a6d3fc420f494c33d93f2c' }, this.legend), index.h("div", { key: '6a9f2c0fd10c7786b132f7208036cf878e3fe8c1', class: "row gy-3" }, index.h("div", { key: 'b375c19faeb23927e290c4a60b4347dc64868840', class: "col-12" }, index.h("form-control-text", { key: 'be3b78234607f996efe8971082ff457e63767e22', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: '95d3f3bb6ff7df39deb2967db11017e8f80ca5a9', class: "col-12" }, index.h("form-control-text", { key: '9e719038219bf7b7651679b617b2131ab5336289', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), index.h("div", { key: '0945bca70a70abfdce40c8d52537eb06479aface', class: "col-12" }, index.h("form-control-text", { key: '59b9b87c005609daf501b0d7d6a8d640297c75c4', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), index.h("div", { key: 'f3e9d8297e9e4009a0b16f331eeffb1316a92030', class: "col-12" }, index.h("form-control-text", { key: '158a4d2e3e85700a5c80304e0316391090b52f74', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), index.h("div", { key: '67110a816d76d4c98062859733def72e88f1a3d9', class: "col-12" }, index.h("form-control-select", { key: 'd26b22251d6da9d8f7b8bb109126e804cdfbccb0', name: 'address_state', label: 'State', options: stateOptions.StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), index.h("div", { key: 'a248ef0a4860d9d634f46e96cc953c8ca0ee64f1', class: "col-12" }, index.h("form-control-text", { key: '36f96a7e94088dd140ca9774903387ae2be3cad8', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: utils.numberOnlyHandler })))))));
-    }
-};
-BillingForm.style = JustifiBillingFormStyle0;
+const index = require('./index-5b9a3b5f.js');
+const formControlErrorText = require('./form-control-error-text-a2fd5fc1.js');
+const _package = require('./package-1a3b3cdf.js');
+const iframeInputStylesState = require('./iframe-input-styles-state-d0de0b24.js');
+const parts = require('./parts-811ddb9c.js');
+require('./index-d2d0b181.js');
 
 var iframeResizer = {exports: {}};
 
@@ -1557,73 +1503,6 @@ Please see https://iframe-resizer.com/upgrade for more details.
 
 const iFrameResize = iframeResizer.exports;
 
-const MessageEventType = {
-    card: {
-        ready: 'justifi.card.ready',
-        tokenize: 'justifi.card.tokenize',
-        validate: 'justifi.card.validate',
-        resize: 'justifi.card.resize',
-        styleOverrides: 'justifi.card.styleOverrides',
-    },
-    bankAccount: {
-        ready: 'justifi.bankAccount.ready',
-        tokenize: 'justifi.bankAccount.tokenize',
-        validate: 'justifi.bankAccount.validate',
-        resize: 'justifi.bankAccount.resize',
-        styleOverrides: 'justifi.bankAccount.styleOverrides',
-    },
-};
-
-const getComputedTheme = () => {
-    const computedStyles = getComputedStyle(document.body);
-    const computedTheme = {
-        loadGoogleFont: computedStyles.getPropertyValue('--jfi-load-google-font'),
-        layout: {
-            fontFamily: computedStyles.getPropertyValue('--jfi-layout-font-family'),
-            padding: computedStyles.getPropertyValue('--jfi-layout-padding'),
-            formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),
-            formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),
-        },
-        formControl: {
-            backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),
-            borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),
-            borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),
-            borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),
-            borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),
-            borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),
-            borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),
-            borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),
-            borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),
-            borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),
-            borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),
-            boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),
-            boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),
-            boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),
-            boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),
-            color: computedStyles.getPropertyValue('--jfi-form-control-color'),
-            colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),
-            fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),
-            fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),
-            lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),
-            margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),
-            padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),
-        },
-        formLabel: {
-            color: computedStyles.getPropertyValue('--jfi-form-label-color'),
-            fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),
-            fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),
-            fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),
-            margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),
-        },
-        errorMessage: {
-            color: computedStyles.getPropertyValue('--jfi-error-message-color'),
-            margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),
-            fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),
-        },
-    };
-    return computedTheme;
-};
-
 /**
  * This approach decouples the communication logic from PaymentMethodForm component,
  * making it cleaner, more maintainable, and easier to test
@@ -1657,90 +1536,104 @@ class FrameCommunicationService {
     }
 }
 
-const paymentMethodFormCss = ":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}iframe{width:1px;min-width:100%}";
-const JustifiPaymentMethodFormStyle0 = paymentMethodFormCss;
+const MessageEventType = {
+    tokenize: 'tokenize',
+    validate: 'validate',
+};
 
-const PaymentMethodForm = class {
+const IframeInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.paymentMethodFormReady = index.createEvent(this, "paymentMethodFormReady", 7);
-        this.paymentMethodFormValidated = index.createEvent(this, "paymentMethodFormValidated", 7);
-        this.paymentMethodFormTokenized = index.createEvent(this, "paymentMethodFormTokenized", 7);
-        this.computedTheme = getComputedTheme();
-        this.dispatchMessageEvent = (messageEvent) => {
-            const { eventType, data } = messageEvent.data;
-            const eventTypeMessage = MessageEventType[this.paymentMethodFormType];
-            if (eventType === eventTypeMessage.ready) {
-                this.paymentMethodFormReady.emit(data);
-                this.sendStyleOverrides();
+        this.dispatchMessageEvent = (event) => {
+            const { eventType, data } = event.data;
+            if ((data === null || data === void 0 ? void 0 : data.id) !== this.inputId) {
+                return;
             }
-            else if (eventType === eventTypeMessage.tokenize) {
-                this.paymentMethodFormTokenized.emit(data);
+            if (eventType === 'focused') {
+                this.isFocused = true;
             }
-            else if (eventType === eventTypeMessage.validate) {
-                this.paymentMethodFormValidated.emit(data);
+            if (eventType === 'blurred') {
+                this.isFocused = false;
             }
         };
-        this.postMessage = (eventType, payload) => {
-            this.frameService.postMessage(eventType, payload);
-        };
-        this.paymentMethodFormType = undefined;
-        this.paymentMethodFormValidationMode = undefined;
+        this.isFocused = false;
+        this.isValid = true;
+        this.errorText = undefined;
+        this.iframeLoaded = false;
+        this.inputId = undefined;
+        this.label = undefined;
         this.iframeOrigin = undefined;
-        this.singleLine = undefined;
     }
     disconnectedCallback() {
         this.frameService.removeMessageListener(this.dispatchMessageEvent);
     }
-    async resize() {
-        this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
+    async validate() {
+        const response = await this.frameService
+            .postMessageWithResponseListener(MessageEventType.validate);
+        this.isValid = response.isValid;
+        this.errorText = response.error.message;
+        return response;
     }
     async tokenize(clientId, paymentMethodMetadata, account) {
-        const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
-        return this.frameService.postMessageWithResponseListener(eventType, {
+        return this.frameService.postMessageWithResponseListener(MessageEventType.tokenize, {
             clientId,
             paymentMethodMetadata,
             account,
             componentVersion: _package.packageJson.version,
         });
     }
-    async validate() {
-        const eventType = MessageEventType[this.paymentMethodFormType].validate;
-        return this.frameService.postMessageWithResponseListener(eventType);
+    initializeFrameCommunicationService() {
+        var _a;
+        this.frameService = new FrameCommunicationService(this.iframeElement, this.iframeOrigin);
+        (_a = this.frameService) === null || _a === void 0 ? void 0 : _a.addMessageListener(this.dispatchMessageEvent);
     }
-    sendStyleOverrides() {
-        if (this.computedTheme) {
-            this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
+    get part() {
+        if (this.isFocused && !this.isValid) {
+            return parts.inputInvalidAndFocused;
         }
-    }
-    getIframeSrc() {
-        let paramsList = [];
-        if (this.paymentMethodFormValidationMode) {
-            paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);
+        if (!this.isValid) {
+            return parts.inputInvalid;
         }
-        if (this.singleLine) {
-            paramsList.push(`singleLine=${this.singleLine}`);
+        if (this.isFocused) {
+            return parts.inputFocused;
         }
-        let iframeSrc = `${this.iframeOrigin}/${this.paymentMethodFormType}${utils$1.composeQueryParams(paramsList)}`;
-        return iframeSrc;
+        return parts.input;
     }
-    initializeFrameCommunicationService() {
-        var _a;
-        this.frameService = new FrameCommunicationService(this.iframeElement, this.iframeOrigin);
-        (_a = this.frameService) === null || _a === void 0 ? void 0 : _a.addMessageListener(this.dispatchMessageEvent);
+    get style() {
+        if (this.isFocused) {
+            if (!this.isValid) {
+                return iframeInputStylesState.iframeInputStyles.focusedAndInvalid;
+            }
+            return iframeInputStylesState.iframeInputStyles.focused;
+        }
+        return null;
+    }
+    get urlParams() {
+        // map the iframeInputStyles.fontStyles properties to the urlParams 
+        // and encode each property with btoa
+        const encodedObject = Object.fromEntries(Object
+            .entries(iframeInputStylesState.iframeInputStyles.fontStyles)
+            .map(([key, value]) => [key, btoa(String(value))]));
+        const params = new URLSearchParams(encodedObject).toString();
+        return params;
     }
     render() {
-        return (index.h(index.Host, { key: '73a54aaa587c49fb9087160095c21f9945687d04' }, index.h("iframe", { key: '08c49fd1101a79521288fac3aa8aef375054d0e2', id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
+        return (index.h(index.Host, { key: 'c0eca45af47958837580cc400e923135db070e75', class: "form-group d-flex flex-column" }, index.h("div", { key: '374d757e67e81deec4d7e20255710d5256983cb6', style: {
+                visibility: this.iframeLoaded ? 'visible' : 'hidden',
+                height: this.iframeLoaded ? 'auto' : '0',
+            } }, index.h("label", { key: '6054db3876710458e93dd8a11f7354d737e737d2', class: "form-label", htmlFor: "", part: parts.label }, this.label || ''), index.h("div", { key: '2ccc97c83798026666fc0abc4d23e6d83b19b2fa', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, index.h("iframe", { key: 'c71d778eaf2008ee4a2b237842e1dbec7abf5d43', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
-            }, onLoad: () => {
+            }, width: "100%", onLoad: () => {
                 iFrameResize({
-                    scrollbars: false,
+                    log: false,
+                    onResized: () => {
+                        this.iframeLoaded = true;
+                    }
                 }, this.iframeElement);
-            } })));
+            } })), index.h(formControlErrorText.FormControlErrorText, { key: '6f756711fccec14a52fa55e9faf0638546e80f77', errorText: this.errorText, name: this.inputId }))));
     }
+    get el() { return index.getElement(this); }
 };
-PaymentMethodForm.style = JustifiPaymentMethodFormStyle0;
 
-exports.justifi_billing_form = BillingForm;
-exports.justifi_payment_method_form = PaymentMethodForm;
+exports.iframe_input = IframeInput;