@justifi/webcomponents 4.23.1 → 5.0.0-rc-1

package/dist/esm/{get-payout-csv-3b83b088.js → get-payout-csv-b95a5d54.js}

@@ -1,7 +1,7 @@
 import { A as Api } from './Api-391d00e2.js';
 import './Checkout-0b4086f8.js';
 import './Pagination-afc8f96d.js';
-import './Payment-2a868d0c.js';
+import './Payment-4f72d277.js';
 import './SubAccount-99a00594.js';
 import { c as config } from './config-27764a9d.js';
 import { C as ComponentErrorSeverity } from './ComponentError-3ce7f437.js';

package/dist/esm/{get-subaccounts-dd20cfa4.js → get-subaccounts-b9a00d48.js}

@@ -1,7 +1,7 @@
 import { A as Api } from './Api-391d00e2.js';
 import './Checkout-0b4086f8.js';
 import './Pagination-afc8f96d.js';
-import './Payment-2a868d0c.js';
+import './Payment-4f72d277.js';
 import { S as SubAccount } from './SubAccount-99a00594.js';
 import { c as config } from './config-27764a9d.js';
 import { C as ComponentErrorSeverity } from './ComponentError-3ce7f437.js';

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

@@ -1,6 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-57431c24.js';
-import { b as formatCurrency, d as formatDisplayDate } from './utils-1df1e55a.js';
-import { E as ErrorState, L as LoadingState } from './utils-218275b7.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-29fcfdf5.js';
+import { b as formatCurrency, e as formatDisplayDate } from './utils-54543523.js';
+import { E as ErrorState } from './utils-d7633e66.js';
+import { S as Spinner } from './spinner-879489b3.js';
+import './parts-186d437f.js';
 
 /*!
  * @kurkle/color v0.3.2
@@ -10970,9 +10972,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) {
@@ -11041,13 +11040,12 @@ const GrossPaymentChartCore = class {
         }
     }
     render() {
-        return (h(Host, { key: '80dfc1ae805ac7e1d34222037de6f492feabf619' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: 'ac73fa9c5543c6c9b7170ccc99d1a48b2e1d28b5' }, this.loading && h(Spinner, { key: 'eb847368027fef8f004c913d0a09cf692f493ce3' }), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get watchers() { return {
         "getGrossPayment": ["propChanged"],
         "grossVolumeReport": ["grossVolumeReportChanged"]
     }; }
 };
-GrossPaymentChartCore.style = GrossPaymentChartCoreStyle0;
 
 export { GrossPaymentChartCore as gross_payment_chart_core };

package/dist/esm/header-1-c6a00a22.js

@@ -0,0 +1,8 @@
+import { h } from './index-29fcfdf5.js';
+import { e as heading1 } from './parts-186d437f.js';
+
+const Header1 = (props) => {
+    return h("h1", { class: `header-1 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading1 }, props.text);
+};
+
+export { Header1 as H };

package/dist/esm/header-3-a1c6d475.js

@@ -0,0 +1,8 @@
+import { h } from './index-29fcfdf5.js';
+import { v as heading3 } from './parts-186d437f.js';
+
+const Header3 = (props) => {
+    return h("h3", { class: `header-3 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading3 }, props.text);
+};
+
+export { Header3 as H };

package/dist/esm/iframe-input-styles-state-ff730fe5.js

@@ -0,0 +1,23 @@
+import { c as createStore } from './index-a47fdc7f.js';
+
+const iframeInputStylesStore = createStore({
+    focused: {
+        boxShadow: '',
+        border: '',
+    },
+    focusedAndInvalid: {
+        boxShadow: '',
+        border: '',
+    },
+    fontStyles: {
+        fontFamily: '',
+        fontSize: '',
+        fontWeight: '',
+        lineHeight: '',
+        margin: '',
+        padding: '',
+    },
+});
+const { state: iframeInputStyles, on: iframeInputStylesOn, set: iframeInputStylesSet, } = iframeInputStylesStore;
+
+export { iframeInputStyles as a, iframeInputStylesSet as i };

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

@@ -1,63 +1,9 @@
-import { r as registerInstance, h, c as createEvent, H as Host } from './index-57431c24.js';
-import { c as create$3, F as FormController } from './index.esm-ed37201b.js';
-import { u as identityNameValidation, l as lineOneValidation, k as lineTwoValidation, m as cityValidation, n as stateValidation, q as postalValidation } from './schema-validations-93a9d504.js';
-import { S as StateOptions } from './state-options-a356fb11.js';
-import { n as numberOnlyHandler } from './utils-20cdf321.js';
-import { S as StyledHost } from './styled-host-e0ddb759.js';
-import { p as packageJson } from './package-627f73c1.js';
-import { c as composeQueryParams } from './utils-4006c425.js';
-import './business-form-options-d790973e.js';
-import './Business-b73d5055.js';
-import './helpers-96ea3464.js';
-
-const BillingFormSchema = create$3({
-    name: identityNameValidation.required('Enter full name'),
-    address_line1: lineOneValidation.required('Enter street address'),
-    address_line2: lineTwoValidation.nullable(),
-    address_city: cityValidation.required('Enter city'),
-    address_state: stateValidation.required('Select state'),
-    address_postal_code: 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) {
-        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 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: '221838c3ba8255b62db0f2feee7b227b0d240627', exportparts: "label,input,input-invalid" }, h("form", { key: '87377d7776c3fdf7ffa351f25522921b233dd16f' }, h("fieldset", { key: '821487e408ec634dd23417604f02f1aa212dcb2a' }, this.legend && h("legend", { key: 'c042f51480e23ad455a6d3fc420f494c33d93f2c' }, this.legend), h("div", { key: '6a9f2c0fd10c7786b132f7208036cf878e3fe8c1', class: "row gy-3" }, h("div", { key: 'b375c19faeb23927e290c4a60b4347dc64868840', class: "col-12" }, h("form-control-text", { key: 'be3b78234607f996efe8971082ff457e63767e22', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '95d3f3bb6ff7df39deb2967db11017e8f80ca5a9', class: "col-12" }, h("form-control-text", { key: '9e719038219bf7b7651679b617b2131ab5336289', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: '0945bca70a70abfdce40c8d52537eb06479aface', class: "col-12" }, 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 })), h("div", { key: 'f3e9d8297e9e4009a0b16f331eeffb1316a92030', class: "col-12" }, h("form-control-text", { key: '158a4d2e3e85700a5c80304e0316391090b52f74', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: '67110a816d76d4c98062859733def72e88f1a3d9', class: "col-12" }, h("form-control-select", { key: 'd26b22251d6da9d8f7b8bb109126e804cdfbccb0', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: 'a248ef0a4860d9d634f46e96cc953c8ca0ee64f1', class: "col-12" }, 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: numberOnlyHandler })))))));
-    }
-};
-BillingForm.style = JustifiBillingFormStyle0;
+import { r as registerInstance, h, H as Host, g as getElement } from './index-29fcfdf5.js';
+import { F as FormControlErrorText } from './form-control-error-text-3b2553b5.js';
+import { p as packageJson } from './package-84f77b11.js';
+import { a as iframeInputStyles } from './iframe-input-styles-state-ff730fe5.js';
+import { i as inputInvalidAndFocused, b as inputInvalid, a as inputFocused, c as input, l as label } from './parts-186d437f.js';
+import './index-a47fdc7f.js';
 
 var iframeResizer = {exports: {}};
 
@@ -1553,73 +1499,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
@@ -1653,89 +1532,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) {
         registerInstance(this, hostRef);
-        this.paymentMethodFormReady = createEvent(this, "paymentMethodFormReady", 7);
-        this.paymentMethodFormValidated = createEvent(this, "paymentMethodFormValidated", 7);
-        this.paymentMethodFormTokenized = 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: 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 inputInvalidAndFocused;
         }
-    }
-    getIframeSrc() {
-        let paramsList = [];
-        if (this.paymentMethodFormValidationMode) {
-            paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);
+        if (!this.isValid) {
+            return inputInvalid;
         }
-        if (this.singleLine) {
-            paramsList.push(`singleLine=${this.singleLine}`);
+        if (this.isFocused) {
+            return inputFocused;
         }
-        let iframeSrc = `${this.iframeOrigin}/${this.paymentMethodFormType}${composeQueryParams(paramsList)}`;
-        return iframeSrc;
+        return 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 iframeInputStyles.focusedAndInvalid;
+            }
+            return 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(iframeInputStyles.fontStyles)
+            .map(([key, value]) => [key, btoa(String(value))]));
+        const params = new URLSearchParams(encodedObject).toString();
+        return params;
     }
     render() {
-        return (h(Host, { key: '73a54aaa587c49fb9087160095c21f9945687d04' }, h("iframe", { key: '08c49fd1101a79521288fac3aa8aef375054d0e2', id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
+        return (h(Host, { key: 'c0eca45af47958837580cc400e923135db070e75', class: "form-group d-flex flex-column" }, h("div", { key: '374d757e67e81deec4d7e20255710d5256983cb6', style: {
+                visibility: this.iframeLoaded ? 'visible' : 'hidden',
+                height: this.iframeLoaded ? 'auto' : '0',
+            } }, h("label", { key: '6054db3876710458e93dd8a11f7354d737e737d2', class: "form-label", htmlFor: "", part: label }, this.label || ''), 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' }) }, 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);
-            } })));
+            } })), h(FormControlErrorText, { key: '6f756711fccec14a52fa55e9faf0638546e80f77', errorText: this.errorText, name: this.inputId }))));
     }
+    get el() { return getElement(this); }
 };
-PaymentMethodForm.style = JustifiPaymentMethodFormStyle0;
 
-export { BillingForm as justifi_billing_form, PaymentMethodForm as justifi_payment_method_form };
+export { IframeInput as iframe_input };

package/dist/esm/{index-57431c24.js → index-29fcfdf5.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'webcomponents';
-const BUILD = /* webcomponents */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* webcomponents */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: false, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -58,9 +58,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     return importedModule[exportName];
   }, consoleError);
 };
