@zonos/elements 1.3.233 → 1.3.235

package/dist/cjs/zonos-invoice.cjs.entry.js

@@ -0,0 +1,468 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-69fa8852.js');
+const cart = require('./cart-22ced7cc.js');
+const invoice = require('./invoice-8fd4242c.js');
+const paypal = require('./paypal-4a086f84.js');
+const localization = require('./localization-8ef6250a.js');
+const zonosStore = require('./zonosStore-37a4b4f4.js');
+const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-edddbf4b.js');
+const handleFetch = require('./handleFetch-954f30e1.js');
+const isInvoiceMobileTablet = require('./isInvoiceMobileTablet-dde41e4e.js');
+const classes = require('./classes-b7918f56.js');
+const VarianceTest = require('./VarianceTest-bec00ea8.js');
+const ILanguage = require('./ILanguage-98b04442.js');
+require('./isDarkColor-878e600e.js');
+require('./getBorderRadius-2ef1170d.js');
+
+const ChevronDownIcon = `<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+
+const zonosInvoiceCss = ".sc-zonos-invoice-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-invoice-h *.sc-zonos-invoice{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-invoice-h img.sc-zonos-invoice{max-width:100%}.sc-zonos-invoice-h dl.sc-zonos-invoice,.sc-zonos-invoice-h dd.sc-zonos-invoice,.sc-zonos-invoice-h h1.sc-zonos-invoice,.sc-zonos-invoice-h h2.sc-zonos-invoice,.sc-zonos-invoice-h h3.sc-zonos-invoice,.sc-zonos-invoice-h h4.sc-zonos-invoice,.sc-zonos-invoice-h h5.sc-zonos-invoice,.sc-zonos-invoice-h h6.sc-zonos-invoice,.sc-zonos-invoice-h hr.sc-zonos-invoice,.sc-zonos-invoice-h figure.sc-zonos-invoice,.sc-zonos-invoice-h p.sc-zonos-invoice,.sc-zonos-invoice-h pre.sc-zonos-invoice{margin:0}.sc-zonos-invoice-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-invoice-h{z-index:2147483647;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;top:0;left:0;width:100%;height:100%;-ms-flex-align:center;align-items:center;background-color:var(--zonos-elements-gray-0)}.sc-zonos-invoice-h *.sc-zonos-invoice{-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-invoice-h *.sc-zonos-invoice::-webkit-scrollbar{width:10px}.sc-zonos-invoice-h *.sc-zonos-invoice::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-invoice-h *.sc-zonos-invoice::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-invoice-h *.sc-zonos-invoice::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;width:100%;-ms-flex-pack:center;justify-content:center}.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--left.sc-zonos-invoice,.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice{-ms-flex:1;flex:1;padding:56px 80px 60px;max-width:800px}.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--left.sc-zonos-invoice{background-color:var(--zonos--primary-color, var(--zonos-elements-gray-0));border-right:1px solid var(--zonos-elements-gray-200);overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:32px}.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice{background-color:var(--zonos-elements-gray-0)}.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--done.sc-zonos-invoice{width:100%;max-width:1400px;max-height:100%;height:calc(100% - 100px);overflow:hidden;-ms-flex-direction:column;flex-direction:column;background-color:var(--zonos-elements-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;padding-bottom:50px}.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--done.sc-zonos-invoice .zonos--header.sc-zonos-invoice{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--done.sc-zonos-invoice .zonos--logo.sc-zonos-invoice{margin-bottom:0}.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--done.sc-zonos-invoice zonos-checkout-finish.sc-zonos-invoice{-ms-flex:1;flex:1}.sc-zonos-invoice-h .zonos--header-title.sc-zonos-invoice,.sc-zonos-invoice-h .zonos--header-wrapper.sc-zonos-invoice{max-width:800px}.sc-zonos-invoice-h .zonos--left.sc-zonos-invoice{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.sc-zonos-invoice-h .zonos--left.sc-zonos-invoice .zonos--wrapper.sc-zonos-invoice{padding:0 8px 8px}.sc-zonos-invoice-h .zonos--left.sc-zonos-invoice .zonos--payment-error-banner.sc-zonos-invoice{margin-top:24px}.sc-zonos-invoice-h .zonos--right.sc-zonos-invoice{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-invoice-h .zonos--right.sc-zonos-invoice .zonos--order-details-container.sc-zonos-invoice{overflow:hidden}.sc-zonos-invoice-h .zonos--wrapper.sc-zonos-invoice{overflow:auto;max-height:100%;position:relative}.sc-zonos-invoice-h .flex--wrapper.sc-zonos-invoice{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-invoice-h .zonos--logo-wrapper.sc-zonos-invoice{display:-ms-flexbox;display:flex;gap:16px;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}.sc-zonos-invoice-h .zonos--logo-wrapper.sc-zonos-invoice>*.sc-zonos-invoice{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.sc-zonos-invoice-h .zonos--header-right.sc-zonos-invoice{display:none}.sc-zonos-invoice-h .zonos--logo.sc-zonos-invoice{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-invoice-h .zonos--logo.sc-zonos-invoice img.sc-zonos-invoice{max-height:70px;-o-object-position:left center;object-position:left center;-o-object-fit:contain;object-fit:contain}.sc-zonos-invoice-h .zonos--invoice-container.sc-zonos-invoice{overflow:visible}.mobile.sc-zonos-invoice-h,.tablet.sc-zonos-invoice-h{min-width:auto}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--left.sc-zonos-invoice,.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--left.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice{padding:12px;padding-bottom:76px}@media (max-width: 768px){.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--left.sc-zonos-invoice,.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--left.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice{padding-bottom:0}}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--left.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--left.sc-zonos-invoice{-ms-flex-order:2;order:2;border-right:none}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice{-ms-flex-order:1;order:1;padding-top:16px}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice .zonos--wrapper.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice .zonos--wrapper.sc-zonos-invoice{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));background-color:var(--zonos-elements-gray-50);padding:12px;margin-top:32px}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice .zonos--review.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice .zonos--review.sc-zonos-invoice{margin-bottom:0}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice .zonos--cart-items.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice .zonos--cart-items.sc-zonos-invoice{margin-top:8px}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice zonos-checkout-footer.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice zonos-checkout-footer.sc-zonos-invoice{-ms-flex-order:3;order:3}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--wrapper.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--wrapper.sc-zonos-invoice{max-height:100%}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--footer.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--footer.sc-zonos-invoice{-ms-flex-order:3;order:3}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--done.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--done.sc-zonos-invoice{width:auto}.mobile.sc-zonos-invoice-h .zonos--cart-subtotal.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--cart-subtotal.sc-zonos-invoice{margin:0}.mobile.sc-zonos-invoice-h .zonos--header-wrapper.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--header-wrapper.sc-zonos-invoice{position:-webkit-sticky;position:sticky;top:0;width:100%;padding:16px;background-color:var(--zonos-elements-gray-0);z-index:3}.mobile.sc-zonos-invoice-h .zonos--header-title.sc-zonos-invoice,.mobile.sc-zonos-invoice-h .zonos--header-wrapper.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--header-title.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--header-wrapper.sc-zonos-invoice{max-width:800px;padding:0 16px}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice{overflow:auto;-ms-flex-pack:unset;justify-content:unset;-ms-flex-align:center;align-items:center;gap:24px}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--left.sc-zonos-invoice,.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--left.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice{overflow:visible;width:100%}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--right.sc-zonos-invoice{gap:32px}.mobile.sc-zonos-invoice-h .flex--wrapper.sc-zonos-invoice,.tablet.sc-zonos-invoice-h .flex--wrapper.sc-zonos-invoice{margin-top:0}.mobile.sc-zonos-invoice-h zonos-collect-footer.sc-zonos-invoice,.tablet.sc-zonos-invoice-h zonos-collect-footer.sc-zonos-invoice{-ms-flex-order:3;order:3;left:0}.tablet.sc-zonos-invoice-h .zonos--header-wrapper.sc-zonos-invoice{padding-top:56px;top:-56px}.mobile.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice .zonos--header-right.sc-zonos-invoice{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.mobile.sc-zonos-invoice-h .zonos--header-wrapper.sc-zonos-invoice{padding-top:28px;top:-28px}.mobile.sc-zonos-invoice-h .zonos--invoice-language-dialog.sc-zonos-invoice{position:fixed;left:0;right:0;bottom:0;-webkit-transform-origin:bottom center;transform-origin:bottom center;width:100vw;background:var(--zonos-elements-surface-color);-webkit-box-shadow:var(--zonos-elements-v3-shadow-xl);box-shadow:var(--zonos-elements-v3-shadow-xl);border-radius:var(--zonos-elements-radius-12);max-width:100vw;max-height:500px;z-index:2147483011;overflow:auto;-webkit-transform:scale(0);transform:scale(0);opacity:0;-webkit-transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;-ms-scroll-chaining:none;overscroll-behavior:contain}.mobile.sc-zonos-invoice-h .zonos--invoice-language-dialog.sc-zonos-invoice::-webkit-scrollbar{width:10px}.mobile.sc-zonos-invoice-h .zonos--invoice-language-dialog.sc-zonos-invoice::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.mobile.sc-zonos-invoice-h .zonos--invoice-language-dialog.sc-zonos-invoice::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.mobile.sc-zonos-invoice-h .zonos--invoice-language-dialog.sc-zonos-invoice::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.mobile.sc-zonos-invoice-h .zonos--invoice-language-dialog.sc-zonos-invoice::-webkit-scrollbar-track{border-top-right-radius:var(--zonos-elements-radius-12);border-bottom-right-radius:var(--zonos-elements-radius-12)}.mobile.sc-zonos-invoice-h .zonos--invoice-language-dialog.zonos--invoice-language-dialog-open.sc-zonos-invoice{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.iframed.sc-zonos-invoice-h .zonos--content.sc-zonos-invoice{-ms-scroll-chaining:chained;overscroll-behavior:auto}";
+const ZonosInvoiceStyle0 = zonosInvoiceCss;
+
+const ZonosInvoice = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.storeUnsubscribeList = [];
+        /**
+         * Listener for locale change in localization store
+         */
+        this.onChangeLocaleListener = () => { };
+        /**
+         * Flag to determine if the checkout is on mobile
+         */
+        this.mobile = false;
+        /**
+         * Whether or not the component is being rendered with tablet styles
+         */
+        this.tablet = false;
+        /**
+         * The stripe instance
+         */
+        this.stripe = window.Zonos.stripe;
+        /**
+         * Whether or not the language dialog is open
+         */
+        this.showLanguageDialogMobile = false;
+        /**
+         * Whether or not the submit button is loading in `step` component
+         */
+        this.submitLoading = false;
+        // default to collapse the review
+        this.collapseReviewMobile = true;
+        this.isMobile = false;
+        this.isTablet = false;
+        // @State() isCollect = window.Zonos.isCollect;
+        this.isOverlayLoading = true;
+        /**
+         * Confirm dialog open state
+         */
+        this.isCartCollected = false;
+        /**
+         * Cart expired state to show the cart expired dialog
+         */
+        this.isCartExpired = false;
+        /**
+         * Pay in USD confirm dialog open state
+         */
+        this.payInUsdConfirmDialogOpen = false;
+        /**
+         * Error message from onInventoryCheck callback
+         */
+        this.inventoryCheckErrorMessage = null;
+        /**
+         * Confirmation id for invoice finish component
+         */
+        this.confirmationId = null;
+        /**
+         * Client secret value
+         */
+        this.clientSecret = cart.stripeStore.clientSecret;
+        /**
+         * Client secret value of customer session (use to load saved payment method and render saved consent)
+         */
+        this.stripeCustomerSessionClientSecret = cart.stripeStore.stripeCustomerSessionClientSecret;
+        this.getBaseCurrencySettlementInfo = () => {
+            const selectedLandedCost = cart.cartStore.selectedLandedCost;
+            if (!selectedLandedCost) {
+                return null;
+            }
+            const { landedCost: { amountSubtotals }, } = selectedLandedCost;
+            if (!amountSubtotals) {
+                return null;
+            }
+            const total = (amountSubtotals.discounts || 0) +
+                amountSubtotals.items +
+                amountSubtotals.landedCostTotal +
+                amountSubtotals.shipping;
+            return {
+                settlementAmount: total,
+            };
+        };
+        this.applyStripeTheme = async () => {
+            const theme = zonosStore.zonosStore.appearance.theme;
+            await cart.initStripeElements({
+                // only override theme or theme from appearance if it's mobile
+                overrideTheme: this.isMobile ? theme : undefined,
+                paypalEnabled: paypal.paypalStoreHasPaypalEnabled(),
+            });
+        };
+        this.fetchCheckoutSession = async (checkoutSessionId) => {
+            const { json } = await handleFetch.handleFetch(`/api/zonos-elements/collect/get-checkout-session`, {
+                body: {
+                    checkoutSessionId,
+                },
+                method: 'POST',
+            });
+            return json;
+        };
+        /**
+         * Check if stripe payment intent is succeeded or in a good state to move forward
+         */
+        this.checkStripePaymentIntentStatus = async () => {
+            var _a;
+            const isCartDataAvailable = !!window.Zonos.cartData;
+            const searchParams = new URL(window.location.href).searchParams;
+            const stripeClientSecret = searchParams.get('payment_intent_client_secret');
+            const zonosCheckoutSessionId = searchParams.get('zonosCheckoutSessionId');
+            VarianceTest.log('Payment intent exist, checking stripe payment intent status');
+            // Allow to proceed to order if there's no stripe client secret and cart data is available
+            if (!stripeClientSecret) {
+                VarianceTest.log('No stripe client secret found in the URL, proceed to order if cart data is available');
+                return { shouldAllowOrder: isCartDataAvailable };
+            }
+            const { error, status } = await cart.stripeStoreRetrievePayment({
+                clientSecret: stripeClientSecret,
+            });
+            // check if this is redirect after order
+            const isJustRedirected = new URLSearchParams(window.location.search).get('redirect_status');
+            // If just redirected from Payment provider, show the success screen or error screen based on the status
+            if (isJustRedirected && zonosCheckoutSessionId) {
+                if (!error) {
+                    VarianceTest.log('Payment intent is succeeded or in a good state to move forward, show success screen');
+                }
+                else {
+                    VarianceTest.log('Payment intent failed, show status from error');
+                }
+                // Attempt to retrieve the checkout session
+                const json = await this.fetchCheckoutSession(zonosCheckoutSessionId);
+                this.confirmationId = ((_a = json === null || json === void 0 ? void 0 : json.checkoutSession.landedCost) === null || _a === void 0 ? void 0 : _a.shortId) || null;
+                localization.storageStore.checkoutSessionId = zonosCheckoutSessionId;
+                cart.stripeStore.clientSecret = stripeClientSecret;
+                void this.setToFinishStep(status);
+                return { shouldAllowOrder: false };
+            }
+            if (!isCartDataAvailable) {
+                VarianceTest.log('Cart data is not available, only check payment intent status, skip order.');
+                return { shouldAllowOrder: false };
+            }
+            VarianceTest.log('Payment intent is not succeeded, proceed to order');
+            return { shouldAllowOrder: true };
+        };
+    }
+    /**
+     * Listen to resize event to update the isMobile state
+     */
+    resizeListener() {
+        this.isMobile = isInvoiceMobileTablet.isInvoiceMobile(this.mobile);
+        this.isTablet = isInvoiceMobileTablet.isInvoiceTablet(this.tablet);
+    }
+    /**
+     * For storybook to set to finish step, this is to trigger in the story for zonos-checkout-finish
+     */
+    async setToFinishStep(forcePaymentStatus) {
+        cart.stripeStore.stripe = window.Zonos.stripe;
+        cart.cartStore.step = 'finish';
+        this.storybookPaymentStatusOverride = forcePaymentStatus;
+        this.isOverlayLoading = false;
+    }
+    async initInvoiceCart() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        // Should not happen since we will throw error way earlier if cartData is not available
+        if (!window.Zonos.cartData) {
+            return;
+        }
+        // change currency to the currency of the cart
+        const cartCurrency = (_b = (_a = window.Zonos.cartData) === null || _a === void 0 ? void 0 : _a.items[0]) === null || _b === void 0 ? void 0 : _b.currencyCode;
+        if (cartCurrency) {
+            cart.cartStore.currency = cartCurrency;
+        }
+        const cartCheckoutSessionId = (_d = (_c = window.Zonos.cartData) === null || _c === void 0 ? void 0 : _c.references) === null || _d === void 0 ? void 0 : _d.checkoutSessionId;
+        const cartLandedCostId = (_f = (_e = window.Zonos.cartData) === null || _e === void 0 ? void 0 : _e.references) === null || _f === void 0 ? void 0 : _f.landedCostId;
+        if (!cartLandedCostId) {
+            cart.cartStoreUpdateToErrorState({
+                messages: [
+                    localization.translate('Session does not have valid landed cost. Please contact [organizationName] for assistance.', {
+                        organizationName: zonosStore.zonosStore.organizationName,
+                    }),
+                ],
+                title: localization.translate('Invalid session'),
+            });
+            return;
+        }
+        // Override checkout session id for invoice if we found one in the cart reference
+        if (cartCheckoutSessionId) {
+            VarianceTest.log('Setting checkout session id from cart reference', 'info', cartCheckoutSessionId);
+            localization.storageStore.checkoutSessionId = cartCheckoutSessionId;
+        }
+        else {
+            VarianceTest.log('Clear checkout session id from storage so we start from a fresh session for the invoice cart');
+            localization.storageStore.checkoutSessionId = null;
+        }
+        const { shouldAllowOrder } = await this.checkStripePaymentIntentStatus();
+        if (!shouldAllowOrder) {
+            return;
+        }
+        try {
+            const { adjustments, cartItems } = buildCartItemsByTempCart.buildCartItemsByTempCart(window.Zonos.cartData);
+            await cart.cartStoreUpdateItems({
+                adjustments,
+                cartItems,
+                landedCostId: cartLandedCostId,
+                // No need to init session on failure since we will always create a new one if there is no checkout session id in the cart references
+                shouldInitSessionOnFailure: false,
+            });
+            // if checkoutSessionId is not available, request a new one, only if no checkout session id is found in cart references
+            if (!localization.storageStore.checkoutSessionId && !cartCheckoutSessionId) {
+                const success = await cart.stripeStoreInitCheckoutSession();
+                VarianceTest.log(`stripeStoreInitCheckoutSession: ${success}`);
+                if (!success) {
+                    throw new Error('Failed to initialize checkout session! The cart might be created with LIVE Invoice quote but being used with sandbox credential');
+                }
+            }
+            // If there is checkout session in collect cart references and we failed to retrieve it from `update-checkout-session`, it most likely means the cart is already completed / invalid landed cost
+            if ((!cart.cartStore.checkoutSession ||
+                ((_g = cart.cartStore.checkoutSession) === null || _g === void 0 ? void 0 : _g.completedAt)) &&
+                cartCheckoutSessionId) {
+                // Attempt to retrieve the checkout session
+                const json = await this.fetchCheckoutSession(cartCheckoutSessionId);
+                // Some merchants use landed cost id as the confirmation id
+                this.confirmationId = ((_h = json === null || json === void 0 ? void 0 : json.checkoutSession.landedCost) === null || _h === void 0 ? void 0 : _h.shortId) || null;
+                // If checkout session is already completed, set to finish step
+                if (!!(json === null || json === void 0 ? void 0 : json.checkoutSession.completedAt) &&
+                    // For invoice that's set to expired, we set completedAt but no order attached. In that case should not set to finish step
+                    !!json.checkoutSession.order) {
+                    void this.setToFinishStep('succeeded');
+                    return;
+                }
+                if (json === null || json === void 0 ? void 0 : json.checkoutSession.clientSecret) {
+                    const { status } = await cart.stripeStoreRetrievePayment({
+                        clientSecret: json.checkoutSession.clientSecret,
+                    });
+                    // If payment intent is still processing or succeeded, set to finish step
+                    if (status === 'processing' || status === 'succeeded') {
+                        void this.setToFinishStep(status);
+                        return;
+                    }
+                }
+                void handleFetch.sendErrorLog({
+                    endpoint: 'INVALID_INVOICE_CHECKOUT_SESSION',
+                    errors: [
+                        'Invalid checkout session, can not retrieve the checkout session after failing to update it',
+                    ],
+                    metadata: {
+                        cartCheckoutSessionId,
+                        cartId: (_j = window.Zonos.cartData) === null || _j === void 0 ? void 0 : _j.id,
+                        cartLandedCostId,
+                    },
+                });
+                throw new Error('Invalid checkout session, can not retrieve the checkout session after failing to update it');
+            }
+            if (!cart.cartStore.checkoutSession) {
+                void handleFetch.sendErrorLog({
+                    endpoint: 'FAIL_TO_UPDATE_CREATE_INVOICE_CHECKOUT_SESSION',
+                    errors: [
+                        'Could not update/create checkout session for this invoice cart',
+                    ],
+                    metadata: {
+                        cartCheckoutSessionId: cartCheckoutSessionId || 'N/A',
+                        cartId: (_k = window.Zonos.cartData) === null || _k === void 0 ? void 0 : _k.id,
+                        cartLandedCostId: cartLandedCostId || 'N/A',
+                    },
+                });
+                throw new Error('Could not update/create checkout session for this invoice cart');
+            }
+            // const checkoutSessionId = storageStore.checkoutSessionId;
+            void cart.stripeStoreGetPaymentIntent();
+            const landedCost = (_l = cart.cartStore.checkoutSession) === null || _l === void 0 ? void 0 : _l.landedCost;
+            if (!landedCost) {
+                throw new Error('Landed cost could not be found in checkout session after creating/updating them');
+            }
+            await invoice.invoiceStoreUpdateSelectedShippingOption(Object.assign(Object.assign({}, cart.cartStore.checkoutSession), { id: localization.storageStore.checkoutSessionId || '' }));
+            void invoice.invoiceStoreInitShippingInfo({
+                landedCostId: landedCost.id,
+            });
+            void this.applyStripeTheme();
+        }
+        catch (err) {
+            handleFetch.logError(err);
+            cart.cartStoreUpdateToErrorState({
+                messages: [
+                    localization.translate('Session does not have valid landed cost. Please contact [organizationName] for assistance.', {
+                        organizationName: zonosStore.zonosStore.organizationName,
+                    }),
+                ],
+                title: localization.translate('Invalid session'),
+            });
+        }
+        this.isOverlayLoading = false;
+    }
+    toggleLanguageDialog() {
+        this.showLanguageDialogMobile = !this.showLanguageDialogMobile;
+    }
+    async handleStripePaymentContinue() {
+        var _a, _b, _c, _d;
+        // Attempt to get the value of the billing address element to validate the form
+        void ((_a = cart.stripeStore.stripeBillingAddressElement) === null || _a === void 0 ? void 0 : _a.getValue());
+        // If the email is not complete, scroll to the link authentication section
+        if (!((_b = cart.stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete)) {
+            // Scroll to the billing section
+            const linkAuthentication = document.querySelector('zonos-link-authentication');
+            linkAuthentication === null || linkAuthentication === void 0 ? void 0 : linkAuthentication.scrollIntoView({ behavior: 'smooth' });
+            return;
+        }
+        if (!((_c = cart.stripeStore.stripeBillingAddressEventData) === null || _c === void 0 ? void 0 : _c.complete)) {
+            // Scroll to the billing section
+            const billingSection = document.querySelector('.zonos--billing-address');
+            billingSection === null || billingSection === void 0 ? void 0 : billingSection.scrollIntoView({ behavior: 'smooth' });
+            return;
+        }
+        const shouldConfirmPayInUsd = cart.stripeStore.checkoutSettlementCurrency === 'USD';
+        // open the confirm dialog if the settlement currency is in USD, and if call this method again, proceed and confirm with Stripe.
+        if (shouldConfirmPayInUsd &&
+            cart.stripeStore.shouldRenderPayInUsdButton &&
+            !this.payInUsdConfirmDialogOpen) {
+            this.payInUsdConfirmDialogOpen = true;
+            return;
+        }
+        // Close the dialog after the user confirms to proceed with the payment in USD
+        this.payInUsdConfirmDialogOpen = false;
+        // reset paypal error message
+        paypal.paypalStore.paypalErrorMessage = null;
+        // reset error state
+        cart.stripeStore.hasPaymentError = false;
+        this.submitLoading = true;
+        // reset inventory check message
+        cart.cartStore.inventoryCheckErrorMessage = null;
+        // Attempt to change settlement currency to USD
+        const baseCurrencyUpdateSuccess = await cart.stripeStoreUpdateCheckoutSessionBaseCurrency();
+        // Should not proceed to confirm payment if base currency update failed
+        if (!baseCurrencyUpdateSuccess) {
+            cart.stripeStore.hasPaymentError = true;
+            cart.stripeStore.customErrorMessage = localization.translate('Unable to complete payment in [currency]. Please try again or select a different currency. If the issue persists, contact our support team for assistance.', {
+                currency: cart.stripeStore.checkoutSettlementCurrency,
+            });
+            this.submitLoading = false;
+            return;
+        }
+        // Update the billing party id to the checkout session
+        await invoice.invoiceStoreAsyncAddressUpdate();
+        try {
+            await cart.stripeStoreConfirmPayment({
+                noLandedCostCheck: true,
+            });
+            cart.cartStore.step = 'finish';
+            // Some merchants use landed cost id as the confirmation id
+            this.confirmationId =
+                invoice.invoiceStore.landedCostShortId ||
+                    ((_d = cart.cartStore.selectedLandedCost) === null || _d === void 0 ? void 0 : _d.landedCostId) ||
+                    null;
+            return;
+        }
+        catch (err) {
+            handleFetch.logError(err);
+            cart.stripeStore.hasPaymentError = true;
+        }
+        this.submitLoading = false;
+    }
+    componentWillLoad() {
+        cart.stripeStore.stripe = window.Zonos.stripe;
+        // Set the step to payment
+        cart.cartStore.step = 'payment';
+        void this.initInvoiceCart();
+        this.resizeListener();
+        this.storeUnsubscribeList = [
+            cart.stripeStoreOnChange('clientSecret', () => {
+                void this.applyStripeTheme();
+            }),
+            localization.localizationStoreOnChange('selectedLocale', () => {
+                void this.applyStripeTheme();
+            }),
+        ];
+        VarianceTest.log(`mobile: ${this.isMobile}`);
+    }
+    // do clean up when component is unmounted
+    disconnectedCallback() {
+        // reset stripe store
+        cart.stripeStoreReset();
+        // reset cart store
+        cart.cartStoreReset();
+        // cleanup onChange listener
+        this.onChangeLocaleListener();
+        this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
+    }
+    render() {
+        // Set client secret so that we can add this to @Watch listener
+        this.clientSecret = cart.stripeStore.clientSecret;
+        // Only set and update stripeCustomerSession state if it's available, since it would only be available at the time checkout session is created, afterward access checkout session the value would be `null`.
+        if (cart.stripeStore.stripeCustomerSessionClientSecret) {
+            // Set stripe customer session client secret so that we can add this to @Watch listener
+            this.stripeCustomerSessionClientSecret =
+                cart.stripeStore.stripeCustomerSessionClientSecret;
+        }
+        const baseCurrencySettlementInfo = this.getBaseCurrencySettlementInfo();
+        const { logoUrl, theme } = zonosStore.zonosStore.appearance;
+        const renderLogo = () => {
+            // add timestamp to logo url so browser won't cache it on the dashboard setting
+            const logo = `${logoUrl}?timestamp=${Date.now()}`;
+            return (index.h("div", { class: "zonos--logo" }, logo && (index.h("img", { alt: `${zonosStore.zonosStore.organizationName} logo`, src: logo }))));
+        };
+        const isTestMode = handleFetch.getIsTestMode();
+        const renderTopHeader = () => {
+            var _a;
+            const urlParams = new URLSearchParams(window.location.search);
+            const zonosQaUrl = urlParams.get('zonosQaUrl');
+            const zonosDebug = urlParams.get('zonosDebug');
+            const languageLabel = (_a = ILanguage.languages.find(x => x.code === localization.localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
+            return (index.h(index.Fragment, null, index.h("zonos-h-stack", { class: "zonos--header-wrapper", spacing: 16 }, index.h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (index.h("zonos-badge", { badgeColor: "orange", size: "small" }, localization.translate('Test mode'))), zonosDebug === '1' && (index.h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (index.h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl))), index.h("div", { class: "zonos--header-right" }, index.h("zonos-button", { backgroundColor: 'gray-0', class: "zonos--header-right-button", onClick: () => this.toggleLanguageDialog(), variant: "outline" }, languageLabel, index.h("zonos-icon", { "aria-label": "Language select", content: ChevronDownIcon, iconColor: "gray-1200" })), index.h("div", { class: classes.classes([
+                    'zonos--invoice-language-dialog',
+                    this.showLanguageDialogMobile &&
+                        'zonos--invoice-language-dialog-open',
+                ]) }, index.h("zonos-language-select", { handleOnClose: () => this.toggleLanguageDialog() }))))));
+        };
+        const renderContent = () => {
+            if (this.isOverlayLoading || cart.stripeStore.isFetchingSession) {
+                return null;
+            }
+            return (index.h("div", { class: 'zonos--content' }, cart.cartStore.step !== 'finish' && cart.cartStore.step !== 'error' && (index.h(index.Fragment, null, (this.isMobile || this.isTablet) && renderTopHeader(), index.h("div", { class: "zonos--left", "data-theme": theme }, !this.isMobile && !this.isTablet && renderTopHeader(), index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Billing info')), index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-link-authentication", { titleText: "" }), index.h("zonos-address", { titleText: "", type: "billing" })), index.h("zonos-invoice-payment", { class: classes.classes(['zonos--invoice-container']), continueLoading: this.submitLoading, onContinueClicked: async () => {
+                    await this.handleStripePaymentContinue();
+                } })), index.h("div", { class: "zonos--right", "data-theme": theme }, !this.isMobile && (index.h("zonos-invoice-review", { mobile: this.isMobile, tablet: this.isTablet })), index.h("div", { class: "zonos--order-details-container" }, !this.isMobile && (index.h("zonos-invoice-cart-items", null)), this.isMobile && (index.h("zonos-invoice-order-details", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onCollapseClicked: () => {
+                    this.collapseReviewMobile = !this.collapseReviewMobile;
+                } }))), index.h("div", { class: "flex--wrapper" }, !this.isMobile && (index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-invoice-subtotal", null))), !this.isMobile && !this.isTablet && (index.h("zonos-invoice-footer", { "data-theme": theme, mobile: this.isMobile, tablet: this.isTablet })))))), (cart.cartStore.step === 'finish' || cart.cartStore.step === 'error') && (index.h("div", { class: "zonos--done", "data-theme": theme }, index.h("div", { class: "zonos--header" }, renderLogo()), index.h("zonos-invoice-finish", { confirmationId: this.confirmationId, overrideNotification: cart.cartStore.step === 'error' && !!cart.cartStore.error
+                    ? Object.assign(Object.assign({}, cart.cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), (this.isMobile ||
+                this.isTablet ||
+                cart.cartStore.step === 'finish' ||
+                cart.cartStore.step === 'error') && (index.h("zonos-invoice-footer", { "data-theme": theme, mobile: this.isMobile, tablet: this.isTablet }))));
+        };
+        return (index.h(index.Host, { class: classes.classes([
+                'zonos--invoice zonos--elements',
+                this.isMobile && 'mobile',
+                this.isTablet && 'tablet',
+            ]), "data-theme": theme }, renderContent(), baseCurrencySettlementInfo && (index.h("zonos-confirm-dialog", { class: "zonos--pay-in-usd-dialog", dialogCancelBtnText: localization.translate('Cancel'), dialogConfirmBtnText: localization.translate('Pay [orderTotal]', {
+                orderTotal: localization.currencyFormat({
+                    amount: baseCurrencySettlementInfo.settlementAmount,
+                    currency: 'USD',
+                }),
+            }), dialogIntent: "warn", dialogOpen: this.payInUsdConfirmDialogOpen, dialogSubtitle: localization.translate('By paying in USD, your card will be charged directly with no currency conversion. However, using a non-USD based card may result in additional currency conversion fees at the bank level.'), dialogTitle: localization.translate('Pay in USD (United States Dollar)?'), dialogType: "confirm", dialogWidth: 480, onCancelClicked: () => {
+                this.payInUsdConfirmDialogOpen = false;
+            },
+            // Mark user selected confirm to continue with payment
+            onConfirmClicked: () => this.handleStripePaymentContinue() })), index.h("zonos-loading-overlay", { open: this.isOverlayLoading })));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+ZonosInvoice.style = ZonosInvoiceStyle0;
+
+exports.zonos_invoice = ZonosInvoice;

package/dist/cjs/zonos-language-select_2.cjs.entry.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const localization = require('./localization-39516612.js');
-const translationStore = require('./translationStore-08d3ff9c.js');
+const localization = require('./localization-8ef6250a.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./handleFetch-954f30e1.js');
@@ -35,9 +34,9 @@ const ZonosLanguageSelect = class {
     }
     render() {
         const { selectedLocale } = localization.localizationStore;
-        return (index.h(index.Host, { key: '232674c6f35113c6ad3f1094e6e6d4128b4d4c02', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '04271d51489c89ffa0e4fda90ed28392ae725ebe', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '014d1364e165e4ee4e9cf304791fc10fdfb6d87c', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '65b454467b033cd061ab08693e857eed75c76511', handleOnClose: () => this.handleOnClose(), label: translationStore.translate('Select a language') }), index.h("div", { key: '6ea8fca0b44ada24b9b2b84e22584ba1a7459dc4', class: "zonos--language-select-content" }, ILanguage.languages.map(language => (index.h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, index.h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, index.h("div", { key: 'cebffa5e46a4403f6aa4753648ee8097c7b4375d', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '9aa75712883c069a0dc21f0cdd91484211f688d1', handleOnClose: () => this.handleOnClose(), label: localization.translate('Select a language') }), index.h("div", { key: '637cff9d4a5ff4ebac0e42ef4db6b49006e4f77e', class: "zonos--language-select-content" }, ILanguage.languages.map(language => (index.h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, index.h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
 };
 ZonosLanguageSelect.style = ZonosLanguageSelectStyle0;
@@ -61,9 +60,9 @@ const ZonosSelectDialogHeader = class {
         this.label = '';
     }
     render() {
-        return (index.h(index.Host, { key: 'cc65559ef7867bbd8e7990556b50434faa0a905c', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'f962d21f191040edf5b6e9fe2c4276bca67fde67', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("zonos-v-stack", { key: '77c280b12744520b4a172193f88798aa53d33eb7', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: 'eaba9d1e50f71f23e330e989521d2156a617b22d', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: 'ddddc6b5bca87cf44cbc7428d402f44c67422cb6', type: "boldLabel" }, this.label), index.h("zonos-button", { key: '313e3955ba8bafc9a1b36b4c1c8f99e975fb8dd3', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: '9af2821c22f3e37d52b6f03bf544fcaca1c0ed7b' }))));
+            } }, index.h("zonos-v-stack", { key: '1d55415843a60fe2dfccc5fe4c51cf3024f0de2c', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '0f9e6aad9194160e171b70e835e100ddcda264a5', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: '15680cb57b7f8fe3b0f8bb763f437c85ab100d1c', type: "boldLabel" }, this.label), index.h("zonos-button", { key: '8baa1075d7138c14306dc7a1c666f577bba2d128', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: '96384e5eb53e731e2061339fd24bcec4194b1274' }))));
     }
 };
 ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;

package/dist/cjs/zonos-link.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-69fa8852.js');
+
+const zonosLinkCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:inline-block}:host a{padding-bottom:2px;color:var(--zonos-elements-primary);-webkit-box-shadow:none;box-shadow:none;text-decoration:none;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word}:host a:link,:host a:visited{color:var(--zonos-elements-primary);-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}:host a:hover,:host a:active{color:var(--zonos-elements-primary);-webkit-box-shadow:0 1px 0 var(--zonos-elements-primary);box-shadow:0 1px 0 var(--zonos-elements-primary)}";
+const ZonosLinkStyle0 = zonosLinkCss;
+
+const ZonosLink = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The href for the link
+         */
+        this.href = '';
+    }
+    render() {
+        return (index.h(index.Host, { key: '999242ee8fc2e78a52fac1251a2cd554ed2e20ea', class: "zonos--elements" }, index.h("a", { key: '9ebee9ad8262ebd42f511dda6afadb54a2e7c813', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '1c460154708dfc89d1b5132d3905c107ce333fd8' }))));
+    }
+};
+ZonosLink.style = ZonosLinkStyle0;
+
+exports.zonos_link = ZonosLink;

package/dist/cjs/zonos-logo.cjs.entry.js

@@ -26,11 +26,11 @@ const ZonosLogo = class {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (index.h(index.Host, { key: '0f0fe90d3ef58b5a7b934361567e92b03630b46a', class: classes.classes(['zonos--elements zonos--logo']), style: {
+        return (index.h(index.Host, { key: '2277b893624a5e87fcda0f86e96a50d0bc309bac', class: classes.classes(['zonos--elements zonos--logo']), style: {
                 '--zonos--filter-color': filterColor,
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--width': this.width,
-            } }, index.h("img", { key: 'ec026a1a596d985aa50c18f8ebffc8683e62cc05', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
+            } }, index.h("img", { key: '3406330adec18a2faea63a91e0113d30d70deff5', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };

package/dist/cjs/zonos-stripe-input.cjs.entry.js

@@ -73,11 +73,11 @@ const ZonosStripeInput = class {
         const primaryColor = this.overridePrimaryColor || zonosStore.zonosStore.appearance.colorPrimary;
         const secondaryColor = this.overrideSecondaryColor || zonosStore.zonosStore.appearance.colorSecondary;
         // Always use theme from appearance settings if it's collect
-        const isDark = window.Zonos.isCollect
+        const isDark = window.Zonos.isCollect || window.Zonos.isInvoice
             ? zonosStore.zonosStore.appearance.theme === 'DARK'
             : primaryColor && isDarkColor.isDarkColor(primaryColor);
         const fontSize = zonosStore.zonosStore.appearance.fontSizeInputValue || 16;
-        return (index.h(index.Host, { key: '0bed90e63595e6036b9342e15c999bb7e7971240', class: classes.classes([
+        return (index.h(index.Host, { key: '8beb2c15857313a9b2709a7c51e82c25c1d1ba47', class: classes.classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
                 (this.isError || !!this.error) && 'has-error',
@@ -86,10 +86,10 @@ const ZonosStripeInput = class {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--font-size': `${fontSize}px`,
                 '--zonos--primary-color': secondaryColor,
-            } }, index.h("div", { key: '00e5c3a220aaeee221c5cc104d2463f5468067cf', class: classes.classes([
+            } }, index.h("div", { key: '01ca3ae37198c97c33c7af3c9aca688c697d24ad', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("input", Object.assign({ key: '25459f6bc07647962676edd724630cd7726bb680' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
+            ]) }, index.h("input", Object.assign({ key: '2f5ec49912242a06372045abb157524d8e28b2bf' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.internalValue && 'has-content',
@@ -99,7 +99,7 @@ const ZonosStripeInput = class {
                 this.inputChange.emit(input.value);
                 this.el.inputValue = input.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), index.h("div", { key: '145634dac24ef37cd206847537bea2f641f3b5a0', class: "zonos--floated-label" }, index.h("label", { key: '70eabcab7a30e851086a2b79107968f9a999c67e', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: '55ab6d14b5e6c98c665f41a1c4c1dd70523ee91f', textColor: "red-600", type: "caption" }, this.error))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), index.h("div", { key: '2af905542b374f49eec85a9e626ee44f5818664f', class: "zonos--floated-label" }, index.h("label", { key: 'c8822e3610c25ec2135a28b9ce655cada68691dc', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: '4915281aa2ec9e3cb58fd159e647f1ee16fb16c6', textColor: "red-600", type: "caption" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/zonos-toggle.cjs.entry.js

@@ -20,9 +20,9 @@ const ZonosToggle = class {
         this.options = [];
     }
     render() {
-        return (index.h(index.Host, { key: '1b844d11272181b9c81c2bfb03a13a1ad412cb9f', class: classes.classes(['zonos--elements zonos--toggle']), style: {
+        return (index.h(index.Host, { key: '12d0931ba2738021291cd7a00e7c12df502409cd', class: classes.classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'f5991e19ea02a82ae1f6e7529bb3bb77e66b7165', class: "wrapper" }, this.options.map(option => {
+            } }, index.h("div", { key: '6455e748d3547273d3c8cb7517ee512912d31644', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (index.h("button", { class: classes.classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);