@zonos/elements 1.3.5 → 1.3.7-alpha.0

package/dist/components/submitGtag.js

@@ -1,5 +1,5 @@
 import { z as zonosStore } from './zonosStore.js';
-import { a as log } from './localization.js';
+import { d as log } from './stripe.js';
 
 /**
  * Submit a gtag event if the gtag function is available.

package/dist/components/zonos-address2.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore, k as stripeStorePrefetchLandedCost } from './cart.js';
-import { l as logError, b as localizationStore } from './localization.js';
+import { s as stripeStore, a as stripeStorePrefetchLandedCost, l as logError, b as localizationStore } from './stripe.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
@@ -15,13 +14,46 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
         this.titleText = undefined;
         this.defaultAddress = null;
         this.stripe = window.Zonos.stripe;
-        this.isDirtyAddress = !!stripeStore.stripeAddressEventData &&
-            stripeStore.stripeAddressEventData.value.address.line1.length > 0;
+        this.isDirtyAddress = false;
+    }
+    getStripeAddressInstance() {
+        if (this.type === 'billing') {
+            return {
+                stripeAddressElement: stripeStore.stripeBillingAddressElement,
+                stripeAddressEventData: stripeStore.stripeBillingAddressEventData,
+                stripeElements: stripeStore.stripeElementsForBillingAddress,
+            };
+        }
+        return {
+            stripeAddressElement: stripeStore.stripeAddressElement,
+            stripeAddressEventData: stripeStore.stripeAddressEventData,
+            stripeElements: stripeStore.stripeElements,
+        };
+    }
+    updateAddressEventData({ event, type, }) {
+        switch (type) {
+            case 'billing':
+                stripeStore.stripeBillingAddressEventData = event;
+                break;
+            default:
+                stripeStore.stripeAddressEventData = event;
+                break;
+        }
+        // only prefetch if the address type is shipping
+        void stripeStorePrefetchLandedCost();
+    }
+    updateAddressElement({ stripeAddressElement, type, }) {
+        if (type === 'shipping') {
+            stripeStore.stripeAddressElement = stripeAddressElement;
+            return;
+        }
+        stripeStore.stripeBillingAddressElement = stripeAddressElement;
     }
     async watchInitStripe() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b;
         this.stripe = window.Zonos.stripe;
-        if (!this.stripe || !stripeStore.stripeElements) {
+        const { stripeAddressEventData, stripeElements } = this.getStripeAddressInstance();
+        if (!this.stripe || !stripeElements) {
             logError("Stripe is not initialized. Couldn't load stripe element.");
             return;
         }
@@ -32,21 +64,19 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
             (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
         }
         const shippableCountries = localizationStore.shippingZoneCountries;
-        const addressElement = stripeStore.stripeElements.create('address', {
-            allowedCountries: shippableCountries
-                ? Object.values(shippableCountries).map(country => country.code)
-                : [],
-            autocomplete: {
-                mode: 'automatic',
-            },
+        const shippingZone = shippableCountries
+            ? Object.values(shippableCountries).map(country => country.code)
+            : [];
+        const addressElement = stripeElements.create('address', {
+            allowedCountries: this.type === 'shipping' ? shippingZone : [],
             contacts: this.defaultAddress ? [this.defaultAddress] : [],
             defaultValues: {
-                address: Object.assign(Object.assign({}, (_c = stripeStore.stripeAddressEventData) === null || _c === void 0 ? void 0 : _c.value.address), { country: ((_d = stripeStore.stripeAddressEventData) === null || _d === void 0 ? void 0 : _d.value.address.country) ||
+                address: Object.assign(Object.assign({}, stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address), { country: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
                         localizationStore.selectedCountryCode ||
                         'AL' }),
-                firstName: (_e = stripeStore.stripeAddressEventData) === null || _e === void 0 ? void 0 : _e.value.firstName,
-                lastName: (_f = stripeStore.stripeAddressEventData) === null || _f === void 0 ? void 0 : _f.value.lastName,
-                phone: (_g = stripeStore.stripeAddressEventData) === null || _g === void 0 ? void 0 : _g.value.phone,
+                firstName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName,
+                lastName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName,
+                phone: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone,
             },
             display: {
                 name: 'split',
@@ -74,31 +104,39 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
                     }
                     else {
                         // scroll into the end of the page so the address placeholder won't be hidden
-                        const yOffset = 100;
+                        const yOffset = this.type === 'shipping' ? 100 : 600;
                         const parentWrapper = this.el.closest('.zonos--group');
                         const y = this.el.getBoundingClientRect().top + yOffset;
                         parentWrapper === null || parentWrapper === void 0 ? void 0 : parentWrapper.scrollTo({ behavior: 'smooth', top: y });
                     }
-                }, 400);
+                }, 600);
             }
-            stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
-            // run prefetch landed cost when address is changed
-            void stripeStorePrefetchLandedCost();
+            this.updateAddressEventData({
+                event: Object.assign(Object.assign({}, event), { elementMode: this.type, elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) }),
+                type: this.type,
+            });
+        });
+        this.updateAddressElement({
+            stripeAddressElement: addressElement,
+            type: this.type,
         });
-        stripeStore.stripeAddressElement = addressElement;
     }
     disconnectedCallback() {
-        var _a;
         // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
-        (_a = stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.destroy();
+        const stripeElement = this.getStripeAddressInstance().stripeAddressElement;
+        stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.destroy();
     }
     componentDidLoad() {
+        const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
+        this.isDirtyAddress =
+            !!stripeAddressEventData &&
+                stripeAddressEventData.value.address.line1.length > 0;
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '41014c1af1c8f8f5bb37caf358a6cec124e66f30', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '5d8dcc4b44f7fe7b089b630ec6ca7b2177fef371', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'da0fe9760d7ca8dbc089481ac1dcb7c0a7c6553f', class: "zonos--address-component" })));
+        return (h(Host, { key: 'b2aa1ee3f16ae4ebcce83b599c97aa80f09dc9d3', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'e37392d0add0ab8541f78131abdf9082fd2455b4', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd28d1908ee2f525455b0680e25cff3040093ad74', class: "zonos--address-component" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/zonos-badge2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as zonosStoreFontFamily } from './zonosStore.js';
+import { a as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
@@ -12,34 +12,32 @@ const ZonosBadge = /*@__PURE__*/ proxyCustomElement(class ZonosBadge extends HTM
         this.__registerHost();
         this.__attachShadow();
         this.bold = false;
-        this.color = 'gray';
+        this.badgeColor = 'gray';
         this.icon = undefined;
         this.iconRight = false;
         this.size = 'default';
         this.rounded = false;
-        this.class = '';
     }
     render() {
-        return (h(Host, { key: '2d111e91f403ef5c03f742f5dabe9491623be91d', class: classes(['zonos--elements zonos--badge', this.class]), style: {
+        return (h(Host, { key: '0f502b63322730f508fd7c92f231573b1dfbfd6b', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'e6debe091b732b857f180cee19bec4be435ea524', class: classes([
+            } }, h("div", { key: '4ee3f0b623067625ddd79336a1854f5ab796b3b1', class: classes([
                 'zonos--badge-content',
-                this.color,
+                this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: 'e92c97d77fa5ce279059953f7d7fbc5a0030aa5d' }, h("slot", { key: 'c93852c3225ba57dd26c26300254f348e349f9ad' })))));
+            ]) }, this.icon, h("zonos-text", { key: 'e5bdf974408416811f7666fc453ca47db58fa43f' }, h("slot", { key: 'd953b60fefe2c25aea529b9de41938cfd96a285b' })))));
     }
     static get style() { return ZonosBadgeStyle0; }
 }, [1, "zonos-badge", {
         "bold": [4],
-        "color": [1],
+        "badgeColor": [1, "badge-color"],
         "icon": [16],
         "iconRight": [4, "icon-right"],
         "size": [1],
-        "rounded": [4],
-        "class": [1]
+        "rounded": [4]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/zonos-banner2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as zonosStoreFontFamily } from './zonosStore.js';
+import { a as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
@@ -19,7 +19,6 @@ const ZonosBanner = /*@__PURE__*/ proxyCustomElement(class ZonosBanner extends H
         };
         this.bannerTitle = undefined;
         this.intent = undefined;
-        this.class = '';
         this.hasContent = false;
     }
     render() {
@@ -31,13 +30,9 @@ const ZonosBanner = /*@__PURE__*/ proxyCustomElement(class ZonosBanner extends H
                 h("slot", { onSlotchange: this.handleSlotChange }),
             ].filter(Boolean);
             const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
-            return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { color: textColor }, content)))));
+            return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { textColor: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { textColor: textColor }, content)))));
         };