-
-// src/client/client-style.ts
-var styles = /* @__PURE__ */ new Map();
 var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
@@ -92,14 +89,6 @@ var supportsListenerOptions = /* @__PURE__ */ (() => {
   return supportsListenerOptions2;
 })();
 var promiseResolve = (v) => Promise.resolve(v);
-var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
-  try {
-    new CSSStyleSheet();
-    return typeof new CSSStyleSheet().replaceSync === "function";
-  } catch (e) {
-  }
-  return false;
-})() ;
 var queuePending = false;
 var queueDomReads = [];
 var queueDomWrites = [];
@@ -363,72 +352,6 @@ var emitEvent = (elm, name, opts) => {
   elm.dispatchEvent(ev);
   return ev;
 };
-var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
-var registerStyle = (scopeId2, cssText, allowCS) => {
-  let style = styles.get(scopeId2);
-  if (supportsConstructableStylesheets && allowCS) {
-    style = style || new CSSStyleSheet();
-    if (typeof style === "string") {
-      style = cssText;
-    } else {
-      style.replaceSync(cssText);
-    }
-  } else {
-    style = cssText;
-  }
-  styles.set(scopeId2, style);
-};
-var addStyle = (styleContainerNode, cmpMeta, mode) => {
-  var _a;
-  const scopeId2 = getScopeId(cmpMeta);
-  const style = styles.get(scopeId2);
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
-  if (style) {
-    if (typeof style === "string") {
-      styleContainerNode = styleContainerNode.head || styleContainerNode;
-      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-      let styleElm;
-      if (!appliedStyles) {
-        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
-      }
-      if (!appliedStyles.has(scopeId2)) {
-        {
-          styleElm = doc.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
-          if (nonce != null) {
-            styleElm.setAttribute("nonce", nonce);
-          }
-          styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector("link"));
-        }
-        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
-          styleElm.innerHTML += SLOT_FB_CSS;
-        }
-        if (appliedStyles) {
-          appliedStyles.add(scopeId2);
-        }
-      }
-    } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
-      styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
-    }
-  }
-  return scopeId2;
-};
-var attachStyles = (hostRef) => {
-  const cmpMeta = hostRef.$cmpMeta$;
-  const elm = hostRef.$hostElement$;
-  const flags = cmpMeta.$flags$;
-  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  const scopeId2 = addStyle(
-    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
-    cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */) {
-    elm["s-sc"] = scopeId2;
-    elm.classList.add(scopeId2 + "-h");
-  }
-  endAttachStyles();
-};
-var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
   if (oldValue !== newValue) {
     let isProp = isMemberInElement(elm, memberName);
@@ -1093,9 +1016,6 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
   const rc = elm["s-rc"];
-  if (isInitialLoad) {
-    attachStyles(hostRef);
-  }
   const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
   {
     callRender(hostRef, instance, elm, isInitialLoad);
@@ -1377,18 +1297,6 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       const cmpTag = elm.localName;
       customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
     }
-    if (Cstr && Cstr.style) {
-      let style;
-      if (typeof Cstr.style === "string") {
-        style = Cstr.style;
-      }
-      const scopeId2 = getScopeId(cmpMeta);
-      if (!styles.has(scopeId2)) {
-        const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
-        registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
-        endRegisterStyles();
-      }
-    }
   }
   const ancestorComponent = hostRef.$ancestorComponent$;
   const schedule = () => scheduleUpdate(hostRef, true);

