@zonos/elements 1.3.5 → 1.3.7-alpha.0

package/dist/components/zonos-hello-dialog2.js

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { k as currencyFormat, b as localizationStore, t as translate } from './localization.js';
+import { D as currencyFormat, b as localizationStore, t as translate } from './stripe.js';
 import { z as zonosStore } from './zonosStore.js';
 import { c as classes } from './classes.js';
-import { d as defineCustomElement$b } from './zonos-banner2.js';
-import { d as defineCustomElement$a } from './zonos-button2.js';
-import { d as defineCustomElement$9 } from './zonos-card2.js';
-import { d as defineCustomElement$8 } from './zonos-country-flag2.js';
-import { d as defineCustomElement$7 } from './zonos-country-select2.js';
-import { d as defineCustomElement$6 } from './zonos-custom-message2.js';
-import { d as defineCustomElement$5 } from './zonos-hello-dialog-footer2.js';
-import { d as defineCustomElement$4 } from './zonos-icon2.js';
+import { d as defineCustomElement$d } from './zonos-banner2.js';
+import { d as defineCustomElement$c } from './zonos-button2.js';
+import { d as defineCustomElement$b } from './zonos-card2.js';
+import { d as defineCustomElement$a } from './zonos-country-flag2.js';
+import { d as defineCustomElement$9 } from './zonos-country-select2.js';
+import { d as defineCustomElement$8 } from './zonos-custom-message2.js';
+import { d as defineCustomElement$7 } from './zonos-hello-dialog-footer2.js';
+import { d as defineCustomElement$6 } from './zonos-icon2.js';
+import { d as defineCustomElement$5 } from './zonos-language-select2.js';
+import { d as defineCustomElement$4 } from './zonos-select-dialog-header2.js';
 import { d as defineCustomElement$3 } from './zonos-spinner2.js';
 import { d as defineCustomElement$2 } from './zonos-text2.js';
 import { d as defineCustomElement$1 } from './zonos-v-stack2.js';