-        const baseClass = classes([
-            'zonos--elements zonos--banner',
-            this.class,
-            this.intent,
-        ]);
+        const baseClass = classes(['zonos--elements zonos--banner', this.intent]);
         const font = zonosStoreFontFamily();
         switch (this.intent) {
             case 'error':
@@ -76,7 +71,6 @@ const ZonosBanner = /*@__PURE__*/ proxyCustomElement(class ZonosBanner extends H
 }, [1, "zonos-banner", {
         "bannerTitle": [1, "banner-title"],
         "intent": [1],
-        "class": [1],
         "hasContent": [32]
     }]);
 function defineCustomElement() {

package/dist/components/zonos-button2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { z as zonosStore, b as zonosStoreFontFamily } from './zonosStore.js';
+import { z as zonosStore, a as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isColorVariable } from './isColorVariable.js';
@@ -20,7 +20,7 @@ const getButtonTheme = (overrideBackground) => {
     return buttonTheme;
 };
 
-const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
+const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--amino-radius-4);width:24px}";
 const ZonosButtonStyle0 = zonosButtonCss;
 
 const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends HTMLElement {
@@ -34,8 +34,7 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
         this.handleSlotChange = () => {
             this.hasContent = true;
         };
-        this.class = '';
-        this.color = undefined;
+        this.buttonColor = undefined;
         this.backgroundColor = undefined;
         this.borderStyle = undefined;
         this.isDisabled = false;
@@ -73,21 +72,21 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
          * So need to re-assign the variant prop with the default value if the value is `undefined` here.
          */
         const variant = this.variant || 'standard';
-        const color = this.color && isColorVariable(this.color)
-            ? `var(--amino-${this.color})`
-            : this.color;
+        const color = this.buttonColor && isColorVariable(this.buttonColor)
+            ? `var(--amino-${this.buttonColor})`
+            : this.buttonColor;
         // use override background if it exists, otherwise use color from setting
         const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
         // only set theme for button to change text color if variant is standard and override background is set
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
         const borderStyle = getBorderRadius(this.borderStyle);
         const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
-        return (h(Host, { key: 'e1ad2eb31ad09c8671debc2e32d83af21085b912', class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        return (h(Host, { key: '817142c1d229333aee0b38864788346d2749d3d1', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("button", { key: '0a087bf98251899711a71d69a89473479fc78c4f', class: classes([
+            } }, h("button", { key: '04bff1f932154f54b4af51b2fac053d40efc354f', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -100,15 +99,14 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { color: spinnerColor, size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'd80e58786f16bff52592a759679290a3a5ed0954', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'fd9bd0e9f89c3c9ab6dc9d0ac7a123542a1f5023', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get watchers() { return {
         "icon": ["iconChangeHandler"]
     }; }
     static get style() { return ZonosButtonStyle0; }
 }, [1, "zonos-button", {
-        "class": [1],
-        "color": [1],
+        "buttonColor": [1, "button-color"],
         "backgroundColor": [1, "background-color"],
         "borderStyle": [1, "border-style"],
         "isDisabled": [4, "is-disabled"],

package/dist/components/zonos-card2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as zonosStoreFontFamily } from './zonosStore.js';
+import { a as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
@@ -12,7 +12,6 @@ const ZonosCard = /*@__PURE__*/ proxyCustomElement(class ZonosCard extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.actions = undefined;
-        this.class = undefined;
         this.footerActions = undefined;
         this.footerContent = undefined;
         this.footerHeight = undefined;
@@ -20,9 +19,9 @@ const ZonosCard = /*@__PURE__*/ proxyCustomElement(class ZonosCard extends HTMLE
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: 'f2f7929742862b9806ddc568155e7cddf954252e', style: {
+        return (h(Host, { key: '8581e04d45e7061bff02485ad9a9a22920b5fe84', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'ce3568d7ded3cfb9acb0f4ff3d4184a17b88f33b', class: classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: '3cc9f896df1899da73eab80dfbb3aac3a0046956' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
+            } }, h("div", { key: '5e2038438e0885602c2e15808a34d62e86c95035', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: 'b7cbddad1cc08256ae9192349fe5a44302b6d79e' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
             } }, h("div", null, this.footerContent), h("h-stack", { spacing: 8 }, this.footerActions))))));
@@ -30,7 +29,6 @@ const ZonosCard = /*@__PURE__*/ proxyCustomElement(class ZonosCard extends HTMLE
     static get style() { return ZonosCardStyle0; }
 }, [1, "zonos-card", {
         "actions": [16],
-        "class": [1],
         "footerActions": [16],
         "footerContent": [16],
         "footerHeight": [2, "footer-height"],

package/dist/components/zonos-cart-items2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore } from './cart.js';
+import { c as cartStore } from './stripe.js';
 import { f as formatCurrency } from './formatCurrency.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 

package/dist/components/zonos-cart-subtotal2.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { c as cartStore } from './cart.js';
-import { t as translate } from './localization.js';
+import { t as translate, c as cartStore } from './stripe.js';
 import { f as formatCurrency } from './formatCurrency.js';
-import { d as defineCustomElement$3 } from './zonos-badge2.js';
-import { d as defineCustomElement$2 } from './zonos-icon2.js';
-import { d as defineCustomElement$1 } from './zonos-text2.js';
+import { d as defineCustomElement$4 } from './zonos-badge2.js';
+import { d as defineCustomElement$3 } from './zonos-icon2.js';
+import { d as defineCustomElement$2 } from './zonos-text2.js';
+import { d as defineCustomElement$1 } from './zonos-tooltip2.js';
 
 const InfoIcon = `<svg viewBox="0 0 17 16" fill="none" xmlns="https://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M1.96704 8.00065C1.96704 4.31875 4.93024 1.33398 8.58554 1.33398C12.2408 1.33398 15.204 4.31875 15.204 8.00065C15.204 11.6826 12.2408 14.6673 8.58554 14.6673C4.93024 14.6673 1.96704 11.6825 1.96704 8.00065Z" fill="#C5C6CA"/>
@@ -38,7 +38,7 @@ const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtot
                 amount: cartStore.shipping,
                 currency: cartStore.currency,
             })
-            : '-')), showDutyTaxesInfo && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-icon", { content: InfoIcon, size: 16 })), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { color: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxFees
+            : '-')), showDutyTaxesInfo && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-tooltip", { label: translate('Nothing due at the door') }, h("zonos-icon", { "aria-label": "Learn more about duties, taxes, and fees", content: InfoIcon, size: 16 }))), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { textColor: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxFees
             ? formatCurrency({
                 amount: cartStore.dutiesTaxFees,
                 currency: cartStore.currency,
@@ -59,7 +59,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-cart-subtotal", "zonos-badge", "zonos-icon", "zonos-text"];
+    const components = ["zonos-cart-subtotal", "zonos-badge", "zonos-icon", "zonos-text", "zonos-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "zonos-cart-subtotal":
             if (!customElements.get(tagName)) {
@@ -68,15 +68,20 @@ function defineCustomElement() {
             break;
         case "zonos-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "zonos-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/zonos-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosCheckbox extends Components.ZonosCheckbox, HTMLElement {}
+export const ZonosCheckbox: {
+    prototype: ZonosCheckbox;
+    new (): ZonosCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-checkbox.js

@@ -0,0 +1,6 @@
+import { Z as ZonosCheckbox$1, d as defineCustomElement$1 } from './zonos-checkbox2.js';
+
+const ZonosCheckbox = ZonosCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosCheckbox, defineCustomElement };

package/dist/components/zonos-checkbox2.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as zonosStoreFontFamily } from './zonosStore.js';
+import { c as classes } from './classes.js';
+import { g as getBorderRadius } from './getBorderRadius.js';
+import { i as isDarkColor } from './isDarkColor.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const colorPrefixes = [
+    'blue',
+    'cyan',
+    'green',
+    'orange',
+    'purple',
+    'red',
+    'gray',
+    'glass',
+];
+
+const zonosCheckboxCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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:-ms-inline-flexbox;display:inline-flex}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:var(--amino-space-8);-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--size);width:var(--size);background-color:transparent;border:1.5px solid var(--amino-gray-400);position:relative;border-radius:var(--border-radius, var(--amino-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--background-color);border-radius:var(--border-radius, var(--amino-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
+const ZonosCheckboxStyle0 = zonosCheckboxCss;
+
+const ZonosCheckbox = /*@__PURE__*/ proxyCustomElement(class ZonosCheckbox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.checkboxSelected = createEvent(this, "checkboxSelected", 7);
+        this.backgroundColor = 'blue';
+        this.label = undefined;
+        this.isChecked = false;
+        this.isDisabled = false;
+        this.size = 12;
+        this.fontSize = 'base';
+        this.borderStyle = undefined;
+    }
+    render() {
+        const isBackgroundVariable = colorPrefixes.includes(this.backgroundColor);
+        const backgroundColor = isBackgroundVariable
+            ? `var(--amino-${this.backgroundColor}-600)`
+            : this.backgroundColor;
+        const checkmarkColor = isBackgroundVariable
+            ? // use lighter color if the color is amino variable
+                `var(--amino-${this.backgroundColor}-200)`
+            : // if it's not an amino variable, use white if the background is dark, and dark if the background is light
+                !isDarkColor(backgroundColor)
+                    ? 'var(--amino-gray-800)'
+                    : 'var(--amino-gray-0)';
+        const borderStyle = getBorderRadius(this.borderStyle, '4px');
+        return (h(Host, { key: '86ab50028bec3f6a230b3a9492d06c1b2ce250fe', class: classes(['zonos--elements zonos--checkbox']), style: {
+                '--background-color': backgroundColor,
+                '--border-radius': borderStyle,
+                '--font-family': zonosStoreFontFamily(),
+                '--size': `${this.size}px`,
+            } }, h("label", { key: '88e87bb45739707a4e3da6d378ba491899dad76c', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c877ba4a2bd43aa67c394136ef4b3c71096e75aa', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+                this.checkboxSelected.emit(e.target.checked);
+            }, type: "checkbox" }), h("span", { key: '0f40603a3cf90c38f37b05d7bfd8ed54623b07f4', class: "checkmark-container" }, h("svg", { key: '67945bb82cc05997bb40aeef14c5c0fd452a68af', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac2d1db7ba5c1578dbe59f4ca9755a409ab24546', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { size: this.fontSize }, this.label)))));
+    }
+    static get style() { return ZonosCheckboxStyle0; }
+}, [1, "zonos-checkbox", {
+        "backgroundColor": [1, "background-color"],
+        "label": [1],
+        "isChecked": [4, "is-checked"],
+        "isDisabled": [4, "is-disabled"],
+        "size": [2],
+        "fontSize": [1, "font-size"],
+        "borderStyle": [1, "border-style"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-checkbox", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCheckbox);
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZonosCheckbox as Z, defineCustomElement as d };

package/dist/components/zonos-checkout-finish2.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { s as stripeStore, p as stripeStoreRetrievePayment, o as stripeStoreReset, c as cartStore } from './cart.js';
-import { h as handleFetch, t as translate } from './localization.js';
+import { o as handleFetch, s as stripeStore, p as stripeStoreRetrievePayment, t as translate, m as stripeStoreReset, c as cartStore } from './stripe.js';
 import { z as zonosStore } from './zonosStore.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { s as submitGtag } from './submitGtag.js';
@@ -47,6 +46,11 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
                 case 'CLOSE_MODAL':
                     this.closeClickHandler();
                     break;
+                case 'ZONOS_SUCCESS_PAGE':
+                default:
+                    // Do nothing, display Zonos success page
+                    this.isLoading = false;
+                    break;
             }
         };
         // TODO: This method of pulling orders is temporary. Once we have a working event registry system, we will rely on that to tell us when the order is ready to trigger onOrderSuccess
@@ -55,7 +59,6 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
             if (order) {
                 this.order = order;
                 this.handleSuccessBehavior(order.id);
-                this.isLoading = false;
             }
             else if (!order && attempts < 5) {
                 // Wait for 1 second before the next attempt
@@ -107,12 +110,17 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
                 }
                 // Attempt to pull the order details from the graph every second on 5 attempts
                 if (this.notificationType === 'success') {
-                    this.isLoading = true;
                     void this.getPullOrder();
                 }
+                else {
+                    this.isLoading = false;
+                }
+            }
+            else {
+                this.isLoading = false;
             }
             stripeStoreReset();
-            this.isLoading = false;
+            cartStore.checkoutSessionId = null;
         };
         this.closeClickHandler = () => {
             this.closeClick.emit();
@@ -145,9 +153,9 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: 'bdf824c48f7f01bcafd88b17ad758d05ab589ffd', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '08886ec74e789091534c8bd6561a8349a5a6966c', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius(this.borderRadius),
-            } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h(Fragment, null, h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (h("zonos-icon", { color: 'red-800', content: RemoveIcon, size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
+            } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h(Fragment, null, h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return ZonosCheckoutFinishStyle0; }