package/dist/esm/{insurance-state-8ce01e59.js → index-a47fdc7f.js}

@@ -1,4 +1,4 @@
-import { a as getRenderingRef, f as forceUpdate } from './index-57431c24.js';
+import { a as getRenderingRef, f as forceUpdate } from './index-29fcfdf5.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -191,23 +191,4 @@ const createStore = (defaultState, shouldUpdate) => {
     return map;
 };
 
-const insuranceValuesStore = createStore({});
-const { state: insuranceValues, on: insuranceValuesOn } = insuranceValuesStore;
-const insuranceErrorsStore = createStore({});
-const { state: insuranceErrors } = insuranceErrorsStore;
-const validateInsuranceValues = () => {
-    let valid = true;
-    Object.keys(insuranceValues).forEach((key) => {
-        const noSelection = insuranceValues[key] === null;
-        if (noSelection) {
-            insuranceErrors[key] = true;
-            valid = false;
-        }
-        else {
-            insuranceErrors[key] = false;
-        }
-    });
-    return { isValid: valid };
-};
-
-export { insuranceValues as a, insuranceErrors as b, insuranceValuesOn as i, validateInsuranceValues as v };
+export { createStore as c };

package/dist/esm/{index.esm-ed37201b.js → index.esm-0b6849c2.js}