@@ -45,7 +47,7 @@ const MoneyIcon = `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" x
 
 const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
 
-const zonosHelloDialogCss = ":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 .zonos--hello-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}:host .zonos--hello-dialog{position:absolute;background:var(--amino-surface-color);width:100vw;max-width:430px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-height:600px;border-radius:var(--amino-radius-12);outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);overflow-y:auto;top:-2px;right:-2px;opacity:0;-webkit-transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:top right;transform-origin:top right;z-index:1001}:host .zonos--hello-dialog .zonos--hello-dialog-header{text-align:center}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:top left;transform-origin:top left;right:unset;left:-2px}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom{-webkit-transform-origin:bottom right;transform-origin:bottom right;bottom:calc(100% - 32px);top:unset}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom left;transform-origin:bottom left}:host .zonos--hello-dialog::-webkit-scrollbar{width:12px;height:12px}:host .zonos--hello-dialog::-webkit-scrollbar-track{background:#f5f5f5;border-top-right-radius:var(--amino-radius-12);border-bottom-right-radius:var(--amino-radius-12)}:host .zonos--hello-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#ccc;border:4px solid transparent;background-clip:content-box}:host .zonos--hello-dialog::-webkit-scrollbar-thumb:hover{background:#999}:host .zonos--hello-dialog .zonos--animate-content{opacity:0;height:0;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}:host .zonos--hello-dialog .zonos--show-animate-content{opacity:1;height:100%}:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}:host .zonos--hello-dialog .zonos--close-button{position:absolute;right:var(--amino-space-8);top:var(--amino-space-8);width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;z-index:10}:host .zonos--hello-dialog .zonos--close-button:hover{background:var(--amino-hover-color);border-radius:var(--amino-radius-6)}:host .zonos--hello-dialog .zonos--hello-dialog-content{padding:var(--amino-space-16)}:host .zonos--hello-dialog .zonos--hello-dialog-content .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:32px;height:24px}:host .zonos--hello-dialog .zonos--flex-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-12)}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:unset;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}@media (max-width: 768px){:host .zonos--hello-dialog{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:unset;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}";
+const zonosHelloDialogCss = ":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 .zonos--hello-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}:host .zonos--hello-dialog{position:absolute;background:var(--amino-surface-color);width:100vw;max-width:430px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-height:600px;border-radius:var(--amino-radius-12);outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);overflow-y:auto;top:-2px;right:-2px;opacity:0;-webkit-transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:top right;transform-origin:top right;z-index:1001}:host .zonos--hello-dialog .zonos--hello-dialog-header{text-align:center}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:top left;transform-origin:top left;right:unset;left:-2px}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom{-webkit-transform-origin:bottom right;transform-origin:bottom right;bottom:calc(100% - 32px);top:unset}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom left;transform-origin:bottom left}:host .zonos--hello-dialog::-webkit-scrollbar{width:12px;height:12px}:host .zonos--hello-dialog::-webkit-scrollbar-track{background:#f5f5f5;border-top-right-radius:var(--amino-radius-12);border-bottom-right-radius:var(--amino-radius-12)}:host .zonos--hello-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#ccc;border:4px solid transparent;background-clip:content-box}:host .zonos--hello-dialog::-webkit-scrollbar-thumb:hover{background:#999}:host .zonos--hello-dialog .zonos--animate-content{opacity:0;height:0;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}:host .zonos--hello-dialog .zonos--show-animate-content{opacity:1;height:100%}:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}:host .zonos--hello-dialog .zonos--close-button{position:absolute;right:var(--amino-space-8);top:var(--amino-space-8);width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;z-index:10}:host .zonos--hello-dialog .zonos--close-button:hover{background:var(--amino-hover-color);border-radius:var(--amino-radius-6)}:host .zonos--hello-dialog .zonos--hello-dialog-content{padding:var(--amino-space-16)}:host .zonos--hello-dialog .zonos--hello-dialog-content .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:32px;height:24px}:host .zonos--hello-dialog .zonos--flex-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-12)}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:500px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}@media (max-height: 600px){:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override{max-height:80vh}}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}@media (max-width: 768px){:host .zonos--hello-dialog{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:500px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}}@media (max-width: 768px) and (max-height: 600px){:host .zonos--hello-dialog{max-height:80vh}}@media (max-width: 768px){:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}}@media (max-width: 768px){:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}";
 const ZonosHelloDialogStyle0 = zonosHelloDialogCss;
 
 const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog extends HTMLElement {
@@ -76,6 +78,9 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
         this.setShowCountrySelect = async (value) => {
             this.showCountrySelect = value;
         };
+        this.setShowLanguageSelect = async (value) => {
+            this.showLanguageSelect = value;
+        };
         this.isOpen = false;
         this.setIsOpen = () => { };
         this.mobileLocationOverride = undefined;
@@ -84,6 +89,7 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
         this.restrictedItems = [];
         this.welcomeMessage = 'Welcome to our Demo App!';
         this.showCountrySelect = false;
+        this.showLanguageSelect = false;
     }
     globalClickHandler(e) {
         this.clickOutsideDialogHandler(e);
@@ -91,6 +97,7 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
     isOpenHandler(isOpen) {
         if (!isOpen) {
             void this.setShowCountrySelect(false);
+            void this.setShowLanguageSelect(false);
         }
     }
     render() {
@@ -128,17 +135,17 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
             translate('Know about duties and taxes before you buy. Shop with confidence!');
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '56fcc25e2fabf8c2f1edf727a64d213f18729c00', class: "zonos--elements" }, h("div", { key: 'c83e357cd266c605015e136eb23906bd4385e7f5', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: '303f914b4511500edcd8d041ccfd52f0c48a7a85', class: "zonos--elements" }, h("div", { key: 'f52025ee53c0cdbbf20ecbb874e5639194b6507b', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, h("div", { key: '8d5811f45f2cfe8bd1c0ca3131d99ebc69b7b00d', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '137ea59ae312bee3817292dde42e2e718e70001b', class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), this.showCountrySelect ? (h("div", null, h("zonos-country-select", { closeCountrySelect: () => this.setShowCountrySelect(false) }))) : (h("div", null, h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { color: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", null, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { textColor: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
-            return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { color: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))))), !this.showCountrySelect && (h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value) })))));
+            return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
+        }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", null, h("zonos-country-select", { handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", null, h("zonos-language-select", { handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -153,7 +160,8 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
         "appearanceSettings": [16],
         "restrictedItems": [16],
         "welcomeMessage": [32],
-        "showCountrySelect": [32]
+        "showCountrySelect": [32],
+        "showLanguageSelect": [32]
     }, [[4, "click", "globalClickHandler"]], {
         "isOpen": ["isOpenHandler"]
     }]);
@@ -161,7 +169,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-hello-dialog", "zonos-banner", "zonos-button", "zonos-card", "zonos-country-flag", "zonos-country-select", "zonos-custom-message", "zonos-hello-dialog-footer", "zonos-icon", "zonos-spinner", "zonos-text", "zonos-v-stack"];
+    const components = ["zonos-hello-dialog", "zonos-banner", "zonos-button", "zonos-card", "zonos-country-flag", "zonos-country-select", "zonos-custom-message", "zonos-hello-dialog-footer", "zonos-icon", "zonos-language-select", "zonos-select-dialog-header", "zonos-spinner", "zonos-text", "zonos-v-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "zonos-hello-dialog":
             if (!customElements.get(tagName)) {
@@ -170,40 +178,50 @@ function defineCustomElement() {
             break;
         case "zonos-banner":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$d();
             }
             break;
         case "zonos-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "zonos-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
             }
             break;
         case "zonos-country-flag":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
             }
             break;
         case "zonos-country-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
             }
             break;
         case "zonos-custom-message":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
             }
             break;
         case "zonos-hello-dialog-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
             }
             break;
         case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "zonos-language-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "zonos-select-dialog-header":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/zonos-hello.js

@@ -1,16 +1,18 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, m as mergeConfig } from './zonosStore.js';
-import { h as handleFetch, l as logError, b as localizationStore, i as isValidSelector, t as translate, g as getZCountryUrlParam, s as setZCountryUrlParam, a as log, e as currencyDisplay, f as currencyConvertAndFormat, j as currencyConvert, k as currencyFormat } from './localization.js';
+import { o as handleFetch, l as logError, b as localizationStore, v as isValidSelector, t as translate, y as getZCountryUrlParam, z as setZCountryUrlParam, d as log, A as currencyDisplay, B as currencyConvertAndFormat, C as currencyConvert, D as currencyFormat } from './stripe.js';
 import { c as classes } from './classes.js';
-import { g as getHasMoreSpaceOnRight, d as defineCustomElement$7 } from './zonos-hello-dialog2.js';
-import { d as defineCustomElement$d } from './zonos-banner2.js';
-import { d as defineCustomElement$c } from './zonos-button2.js';
-import { d as defineCustomElement$b } from './zonos-card2.js';
-import { d as defineCustomElement$a } from './zonos-country-flag2.js';
-import { d as defineCustomElement$9 } from './zonos-country-select2.js';
-import { d as defineCustomElement$8 } from './zonos-custom-message2.js';
-import { d as defineCustomElement$6 } from './zonos-hello-dialog-footer2.js';
-import { d as defineCustomElement$5 } from './zonos-icon2.js';
+import { g as getHasMoreSpaceOnRight, d as defineCustomElement$9 } from './zonos-hello-dialog2.js';
+import { d as defineCustomElement$f } from './zonos-banner2.js';
+import { d as defineCustomElement$e } from './zonos-button2.js';
+import { d as defineCustomElement$d } from './zonos-card2.js';
+import { d as defineCustomElement$c } from './zonos-country-flag2.js';
+import { d as defineCustomElement$b } from './zonos-country-select2.js';
+import { d as defineCustomElement$a } from './zonos-custom-message2.js';
+import { d as defineCustomElement$8 } from './zonos-hello-dialog-footer2.js';
+import { d as defineCustomElement$7 } from './zonos-icon2.js';
+import { d as defineCustomElement$6 } from './zonos-language-select2.js';
+import { d as defineCustomElement$5 } from './zonos-select-dialog-header2.js';
 import { d as defineCustomElement$4 } from './zonos-spinner2.js';
 import { d as defineCustomElement$3 } from './zonos-text2.js';
 import { d as defineCustomElement$2 } from './zonos-v-stack2.js';
@@ -761,7 +763,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-hello", "zonos-banner", "zonos-button", "zonos-card", "zonos-country-flag", "zonos-country-select", "zonos-custom-message", "zonos-hello-dialog", "zonos-hello-dialog-footer", "zonos-icon", "zonos-spinner", "zonos-text", "zonos-v-stack"];
+    const components = ["zonos-hello", "zonos-banner", "zonos-button", "zonos-card", "zonos-country-flag", "zonos-country-select", "zonos-custom-message", "zonos-hello-dialog", "zonos-hello-dialog-footer", "zonos-icon", "zonos-language-select", "zonos-select-dialog-header", "zonos-spinner", "zonos-text", "zonos-v-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "zonos-hello":
             if (!customElements.get(tagName)) {
@@ -770,45 +772,55 @@ function defineCustomElement$1() {
             break;
         case "zonos-banner":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$f();
             }
             break;
         case "zonos-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$e();
             }
             break;
         case "zonos-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$d();
             }
             break;
         case "zonos-country-flag":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "zonos-country-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
             }
             break;
         case "zonos-custom-message":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
             }
             break;
         case "zonos-hello-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
             }
             break;
         case "zonos-hello-dialog-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
             }
             break;
         case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "zonos-language-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "zonos-select-dialog-header":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/components/zonos-icon2.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';
 
 const zonosIconCss = ":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 svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";
 const ZonosIconStyle0 = zonosIconCss;
@@ -10,7 +10,7 @@ const ZonosIcon = /*@__PURE__*/ proxyCustomElement(class ZonosIcon extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.autoHeight = false;
-        this.color = 'gray-1200';
+        this.iconColor = 'gray-1200';
         this.content = undefined;
         this.size = 24;
     }
@@ -20,7 +20,7 @@ const ZonosIcon = /*@__PURE__*/ proxyCustomElement(class ZonosIcon extends HTMLE
         }
         this.el.shadowRoot.innerHTML = this.content;
         return (h(Host, { class: "zonos--elements", style: {
-                '--color': `var(--amino-${this.color})`,
+                '--color': `var(--amino-${this.iconColor})`,
                 '--font-family': zonosStoreFontFamily(),
                 '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
                 '--width': `${this.size}px`,
@@ -30,7 +30,7 @@ const ZonosIcon = /*@__PURE__*/ proxyCustomElement(class ZonosIcon extends HTMLE
     static get style() { return ZonosIconStyle0; }
 }, [1, "zonos-icon", {
         "autoHeight": [4, "auto-height"],
-        "color": [1],
+        "iconColor": [1, "icon-color"],
         "content": [1],
         "size": [2]
     }]);

package/dist/components/zonos-language-select.d.ts

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

package/dist/components/zonos-language-select.js

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

package/dist/components/zonos-language-select2.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { q as localizationStoreUpdateSelectedLocale, t as translate, b as localizationStore } from './stripe.js';
+import { a as zonosStoreFontFamily } from './zonosStore.js';
+import { l as languages } from './ILanguage.js';
+import { d as defineCustomElement$6 } from './zonos-button2.js';
+import { d as defineCustomElement$5 } from './zonos-icon2.js';
+import { d as defineCustomElement$4 } from './zonos-select-dialog-header2.js';
+import { d as defineCustomElement$3 } from './zonos-spinner2.js';
+import { d as defineCustomElement$2 } from './zonos-text2.js';
+import { d as defineCustomElement$1 } from './zonos-v-stack2.js';
+
+const GreenCheckDuotoneIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99996 2.6665C5.05444 2.6665 2.66663 5.05432 2.66663 7.99984C2.66663 10.9454 5.05444 13.3332 7.99996 13.3332C10.9455 13.3332 13.3333 10.9454 13.3333 7.99984C13.3333 5.05432 10.9455 2.6665 7.99996 2.6665Z" fill="#AFF8C3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1403 6.10535C10.3582 6.27488 10.3975 6.58902 10.228 6.80699L8.01055 9.65797C7.76436 9.97449 7.29646 10.0036 7.01291 9.72008L5.81307 8.52024C5.61781 8.32498 5.61781 8.0084 5.81307 7.81314C6.00833 7.61787 6.32492 7.61787 6.52018 7.81314L7.45301 8.74597L9.43862 6.19305C9.60815 5.97508 9.92229 5.93581 10.1403 6.10535Z" fill="#246627"/>
+</svg>
+`;
+
+const zonosLanguageSelectCss = ":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 .zonos--language-select{width:100%}:host .zonos--language-select .zonos--language-select-content{display:grid;grid-template-columns:repeat(3, minmax(-webkit-max-content, 1fr));grid-template-columns:repeat(3, minmax(max-content, 1fr));padding:var(--amino-space-16);padding-top:var(--amino-space-0)}:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button{display:-ms-flexbox;display:flex;padding:var(--amino-space-8);gap:var(--amino-space-4);-ms-flex-align:center;align-items:center;border-radius:var(--amino-radius-4);cursor:pointer;width:100%;border:none;background:none}:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button:hover{background:var(--amino-gray-100)}@media (max-width: 400px){:host .zonos--language-select .zonos--language-select-content{grid-template-columns:1fr 1fr}}";
+const ZonosLanguageSelectStyle0 = zonosLanguageSelectCss;
+
+const ZonosLanguageSelect = /*@__PURE__*/ proxyCustomElement(class ZonosLanguageSelect extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.languageSelected = (languageCode) => {
+            // mutate the selected language code in store
+            void localizationStoreUpdateSelectedLocale(languageCode);
+            this.handleOnClose();
+        };
+        this.handleOnClose = () => { };
+    }
+    render() {
+        const { selectedLocale } = localizationStore;
+        return (h(Host, { key: 'c90288e341c50d113cc63d09e864ddfa346d55a1', class: "zonos--elements", style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '4dabc3c9ab177e5545942c725490af64cb9608c3', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '95f111f3774a568ea44204858fe503fa7c1915f3', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'c2634e3b006f3d14c67ee78c0c9befdb21cecc72', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { color: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+    }
+    static get style() { return ZonosLanguageSelectStyle0; }
+}, [1, "zonos-language-select", {
+        "handleOnClose": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-language-select", "zonos-button", "zonos-icon", "zonos-select-dialog-header", "zonos-spinner", "zonos-text", "zonos-v-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-language-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosLanguageSelect);
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "zonos-select-dialog-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-v-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZonosLanguageSelect as Z, defineCustomElement as d };

package/dist/components/zonos-link-authentication2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore, k as stripeStorePrefetchLandedCost } from './cart.js';
+import { s as stripeStore, a as stripeStorePrefetchLandedCost } from './stripe.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
 const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";
@@ -39,7 +39,7 @@ const ZonosLinkAuthentication = /*@__PURE__*/ proxyCustomElement(class ZonosLink
     }
     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: '5d02895b441a5713b83e7b3c4b784ab4b6743f54', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '5bd33edd16f1511111bfcb497e0767f938172b05', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd5a90ce88adaed9f2369af4692506d5d072c021d', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: 'aec893e026a60bcbf81e93a3c63a842f97437dcc', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '93c2c462d3a108364d2dfbc4aeab058f87bcc7b3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '0098e20d87cce7547fc1abf26859c0d3765407cd', class: "zonos--link-authentication-component" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/zonos-logo.js

@@ -1,4 +1,47 @@
-import { Z as ZonosLogo$1, d as defineCustomElement$1 } from './zonos-logo2.js';
+import { proxyCustomElement, HTMLElement, h, Host, getAssetPath } from '@stencil/core/internal/client';
+import { a as zonosStoreFontFamily } from './zonosStore.js';
+import { c as classes } from './classes.js';
+
+const zonosLogoCss = ":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 img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
+const ZonosLogoStyle0 = zonosLogoCss;
+
+const ZonosLogo$1 = /*@__PURE__*/ proxyCustomElement(class ZonosLogo extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.theme = 'LIGHT';
+        this.width = 'auto';
+    }
+    render() {
+        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 (h(Host, { key: '5e97dd0219dde036eef02757f055354390b18c3d', class: classes(['zonos--elements zonos--logo']), style: {
+                '--filter-color': filterColor,
+                '--font-family': zonosStoreFontFamily(),
+                '--width': this.width,
+            } }, h("img", { key: '44c720d0a7bf3cf5a6bd783f21c8493d3a53ec70', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return ZonosLogoStyle0; }
+}, [1, "zonos-logo", {
+        "theme": [1],
+        "width": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-logo"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-logo":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosLogo$1);
+            }
+            break;
+    } });
+}
 
 const ZonosLogo = ZonosLogo$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/zonos-notification2.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';
 
@@ -11,7 +11,6 @@ const ZonosNotification = /*@__PURE__*/ proxyCustomElement(class ZonosNotificati
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.class = '';
         this.notificationArray = [];
     }
     /**
@@ -54,21 +53,20 @@ const ZonosNotification = /*@__PURE__*/ proxyCustomElement(class ZonosNotificati
         }, 300);
     }
     render() {
-        return (h(Host, { key: '0846607651bce1e7acfc92cc775f86ce399dc789', class: classes(['zonos--elements zonos--notification', this.class]), style: {
+        return (h(Host, { key: '3567d975084d41ba075ccf92347adf31e200b41f', class: classes(['zonos--elements zonos--notification']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '1a4dd6b138b21b8a626d3df3a9c353590d51fd8c', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+            } }, h("div", { key: 'c01555f14621f43d515f0593ed5463d4aa9b1309', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
             return (h("div", { "aria-hidden": "true", class: classes([
                     'zonos--notification-item',
                     notification.type,
                     notification.transitionClass,
                 ]), key: notification.id, onClick: () => {
                     this.removeNotification(notification.id);
-                } }, h("zonos-text", { color: "gray-0" }, notification.message)));
+                } }, h("zonos-text", { textColor: "gray-0" }, notification.message)));
         }))));
     }
     static get style() { return ZonosNotificationStyle0; }
 }, [1, "zonos-notification", {
-        "class": [1],
         "notificationArray": [32],
         "showNotification": [64]
     }]);

