@justifi/webcomponents 5.7.3 → 5.7.4-rc-01

package/dist/collection/components/payouts-list/payouts-list.js

@@ -64,7 +64,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '922ee0ed12294b66d854d28aa18a06dc0438c662' }, h("payouts-list-core", { key: 'cc0557c8fdc14b16df203a6a648c3381a6ff2c13', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: 'cb3d9f45b26f10dcb3e4f230655e3dbcb9169e66' }, h("payouts-list-core", { key: '0099531b4747cc5b04741ed7fc12cf5f2add028e', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/terminal-orders-list/terminal-orders-list-core.js

@@ -81,7 +81,7 @@ export class TerminalOrdersListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '5d03d7f992d4918b6174d89aa67ac87159b0918d' }, h(TableComponent, { key: '30dfd6db82678f7c8e25ee03619403bf0a73ad47' }, h(TableHead, { key: '3e51fd3124abf93a1a76ac6d6b66ec64edf30216' }, h(TableHeadRow, { key: '170385237e96ba55aa21c954bff4f74a7724463b' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: 'c313d42ae1ad3f54a806f8965b8ff99616df85ab' }, h(TableLoadingState, { key: '7f01919e6120a497383990bafb8288fec806f421', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'e6585de336bb6cfe0f7bddc4bd503cf5632481da', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '3490d034636506fdd54c748bff98596baed09673', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '52ba4b6e8c0d2afcded3feaaf6a22927036b96fa' }, h(TableFootRow, { key: '8fccd42dc633300f5e6664ff380c3828010ff6ec' }, h(TableFootCell, { key: '7937c9bceb54abe450e9b7956bd2599de228cc8b', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '90854b93870cb20251488fd15e936982245c3d3b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'aae9cc67cadd3989bfe35b4a029f6838e0d1ab54' }, h(TableComponent, { key: 'e5fe37a91442392ed811478fae42686abdd0f764' }, h(TableHead, { key: '7ec41066cd103cbc7846fd957ffb7fa3f6a92318' }, h(TableHeadRow, { key: '17291d4aa59ea50de7e2d1e6d302a4bea8c2989c' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: '020a2ce88efdb3223a02a01f5eeb2d5d743e1e29' }, h(TableLoadingState, { key: '8d104a25063bed6d617d0eda6cff9591ce9f81d2', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '1ff344e0a586b616fea6fda64c4f7a9b0071285a', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '97dd1548d785d0c300f8fe48ebc3db906a1977c9', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '95b22129c05b799281992eb2656a94b012cdfdda' }, h(TableFootRow, { key: 'b17eaaf582cea7dc7732b0fedd3e5d013737111b' }, h(TableFootCell, { key: '1ec85f78971ed79021aa1eec527edc59c8dfbb09', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '08c14ef23e528575927210859e7cd46f21c77d7c', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "terminal-orders-list-core"; }
     static get properties() {

package/dist/collection/components/terminal-orders-list/terminal-orders-list-filters.js

@@ -47,8 +47,8 @@ export class TerminalOrdersListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'e8bd98c43f44e2c562fb4dbe08cf90a9dd8063e4' }, h("table-filters-menu", { key: '8c865c53a9bd45a251ae8eb75d31ab47228ca014', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: 'b415d03966e45cb993c544f6205adc2f3611d5da', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '7b483dd1d2254c8e3d45d6e1af4d45a839f8bdd8', class: "p-2" }, h("form-control-select", { key: '5f929730acb0c28da920f1d283d43108f06e29cb', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status, disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: '05242bf5293256a3214ce11771f1df9d5341a095', class: "p-2" }, h("form-control-select", { key: 'dac5bbd765aed70530801395449463d6f85582fe', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type, disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: '307842201ff7a5367de2857a7a59e612bb0e7976', class: "p-2" }, h("form-control-date", { key: '4dec0bead1d09989b4a1a20c128573c299b84e41', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalOrdersListFilterParam })), h("div", { key: '8ed2b9b5287221b8f521f5f05cec5e1808fed19f', class: "p-2" }, h("form-control-date", { key: 'a318ad6e0b426ef14470ee479f48d57b5b00ce2c', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '87569a0fbda61171597ae34502830a7689576c83' }, h("table-filters-menu", { key: '7fefbf17edeef40d13f34bd634e19afc1c3da9d7', params: filterMenuParams, clearParams: clearParams, part: terminalOrdersListFilterMenu }, h("div", { key: '450de24e20ce880d93045c1d549e996db865d1d4', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'c3092da2cf616bea443603cfbca4924e58d281ee', class: "p-2" }, h("form-control-select", { key: '19746e7161033e740eb587cecf091b65e8d59246', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status, disabled: !!this.orderStatus, part: orderStatusTerminalOrdersListFilterParam })), h("div", { key: '4cde261675fe5295798905ae6da64ef63d0b85d4', class: "p-2" }, h("form-control-select", { key: '1ca5fd3cdac0af84dff9e58afe73584d62e049d3', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type, disabled: !!this.orderType, part: orderTypeTerminalOrdersListFilterParam })), h("div", { key: '001ec15d42b32b24e43f60a8e863f16539c272ea', class: "p-2" }, h("form-control-date", { key: 'eac9a1727d07629210952c1f25bd8ef5536c2a83', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterTerminalOrdersListFilterParam })), h("div", { key: '1ca6e942ed3ae19693542d73b074398e9b342005', class: "p-2" }, h("form-control-date", { key: 'fa02bc32fae8e9b3fa5cade5e20839062b64c754', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforeTerminalOrdersListFilterParam }))))));
     }
     static get is() { return "justifi-terminal-orders-list-filters"; }

package/dist/collection/components/terminal-orders-list/terminal-orders-list.js

@@ -43,7 +43,7 @@ export class TerminalOrdersList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '3d9d1cf5051c5db194fb740370f655cec0495e07' }, h("terminal-orders-list-core", { key: 'dacc4dacf8c6cf91e9527916667fa5d716fc792a', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '99fc0c7d8dccf1e8dd28aaeb9238097e78e0f4db' }, h("terminal-orders-list-core", { key: 'bbe636dea934044fced1306e8662d48580222387', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminal-orders-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/terminals-list/terminals-list-core.js

@@ -118,7 +118,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '18758ce4d79c07564b15f9712762232fa8ea2083' }, h(TableComponent, { key: '70c5d623cf89ed440e0bb318c4be1c1c022f90e9' }, h(TableHead, { key: '3a2ec16691dddf82a9988b970506576680885106' }, h(TableHeadRow, { key: '8fc7f8fcb219a0e577e67e5694ff818801477a2c' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: 'e65e2646a51cb8859a77a13a4fb79b0ca57066b7' }, h(TableLoadingState, { key: '5a50acb1101958238077a3a26307f2252aed5584', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c79793063bef320ca258988880da5fc305200456', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '758ab1f9f3660f292f4421b940d040d6408f45ca', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'e88243106332270c051599905cf61b20c05637ac' }, h(TableFootRow, { key: '4c1e2dca2100a5010b8fcae7cb42e44cde5e0128' }, h(TableFootCell, { key: 'e8ce9acc75921d176f265e6a6f89398f86c911b0', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '9930d2573e46628637eb12034cb966d69b3b43b9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'e7dea8ca296d3f1c9264a49bcecf0971b26b9352' }, h(TableComponent, { key: 'e8fc49665778f89a15a88758d108217271377085' }, h(TableHead, { key: '6c042632f4a28d710c4ed7eb3d0a1e740c03e3c5' }, h(TableHeadRow, { key: 'a960ae979f470294e9859080c3080cdd58a40bab' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '838dca2dff4ffcfa04f4d3cfde24ef5d9b78c18c' }, h(TableLoadingState, { key: '699419fd8e8b03fad375fc486b663fdc989ba2b6', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '2c678fd361260fb54d184ba19d9102a9b397bc8b', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '612819351b2603c4630246406d8a902c1107303e', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '64c54e89bb6613ba99c9fb75c0d577801548d9f3' }, h(TableFootRow, { key: '5f61c44bfa0791af980f27ffab70e815aed79882' }, h(TableFootCell, { key: 'fbd55acc1a33461373c84a84ef1ef4626bb182d1', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '83e3e5a448b05a33e31d043d6adf2322a089aced', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "terminals-list-core"; }
     static get properties() {

package/dist/collection/components/terminals-list/terminals-list-filters.js

@@ -35,7 +35,7 @@ export class TerminalsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '4d3d629e79524a5af3cdaa53a9cf4495adbb1432' }, h("table-filters-menu", { key: 'd49e21e577afc1a4975b0d860a52937772b65e48', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '0b56a893f0eba5947721b0ca9279b0d2d0e249f3', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '0f037e3d28e052423451b64fc54f551a1e78993c', class: "p-2" }, h("form-control-text", { key: '52fdf6336a67d203ef29ad4d5f3ec53d7046f151', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '8aaabed2e0ba260298cd5ee0a699007d54d7deb3', class: "p-2" }, h("form-control-text", { key: 'a15fd5e5eef01ae360a0961abb64da458a64d04f', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: '5111cba84dc8685cde783235217e1be2cad8fd8f', class: "p-2" }, h("form-control-select", { key: '20c7c224ac401cb3a38f96bf25191fd62d0534f9', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: 'c8a9a83b3184a95474a428cfdb1135eadd680adb' }, h("table-filters-menu", { key: '4a4a12bbbdb3be98d61d177c02612c3213419b43', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '6d6cdf7dc4a24cdb6195f17989b17f91c43cd064', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '158cb8665cdb140e25ed449d42fb147fb8da21bb', class: "p-2" }, h("form-control-text", { key: '33e06125bf7f7d5242a625aedae2c560f0cc6a8f', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '3d8ad10f63e16a847caf944fef9567819a77d422', class: "p-2" }, h("form-control-text", { key: 'd6217d8aa97f2c03a35fcd3d51cb42ed26e246a7', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: '2fbf61a905de7028371bcc4b3412f7cc00feb4f9', class: "p-2" }, h("form-control-select", { key: '55a297af239e4e09e4d89c06a9c2d1a90fa7ff1e', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
     }
     static get is() { return "justifi-terminals-list-filters"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/terminals-list/terminals-list.js

@@ -61,7 +61,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '8c81823f7a3c613fc1725a8c4fe3438f6186f4fe' }, h("terminals-list-core", { key: '13c38992d9e101955d39065985b6c6b22b5ace9e', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'fd66e35b3ef7396cda794cf025aded020c39c0e4' }, h("terminals-list-core", { key: 'f6452fa39029743a7858ed84ba83764ca7dfdcca', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminals-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tokenize-payment-method/tokenize-payment-method.js

@@ -3,6 +3,7 @@ import { Button, StyledHost } from "../../ui-components";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import JustifiAnalytics from "../../api/Analytics";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api";
+import checkoutStore from "../../store/checkout.store";
 export class TokenizePaymentMethod {
     constructor() {
         this.submitButtonText = 'Submit';
@@ -11,6 +12,12 @@ export class TokenizePaymentMethod {
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
+        if (!this.authToken) {
+            this.authToken = checkoutStore.authToken;
+        }
+        if (!this.accountId) {
+            this.accountId = checkoutStore.accountId;
+        }
     }
     disconnectedCallback() {
         var _a;
@@ -52,7 +59,7 @@ export class TokenizePaymentMethod {
         return this.paymentMethodOptionsRef.validate();
     }
     render() {
-        return (h(StyledHost, { key: '9f12f7a83b2cb06c83694454ea5884bd7392eb83' }, h("form", { key: '0a0a4b4a049aa85863ef5c65313b89ebf58455c5' }, h("fieldset", { key: 'c35ed423483d49615f9ebe500fcef405394f4eb6' }, h("div", { key: '80419e9ca3431d9d75cffc958daab84a2c232f49', class: "row gy-3" }, h("div", { key: 'bd465d8b364c1bc46a6a3dee3fb74087bc087580', class: "col-12" }, h("justifi-payment-method-options", { key: 'c363e501622ef81c78a728ebbd15a3a4cd89867a', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: 'ad252991a12f6d21a012b6422ecaae13412f789b', class: "col-12" }, h(Button, { key: '4bb1dcdfeb71c21d3268c11fabd1ab92b43fca5e', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
+        return (h(StyledHost, { key: '28bbe8fe3e9af2ced36216f5c5a4951daa82b4db' }, h("form", { key: '1aac4f1f0045a6b36160874afe650afdfcc68d14' }, h("fieldset", { key: 'cea4c054fbcb6e3cdd7eec1e6fd528c3a82eb24f' }, h("div", { key: '08fc6dd0621d9392d8236f7b75906c84a4ffc420', class: "row gy-3" }, h("div", { key: '54eeca6b19dbc25126312e4492d24e58e636c4f4', class: "col-12" }, h("justifi-payment-method-options", { key: 'c985cb5c1888ad62e45d51c8bcd60cac22115ea6', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: '1c5006de7b3dd8872d100dbaba94a1f73bd9682f', class: "col-12" }, h(Button, { key: 'efc638ef35650335e7408b1dc5433f9ecb4f22ac', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get encapsulation() { return "shadow"; }
@@ -68,7 +75,7 @@ export class TokenizePaymentMethod {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -87,7 +94,7 @@ export class TokenizePaymentMethod {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""

package/dist/collection/store/checkout.store.js

@@ -0,0 +1,25 @@
+import { createStore } from "@stencil/store";
+const initialState = {
+    authToken: '',
+    accountId: '',
+    paymentMethods: [],
+    paymentMethodGroupId: '',
+    paymentDescription: '',
+    totalAmount: 0,
+    paymentAmount: 0,
+    selectedPaymentMethod: '',
+    checkoutId: '',
+    bnplEnabled: false,
+    bnplProviderClientId: '',
+    bnplProviderMode: '',
+    bnplProviderApiVersion: '',
+    bnplProviderCheckoutUrl: '',
+};
+const { state, onChange } = createStore(initialState);
+Object.keys(initialState).forEach((key) => {
+    // @ts-ignore
+    onChange(key, (newValue) => {
+        state[key] = newValue;
+    });
+});
+export default state;

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

@@ -80,7 +80,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '7ef56b941bf884c5a1416b373372748374bb204a' }, h("style", { key: 'ac2a710bea0939dd7f279968cfd33d789eba3a08' }, `
+        return (h("div", { key: 'f0fa57ab03b7b98fbf1f869ebae9410bab1b4e5f' }, h("style", { key: 'f8e39710d856d83d393713f0dbe42b404e60f1d8' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +88,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: 'f34a15bd8122833ed8b188cd0519588f2da78bb9', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '54d97c9be7fe9c33584156569c927e2108cab331' }))));
+          `), h("div", { key: '74550d809cb22ddc60ab2762c6f0ea7914b05865', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '37b78e823f0bec6ebbe7a4d3dd2f177ec96a647a' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

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

@@ -31,10 +31,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: 'ec1a11fd6b5d97b4a6136b91b750c0fde7f9e7fd' }, h("div", { key: 'b56aa5fb171204bcebffa8aa22e8b5cc7ae8daf1', class: 'form-group d-flex flex-column' }, h("div", { key: 'da21623174fbc8fca6f063771f234f755945a838', class: "form-check" }, h("input", { key: 'f78acb43994063f81d823907378b9aa71a752f66', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'a3b0fd8435bde51d1e2e0aaa0e322f10c599d60b' }, h("div", { key: '1bf5c142fc98a80f66bb51343bcd2aa8ece2376a', class: 'form-group d-flex flex-column' }, h("div", { key: '7e006d94b3716d4a93239e4f5e9e5f0058e5f460', class: "form-check" }, h("input", { key: '29d7b5552ce996fea4b71be9745372aa6804890f', 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: '7ae4a71d065ef48cc261a4850b6baac79640836c', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'cb50d3eebf345d1db44cf377da8b3c1f709b733c', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '20990b29fe22a5126a304788feb2c0498fb4925b', 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: '9731752e9eabd937800492a9ae9f64a96deebb5a', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'd333c061d00a23f0ef368e54094989cd7b892229', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'ec2734c748e851499d6699e7acb32bb74a04e256', 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

@@ -42,10 +42,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '5360f4917c4af8d4e40522a25e838703d8374480' }, h("div", { key: '56a3a99c81ebbf00d1ff5befa1a96363660806ae', class: "form-group d-flex flex-column" }, h("div", { key: '5556531a79f39fecd1cc4027568bc3642f68ed68', class: "d-flex gap-2" }, h("label", { key: 'b722b7e91adaf94c57698cf5743d43d8cbb04957', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '109aabf5047eebe8254ed49379b297af05f68ac2', helpText: this.helpText })), h("input", { key: 'eb9862be33313981dccda15889d315893344ff41', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '8b7c599df49cd5f6cd113a6dee5b85309488b581' }, h("div", { key: '17acab0e5128fc00e15e2f3cc1714de968f8f635', class: "form-group d-flex flex-column" }, h("div", { key: '7ffaab5a1c8d6a8d2ae06937ae06bddfdd3e4d42', class: "d-flex gap-2" }, h("label", { key: 'd4ca9a70d58d6d34fe9a2f104f1e022025b52bf3', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c352a7b657e47f39d40a1a7b058b0b7a5b55e8e4', helpText: this.helpText })), h("input", { key: 'c1e0946e86137b27a17d690d475058b6c687b652', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '01217373b82eee84fae370f504cfee157c6f83ec', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '2324adaf7553fbcb65eaf1a0dbc7eed0c1d7208c', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

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

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

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

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

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

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

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

@@ -59,10 +59,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '328a9d2bf17d2ec2a8a9fa5acf6bbe76af38a38a' }, h("div", { key: '24d1757d7d554ac65e7c2413490425ca3d06aefc', class: "form-group d-flex flex-column" }, h("div", { key: '4548a8ee8d7538f2c3b7ddb0d76ec8c7342cc88a', class: "d-flex align-items-start gap-2" }, h("label", { key: 'c58ccd5ecb756e084a30d9686603e54487bf34ab', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '50d1aeed268375b7b2a9845065ccdc4e1dc5a495', helpText: this.helpText })), h("input", { key: 'ed473e972cc773b9a914dde41d9bff2d8880c604', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: 'cb63ba287e7fc1ee36b212118b137c6cf3b655b5' }, h("div", { key: 'db73b8a97ea151737018354f24f0e4f0efad92da', class: "form-group d-flex flex-column" }, h("div", { key: '833c67c07e655d7394b9a262ecfc90f9c28fa06b', class: "d-flex align-items-start gap-2" }, h("label", { key: 'cb21d0026c79860ae7b03b311832c2bc5d1541ba', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '25e97d3cfe5611fdfbb31dee90a5c9a284beaf18', helpText: this.helpText })), h("input", { key: 'a1eaaa42cac4325eea57a5814611af3dfada4270', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '6e02db8068b1df62e757de4dd7df5673ad375180', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '9a412bb22888801d7a5ae67f5d840d9b46525e5e', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

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

@@ -36,10 +36,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '575b10375e81774d2ce099cb9f79960fe530ea71' }, h("div", { key: '6f23da58c5fbf994dbf814022ab99668c0c71f77', class: 'form-group d-flex flex-column' }, h("label", { key: '4b19d3067770ce1523e88a7f701a0e193098eb5f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'e6331df9a0484fa12e05d63b3b45af3a9d8b0993', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '01d3a08bbd6dc5aab1a2da27007ba35585d8c97b' }, h("div", { key: '78ca32dadb2a598846266ae595ef156d0cedc66f', class: 'form-group d-flex flex-column' }, h("label", { key: '8a7e94d0dbc675f2ade59b984b4eb609323fd227', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '61cc9f3fbe322d4e14e54750809b2e1572b14ff2', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '55ef88b41cea29d14df3412a9743685114cfda13', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'efad443056dba5b77f86da12854b2a3668c101cd', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '9ff16beb0781040517f8e54fe5d46c2df4cc817e', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '2f77c35f2738fb792956e8723670f77354896d59', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

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

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

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

@@ -35,10 +35,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f55283c73225466b10cec78e6e5ff1c268142d1b' }, h("div", { key: '48beb377ca664b867598f8e472a3bb4825aecf9b', class: "form-group d-flex flex-column" }, h("div", { key: '13debfb6a725d7f247eb5601e3361a3964b826e9', class: "d-flex align-items-start gap-2" }, h("label", { key: '15ac64fb03a5c1cb8f55c18bd7eb41d66328e599', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '3d8b43ed6e997234f7c64daf41b2286bec93340e', helpText: this.helpText })), h("select", { key: '1c3eb5699a0b76c694a02fe50e8070483b2960e6', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '605b6cb9bfa7bac528ee0af9c4deb5e7b1356b93' }, h("div", { key: 'f8b42609971ff02c4bc147a113bb4a025d32bcd8', class: "form-group d-flex flex-column" }, h("div", { key: '26c87da7b92edbb7fd41825a4e64b642778d0808', class: "d-flex align-items-start gap-2" }, h("label", { key: '43ad562c323b586bf7ab0260258d8678ef3194aa', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1e4b1fa0e9bae57b6e783fb873de38c49ae7a8a4', helpText: this.helpText })), h("select", { key: 'bef2df140499a642ea9bf5bd3f6d7b558042e733', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: 'd223fd1fad44de99812b0e3a3429e3931b798c2c', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: '99abaaa766c1270cf1cfd926320d343393b13d1d', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

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

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

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

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

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

@@ -73,7 +73,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '32b302de9983db3ced26f1780bf116e63091b9ad' }, h("input", { key: 'c8fbe6dc11c8b743d307557aab107852403441ae', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+        return (h(Host, { key: '05e1f461fcdf006dc2b5db2b4c10450cd7db1c8c' }, h("input", { key: 'dc7589d1a68f7eb31c97281445448a8f2dcf3796', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
     }
     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: '7482645d98277dfb65e78a2003e020216fcb52c3', class: "form-group d-flex flex-column" }, h("div", { key: '746fca9a555309152d5cf3943d31d3b3b2c9bfde', style: {
+        return (h(Host, { key: '2af3e5fa30d517f882488289c4b547c28adae089', class: "form-group d-flex flex-column" }, h("div", { key: '361be04621a8cc152701744a1a06692cc8740fec', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '55b203e278ec100baf7949a91eb6a43135c82402', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'c3dd73db2accf012c5a8f3a5c8e32863fe87fd73', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '5eb7c35da6ca7910ccf74a24d77ee47d6b4479f9', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '807e8814bbac8cd2e2b409367b3205238b8f7d1c', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '0cfd76ca44133fd218542cd97391754d33c2b205', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '53eb1248d2596a306c6b36b41983fa51cba73fc4', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -90,7 +90,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: '291b487d0b798b6658d83b9c9f775ba4f02e09de', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '681f58f474a0c82c5b0b9888156865e0dd496477', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {
@@ -200,14 +200,14 @@ export class IframeInput {
             },
             "tokenize": {
                 "complexType": {
-                    "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+                    "signature": "(clientId: string, paymentMethodMetadata: IPaymentMethodMetadata, account?: string) => Promise<any>",
                     "parameters": [{
                             "name": "clientId",
                             "type": "string",
                             "docs": ""
                         }, {
                             "name": "paymentMethodMetadata",
-                            "type": "any",
+                            "type": "ISavedPaymentMethod & ISubmitCheckoutArgs",
                             "docs": ""
                         }, {
                             "name": "account",
@@ -218,6 +218,11 @@ export class IframeInput {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "IPaymentMethodMetadata": {
+                            "location": "import",
+                            "path": "../../api/PaymentMethod",
+                            "id": "src/api/PaymentMethod.ts::IPaymentMethodMetadata"
                         }
                     },
                     "return": "Promise<any>"