@@ -718,7 +718,7 @@ class FormController {
     async validateAndSubmit(submitHandler, context) {
         const isValid = await this.validate(context || {});
         if (isValid) {
-            submitHandler();
+            submitHandler(this._values);
         }
     }
     setInitialValues(values) {

package/dist/esm/insurance-state-8fc9376f.js

@@ -0,0 +1,28 @@
+import { h } from './index-29fcfdf5.js';
+import { h as heading2 } from './parts-186d437f.js';
+import { c as createStore } from './index-a47fdc7f.js';
+
+const Header2 = (props) => {
+    return h("h2", { class: `header-2 ${props === null || props === void 0 ? void 0 : props.class}`, part: heading2 }, props.text);
+};
+
+const insuranceValuesStore = createStore({});
+const { state: insuranceValues, on: insuranceValuesOn } = insuranceValuesStore;
+const insuranceErrorsStore = createStore({});
+const { state: insuranceErrors } = insuranceErrorsStore;
+const validateInsuranceValues = () => {
+    let valid = true;
+    Object.keys(insuranceValues).forEach((key) => {
+        const noSelection = insuranceValues[key] === null;
+        if (noSelection) {
+            insuranceErrors[key] = true;
+            valid = false;
+        }
+        else {
+            insuranceErrors[key] = false;
+        }
+    });
+    return { isValid: valid };
+};
+
+export { Header2 as H, insuranceValues as a, insuranceErrors as b, insuranceValuesOn as i, validateInsuranceValues as v };