package/dist/components/zonos-payment2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore } from './cart.js';
+import { s as stripeStore } from './stripe.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
 const zonosPaymentCss = ".sc-zonos-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-payment-h *.sc-zonos-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:var(--amino-space-16)}";
@@ -40,7 +40,7 @@ const ZonosPayment = /*@__PURE__*/ proxyCustomElement(class ZonosPayment extends
     }
     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: '365e346a6cda504bdbc825ff8e25b7492bf1d19b', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'f76c3b4ef941ecc8cb99ac3593b9d902eda5b1e7', class: "zonos--payment-component" })));
+        return (h(Host, { key: 'd5b7717fa4b80da99ae6ba2d7cccbe318e091f8f', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '37bd2c2dcc59613857b9fd22d864c0d11b2a7319', class: "zonos--payment-component" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/zonos-review2.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } 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 { z as zonosStore } from './zonosStore.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
 import { c as classes } from './classes.js';
@@ -43,14 +42,14 @@ const ZonosReview = /*@__PURE__*/ proxyCustomElement(class ZonosReview extends H
                 return null;
             }
             if (!this.collapsed) {
-                return (h("zonos-icon", { color: "gray-1200", content: ChevronDownIcon }));
+                return (h("zonos-icon", { "aria-label": "Collapse expanded section", content: ChevronDownIcon, iconColor: "gray-1200" }));
             }
-            return (h("zonos-icon", { color: "gray-1200", content: ChevronUpIcon }));
+            return (h("zonos-icon", { "aria-label": "Expand collapsed section", content: ChevronUpIcon, iconColor: "gray-1200" }));
         };
         return (h(Host, { class: classes([
                 'zonos--review zonos--elements',
                 this.isMobile && 'mobile',
-            ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { color: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
+            ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
             amount: 
             // show total without taxes when step is shipping, show total with taxes when step is payment
             cartStore.step === 'shipping'

package/dist/components/zonos-select-dialog-header.d.ts

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

package/dist/components/zonos-select-dialog-header.js

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