@zonos/elements 1.3.282 → 1.3.284

package/dist/collection/components/common/zonos-stripe-input/zonos-stripe-input.js

@@ -69,7 +69,7 @@ export class ZonosStripeInput {
             ? zonosStore.appearance.theme === 'DARK'
             : primaryColor && isDarkColor(primaryColor);
         const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
-        return (h(Host, { key: 'e7559e04aafad07699bd6bebfd4cf191d0cd1b4f', class: classes([
+        return (h(Host, { key: 'b527df7c911ed1d090805f89793b1db0d2e60935', class: classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
                 (this.isError || !!this.error) && 'has-error',
@@ -78,10 +78,10 @@ export class ZonosStripeInput {
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--font-size': `${fontSize}px`,
                 '--zonos--primary-color': secondaryColor,
-            } }, h("div", { key: 'e7bce60978e071136b5a82bc4db8a0cf681273fc', class: classes([
+            } }, h("div", { key: '34638283e1cc53399e0c06939698ab565cb45898', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", Object.assign({ key: '6bfb929ad025d1a28860002561e8ae2abbc38e40' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("input", Object.assign({ key: '3c6786e238870a22df24226b849df8c50285066f' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.internalValue && 'has-content',
@@ -91,7 +91,7 @@ export class ZonosStripeInput {
                 this.inputChange.emit(input.value);
                 this.el.inputValue = input.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), h("div", { key: '0904c241ee73055982c7cd0ee5f9ee8559e6fa8b', class: "zonos--floated-label" }, h("label", { key: '581ac49d26e58bf0e61d1c21d13232dbc01557ee', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: '5cd20b5de0552c5a37dc22decdf9d54330d75028', textColor: "red-600", type: "caption" }, this.error))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), h("div", { key: '32ef73f611becbc961b594a22976651eeb2547cd', class: "zonos--floated-label" }, h("label", { key: '7ef5e3be28b12f1d17f20cd6698ccb877b74a28b', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: '5d0e354d1ff22b9d0d9ab92a571029ce3b06be9b', textColor: "red-600", type: "caption" }, this.error))));
     }
     static get is() { return "zonos-stripe-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/common/zonos-stripe-phone-input/zonos-stripe-phone-input.js

@@ -122,6 +122,15 @@ export class ZonosStripePhoneInput {
             this.updatePhoneFormatter();
         };
     }
+    onCountryCodeChange() {
+        /**
+         * Re-derive the dial code when the address country changes, otherwise a
+         * shopper who changes country keeps the previous country's dial code — for
+         * example a US billing address on a Mexico shipment would send a US phone
+         * number prefixed with +52 (05CHECK-915).
+         */
+        this.initPhoneNumberValue();
+    }
     onCountryOptionsChange() {
         // Re-initialize the phone number value when the country options change
         this.initPhoneNumberValue();
@@ -201,24 +210,24 @@ export class ZonosStripePhoneInput {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: 'd89450cd871f6220d00b325157e8b9213f1eede6', class: classes([
+        return (h(Host, { key: 'e2a1fc4c2e5f57dc1ae904b70b5f7f421297ae0c', class: classes([
                 'zonos--phone-input zonos--elements',
                 isDark && 'dark',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '7ec4d175288776584c2938ecb97ec3ddf862e782', class: classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '61a2ee1f566234692a80fe68fbc4d171f36263dc', class: classes([
                 'zonos--label-wrapper',
                 this.disabled && 'disabled',
                 this.isFocused && 'focused',
                 hasContent && 'has-content',
                 this.error && 'has-error',
                 this.inputLabel && 'has-label',
-            ]) }, h("select", { key: 'e4366c1c6ab1a2368a29948f1766978aa8fa580d', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, h("select", { key: '32602cf340a06a26c483f049595cdd812826275e', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
             var _a;
             return (h("option", { key: option.countryCode, selected: option.countryCode === ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode), value: option.countryCode }, option.displayName, " (+", option.phoneCode, ")"));
-        })), h("div", { key: 'f24b7bd87a8113d5cd240f3c11f5304a277c4f88', class: "zonos--input-group" }, h("div", { key: '3eafacfbe41af7221e9d40646849d6e5d48b1640', class: "zonos--select-wrapper" }, h("div", { key: 'cf11e4657375cf81e3c8cfce697c5bd171b93391', class: "zonos--country-select" }, h("div", { key: '503b7b08f66b5b875a3adb6b22a3011e19fe610e', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: 'f99b75f25ae1cbb9d05b308b5d4687a650ee7d4c', class: "zonos--country-select-selected" }, h("div", { key: '030899619207c8e809ffed56761372b0d83e50d0', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'd3661dc8f66fb21d16e5ef686652ef8a966e0a88', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '23bff50c220aa53dc0182d8ccc0b213b47930cd3', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'aa4cd5be6353f36ea3efd0d7fb7f1816c34ae48b', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '3ff4a4fc0e0c6d1d8d293a5b09138d1aae445050', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: '7f60b7f27c0f2d4ecba6ab9fa36fc0c438b8a16d', class: classes([
+        })), h("div", { key: '1a36aa363a853c420303241e75d89e5aa298dee9', class: "zonos--input-group" }, h("div", { key: '7f4d30619c8f69b98422bfcab964113d598d45fa', class: "zonos--select-wrapper" }, h("div", { key: '44d0f28dde38fc09ce612ad4cb78f9d1fbdbe951', class: "zonos--country-select" }, h("div", { key: 'c438e242374e303688150aec2c8eae51b6e1427d', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '2aaec2a6315d2ee84244c4458efce6d27c8598ad', class: "zonos--country-select-selected" }, h("div", { key: '819a8b6fd270e43992c19a4b96a4ce5335ae166f', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '090e6ce55541db022a55497b1b3a6fa7ff2b5406', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '021bc4bf590fb6dca736478cc8f9914ce764c1ab', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'f7256f51c803d1b5aedb3b5d646a777cb553aa9d', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: 'a018c3fffc1c029df874d9be3c938307b4609d82', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: 'dd20516acf7d5cab10fe91ff4a6f59cc91600732', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, h("input", Object.assign({ key: 'b821664395945a074682793137940507ece7126b' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: 'e2ccfc80835f3a20fe973c0e1a11314212ab0c00', class: "zonos--floated-label" }, h("label", { key: 'b7d96e8332fb7c3cd4f084f76bf472107ae1e73b', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '0aae60a88c79d3fade222efccd1049a4b130fbbc', textColor: "red-600" }, this.error))));
+            ]) }, h("input", Object.assign({ key: 'ed8b536ba7aac9bae8012692ceb9f8573640c5d6' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: 'be2ae82b335dd291d53f48a73f9b23744392daf6', class: "zonos--floated-label" }, h("label", { key: '1894a34c3a5ea09b2b45e8dfc9103d944ac69118', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: 'ae0ab1f97abbecf8dda4eced5aa139d8c51decaf', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-phone-input"; }
     static get encapsulation() { return "scoped"; }
@@ -475,6 +484,9 @@ export class ZonosStripePhoneInput {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "countryCode",
+                "methodName": "onCountryCodeChange"
+            }, {
                 "propName": "countryOptions",
                 "methodName": "onCountryOptionsChange"
             }, {

package/dist/collection/components/common/zonos-toggle/zonos-toggle.js

@@ -9,9 +9,9 @@ export class ZonosToggle {
         this.options = [];
     }
     render() {
-        return (h(Host, { key: 'e4177068eca8831790db346088acde5c24a1cb52', class: classes(['zonos--elements zonos--toggle']), style: {
+        return (h(Host, { key: 'ad5de3fba6f9f7a5d0820f95c809c6fd9e6d4ca7', class: classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '89c8561a03f2e9c11c858b406fd8dd5cbc92a9b7', class: "wrapper" }, this.options.map(option => {
+            } }, h("div", { key: 'd3d4321651c434734e86c470d6861241fcac361b', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (h("button", { class: classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);

package/dist/collection/components/common/zonos-tooltip/zonos-tooltip.js

@@ -13,10 +13,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '4ecaaf78a0ee54dccd5efd6ec60d201a8946f9e9', class: "zonos--elements" }, h("div", { key: '5dc14bbe9d21712a29fe62cb6ade2a1e1a1c6385', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '2eb58e776a1d925eff1fc8e48ce337b915dbb515' }), h("div", { key: '9975d37625398918d5a9ddf2f645a4c0a496ed2a', class: classes([
+        return (h(Host, { key: 'dec4ec190caa8eff63510bafb396087c7d1ae304', class: "zonos--elements" }, h("div", { key: 'fff103cf2dc66160e3c543778d563356af6e90b3', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '598f45708f665eb38bfd242304e12b99251c076e' }), h("div", { key: 'd7eb99f4cf160f4493e64cc72101429181fd9cea', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '9f4c3070b5cc96793d18950decb2f77e608b8708', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '2273a609eb5fd33a661c88f35e7fc6777ea75ccf', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: 'fc713d623e095ed8fc26150dd6fabdec7a53f2c7', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '40201243e7c926a54225cc17fd3d65a1ce0047b9', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -11,9 +11,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '55d608e49a9d0a95c23902c68f555d3d17e34675', style: {
+        return (h(Host, { key: 'b6f24a7be77dc8fa71e68c8690e6cf1fc58489ce', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '529887c92438dd3793d2c4737ff2ae52abe560cb', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '2a3c3c193aa74b9829dca73bddfdbd3dbed4c6c6' }))));
+            } }, h("div", { key: '955284df5a7d236d49a08b9ec6980e0a2fb80fdd', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '5943abd1029f14d7eb218f4295ef797a3750b59f' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.js

@@ -106,10 +106,10 @@ export class ZonosVirtualScroll {
     render() {
         const { width: containerWidth } = this.containerDimensions;
         const visibleItems = this.getVisibleItems();
-        return (h(Host, { key: 'e979610a7ed0e4bb1dd98b50043b65282aac26bf', class: classes(['zonos--virtual-scroll']) }, h("div", { key: 'ca73da524a4289cd4142a05d81bf3de691215690', class: classes(['scroller']), style: {
+        return (h(Host, { key: 'c0fd60e189050acf992bc2026e4ad8ccb29979b7', class: classes(['zonos--virtual-scroll']) }, h("div", { key: 'bff8755f234cf5d424c43d14b5b565e09bab6096', class: classes(['scroller']), style: {
                 height: `${this.totalHeight}px`,
                 width: `${containerWidth}px`,
-            } }), h("div", { key: 'dd70c5ae1d9f9481de5fc08569933932413bdde4', class: classes(['item-container']), style: {
+            } }), h("div", { key: '95cc9958b418e2c42936b08f453f2415279985e9', class: classes(['item-container']), style: {
                 height: `${this.totalHeight}px`,
             } }, visibleItems.map(({ element }) => element))));
     }

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -19,7 +19,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '4e29ec8d8aeafa6d194925220355d6a8a785e838' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '7cc54490d65b2d6596a09f37bd0a842c66179d2c' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -507,7 +507,7 @@ export class ZonosHello {
                 "mutable": false,
                 "complexType": {
                     "original": "Partial<AppearanceConfig>",
-                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; fontSize2XL?: number | undefined; fontSize3XL?: number | undefined; fontSizeBase?: number | undefined; fontSizeInputLabel?: number | undefined; fontSizeInputValue?: number | undefined; fontSizeL?: number | undefined; fontSizeS?: number | undefined; fontSizeXL?: number | undefined; fontSizeXS?: number | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; fontSize2XL?: number | undefined; fontSize3XL?: number | undefined; fontSizeBase?: number | undefined; fontSizeInputLabel?: number | undefined; fontSizeInputValue?: number | undefined; fontSizeL?: number | undefined; fontSizeS?: number | undefined; fontSizeXL?: number | undefined; fontSizeXS?: number | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; supportedLocales?: string[] | null | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
                     "references": {
                         "Partial": {
                             "location": "global",

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { localizationStore } from "../../../store/hello/localization";
 import { isDarkColor } from "../../../utils/isDarkColor";
+import { shouldShowLanguageSelect } from "../../../utils/shouldShowLanguageSelect";
 import { languages } from "../../../../types/ILanguage";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import ChevronDownIcon from "./assets/chevronDownIcon.svg";
@@ -26,12 +27,14 @@ export class ZonosHelloDialogFooter {
     render() {
         var _a, _b;
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
+        // label resolves against every language, not just the offered ones, so the current
+        // locale always renders even if the merchant later drops it from the selector
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
         const mainColor = primaryColor && isDarkColor(primaryColor) ? 'white' : 'black';
-        return (h(Host, { key: '350a056fbc8cb1caf686857a1ef9d2915d9aa746', class: "zonos--elements" }, h("div", { key: 'bd98b0bb2cae37470b7640df4337173fcec9ebe5', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: '6541ca916c9d51407a45f2ec88ce59c64db2d7d1', class: "zonos--elements" }, h("div", { key: '0b34542b6b33cf9f5763a5da6b893a8a3dee45fc', class: "zonos--hello-dialog-footer", style: {
                 '--zonos--primary-color': primaryColor,
-            } }, h("a", { key: '1aee2bb2f699d0368921bec9a2adb4a8b2a2b9ab', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'e5c683a859f72c3c831d41be2198214c9046093c', "aria-label": "Zonos Logo", autoHeight: true, content: mainColor === 'black' ? ZonosIconLight : ZonosIconDark, iconColor: mainColor, size: 108 })), h("div", { key: '904549591a920cfc44634b6fdb4859acf3ba8fe5', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '0fcfbfe2dd4e5305dbc77ff380e20f1738f5ff93', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, h("span", { key: 'bf2185444d946075044172c5aaf99ba3ef913839', class: "zonos--hello-locale-label" }, language, h("zonos-icon", { key: '668341e3b7a5e4c8673fc282efc4128ffbe27bf2', "aria-hidden": "true", class: "zonos--hello-locale-chevron", content: ChevronDownIcon, iconColor: mainColor, size: 18 }))), h("zonos-button", { key: '5d613310cadf679a264c6ea809474454318966af', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, h("span", { key: 'f258553c637ec7d7bab678500aa9062d2b3524ac', class: "zonos--hello-locale-label" }, localizationStore.selectedCountryCode, h("zonos-icon", { key: 'ebb04e7e952a7cd6c166ff3752b731d7a8b2346e', "aria-hidden": "true", class: "zonos--hello-locale-chevron", content: ChevronDownIcon, iconColor: mainColor, size: 18 })))))));
+            } }, h("a", { key: 'd0ccce33137960b2f05abdbe25f5e406b5a668a9', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '0146c3b517a2f1bd7e8a3c3875b7d289aedcd369', "aria-label": "Zonos Logo", autoHeight: true, content: mainColor === 'black' ? ZonosIconLight : ZonosIconDark, iconColor: mainColor, size: 108 })), h("div", { key: 'f592e799d627b6b12c8be2e46390ffa07a90021f', class: "zonos--hello-locale-wrapper" }, shouldShowLanguageSelect() && (h("zonos-button", { key: 'c91b238982a230bf56d7971820d4e11a3ab848f4', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, h("span", { key: 'eda1e60d6f5e0f9b19ab6aa13741be8b3bd72e12', class: "zonos--hello-locale-label" }, language, h("zonos-icon", { key: 'e78f0f8d16d123e656beb7d342d41ab9841c89cc', "aria-hidden": "true", class: "zonos--hello-locale-chevron", content: ChevronDownIcon, iconColor: mainColor, size: 18 })))), h("zonos-button", { key: '69e0987e3c45890bc5cfb3bfe9cbb71850398521', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, h("span", { key: '8ac960e3cadc0fdc70f0d04f336c2e8bfaafcf84', class: "zonos--hello-locale-label" }, localizationStore.selectedCountryCode, h("zonos-icon", { key: 'f5a1e98416357831c89998f64e845f8190f6219a', "aria-hidden": "true", class: "zonos--hello-locale-chevron", content: ChevronDownIcon, iconColor: mainColor, size: 18 })))))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -52,7 +55,7 @@ export class ZonosHelloDialogFooter {
                 "mutable": false,
                 "complexType": {
                     "original": "Partial<AppearanceConfig>",
-                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; fontSize2XL?: number | undefined; fontSize3XL?: number | undefined; fontSizeBase?: number | undefined; fontSizeInputLabel?: number | undefined; fontSizeInputValue?: number | undefined; fontSizeL?: number | undefined; fontSizeS?: number | undefined; fontSizeXL?: number | undefined; fontSizeXS?: number | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; fontSize2XL?: number | undefined; fontSize3XL?: number | undefined; fontSizeBase?: number | undefined; fontSizeInputLabel?: number | undefined; fontSizeInputValue?: number | undefined; fontSizeL?: number | undefined; fontSizeS?: number | undefined; fontSizeXL?: number | undefined; fontSizeXS?: number | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; supportedLocales?: string[] | null | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
                     "references": {
                         "Partial": {
                             "location": "global",

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -347,25 +347,25 @@ export class ZonosHelloDialog {
         // If deminimis is undefined or null, assume it's $0
         const taxDeMinimisMessage = this.getTaxMessage();
         const inclusivePriceMessage = this.getInclusivePriceMessage();
-        return (h(Host, { key: 'd24794b42581ff92ea7ff4fed8a7feeadd68ec87', class: "zonos--elements" }, h("div", { key: '84e539b7e7eb384ec9de8c60f26f33b7de8b4c2c', class: classes([
+        return (h(Host, { key: '4e9a8cb8064ba558d21a45675c3165621e44b1fa', class: "zonos--elements" }, h("div", { key: 'ab9428c38706dc0e908786a1d8965db4773bc9a4', 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',
-            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '50d05d3fdb5f5b2769a368c69d307f93ca162725' }, h("div", { key: 'd08c9c79fd69e1e5ab43a53bfd3d1ca5050fc336', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '7a6e76b1d891ee255b4fff4589714b67eea25dc5', 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", { key: 'fb3c7ad6df4608f470d3126a2791040cc6a2912c', spacing: 24 }, h("zonos-country-flag", { key: '98e8aedda730cf55a11031ef34191d7a0e92ebfa', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'eb073f09379cf41486da6a355535775e3022ff57', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '23d0aed3f10ea1d5d46f841f34ae240a393fe582', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'eda291fcc35c2d874ae16d35218e7d61414e0d48', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '14c81958db7911bca665c13e95249d8886524190', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '8cb7b88b669c208f0cb46c1e2a3c6a2c953c4f15' }, h("div", { key: '9f7cb8f8146479fa2e3cad74deec1eef039dd7fc', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'cdec0506fd5f4a8fd4ab152ed79946e0af4ae05e', 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", { key: 'd16e6a8caea049e7d253c9d25e86bb761af1b209', spacing: 24 }, h("zonos-country-flag", { key: 'b5f8a405697b45383e3f79787dd6c8dbc05b5c79', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '781c5dddeb71d07792727e31e9b18631792c49ea', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '43eb83b2f31824cee858edb805d7fc1d7ffe6043', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '6d77de6b476ff69a8f397060f6b0cf351c116dee', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '0bb7f48528f1890e13c12e739c93a8cd82456f7b', 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", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
         }), (dutyDeMinimisMessage ||
             taxDeMinimisMessage ||
             inclusivePriceMessage ||
-            !!(additionalInformation === null || additionalInformation === void 0 ? void 0 : additionalInformation.length)) && (h("zonos-card", { key: 'debf6a45b077b636d568a63abc1e6e628b117556', spacing: "12px" }, h("zonos-v-stack", { key: '7077e41a083eee4cd34604fa20c97f6e6e6e5ea4', spacing: 12 }, this.renderHelloMessage({
+            !!(additionalInformation === null || additionalInformation === void 0 ? void 0 : additionalInformation.length)) && (h("zonos-card", { key: '3c3b6e2b3bc79cc2d2771253df1b1e63078ab5eb', spacing: "12px" }, h("zonos-v-stack", { key: '15c26e6682006159018d52fb608dfed31a6298b0', spacing: 12 }, this.renderHelloMessage({
             dutyDeMinimisMessage,
             inclusivePriceMessage,
             taxDeMinimisMessage,
         }), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country icon", content: BagIcon }), h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info }))))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '6a545ced019871fb0b6254b6ad8d61d21d855127', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'e951aa4125477220462fab0332d9badd05901875' }, h("zonos-country-select", { key: 'e949e265136e827272db29d7d09af5ea2da0a415', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'eaebd5ba3bdaf0f3d335b99f807ae432d9330db3' }, h("zonos-language-select", { key: '2900f41ecd69c84d59505b2f2771eef709e419e3', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country icon", content: BagIcon }), h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info }))))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '85b7a06c12465363e5c658603e197f65c9d8d64a', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '343554a61f2ce5b011ea7b896e52bec5c9c1a2fd' }, h("zonos-country-select", { key: '9cea5cded20ca68c0e6ed4ca89df776acd08e1b1', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '6e6d43b3fb6961b0968355fc8cf5dd2ff7a54ca6' }, h("zonos-language-select", { key: '42b784a64350f9816bf15906f73e009ac14052d9', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -478,7 +478,7 @@ export class ZonosHelloDialog {
                 "mutable": false,
                 "complexType": {
                     "original": "Partial<AppearanceConfig>",
-                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; fontSize2XL?: number | undefined; fontSize3XL?: number | undefined; fontSizeBase?: number | undefined; fontSizeInputLabel?: number | undefined; fontSizeInputValue?: number | undefined; fontSizeL?: number | undefined; fontSizeS?: number | undefined; fontSizeXL?: number | undefined; fontSizeXS?: number | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; fontSize2XL?: number | undefined; fontSize3XL?: number | undefined; fontSizeBase?: number | undefined; fontSizeInputLabel?: number | undefined; fontSizeInputValue?: number | undefined; fontSizeL?: number | undefined; fontSizeS?: number | undefined; fontSizeXL?: number | undefined; fontSizeXS?: number | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; supportedLocales?: string[] | null | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
                     "references": {
                         "Partial": {
                             "location": "global",

package/dist/collection/components/main/zonos-controller.js

@@ -348,7 +348,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '4fde0983cf8a248635f7e1d8c54c712142e9363d', class: "zonos--elements" });
+        return h(Host, { key: '12257443495182932a4ca497928398e22f5fb892', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/paypal/zonos-paypal-payment.js

@@ -52,7 +52,7 @@ export class ZonosPaypalPayment {
         this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
     }
     render() {
-        return (h(Host, { key: 'd652adf83bc2620a8c21a7b2e6d8c0c419be8a1b', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'd6fdb79be6b31b5a2fb5ad6cc11c6001d4ac31e9', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '2eb9e7f7acbe26f51c32ceb722f1e59832ac918a', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '47ad7f3dfdea67dd5e222e6bbba46ed4599680be', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-paypal-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/store/hello/localization.js

@@ -10,6 +10,7 @@ import { getLocaleMessages } from "../../utils/api/getLocaleMessages";
 import { getLocalization } from "../../utils/api/getLocalization";
 import { getShippingZones } from "../../utils/api/getShippingZones";
 import { removeBigcommerceCartShipping } from "../../utils/checkout/removeBigcommerceCartShipping";
+import { getSupportedLanguages } from "../../utils/getSupportedLanguages";
 import { handleFetch } from "../../utils/handleFetch";
 import { currencyDisplay } from "../../utils/hello/currencyConversion/currencyDisplay";
 import { getCurrencyCode } from "../../utils/hello/currencyConversion/getCurrencyCode";
@@ -19,6 +20,7 @@ import { logError } from "../../utils/logging/logError";
 import { performBlurCurrency, removeBlurCurrency, } from "../../../utils/performBlurCurrency";
 import { toggleBigcommerceNativeCurrencySelector } from "../../../utils/toggleBigcommerceNativeCurrencySelector";
 const { dispose: localizationDispose, onChange: localizationStoreOnChange, state: localizationStore, } = createStore({
+    allCountries: null,
     countryLandedCost: null,
     customMessages: [],
     exchangeRate: null,
@@ -160,6 +162,23 @@ const getValidCountryCode = (countryCode) => {
     }
     return countryCode;
 };
+/**
+ * Clamps a locale to what the merchant offers. The requested locale comes from geolocation, the
+ * browser, or the `zonosLocale` param — none of which know about
+ * `appearanceSettings.supportedLocales` — so without this a shopper could land on a language the
+ * merchant has removed, with no way to switch back to it once the selector hides it.
+ */
+const getValidLocale = (locale) => {
+    const supportedLanguages = getSupportedLanguages();
+    if (supportedLanguages.some(language => language.code === locale)) {
+        return locale;
+    }
+    // prefer English when it is on offer, otherwise take the first language the merchant kept
+    const fallback = supportedLanguages.find(language => language.code === 'en') ||
+        supportedLanguages[0];
+    log(`Locale ${locale} is not offered, falling back to ${fallback === null || fallback === void 0 ? void 0 : fallback.code}`);
+    return (fallback === null || fallback === void 0 ? void 0 : fallback.code) || 'en';
+};
 const localizationStoreUpdateSelectedCountryCode = ({ isInitializing, newSelectedCountryCode, }) => {
     var _a, _b, _c;
     log(`Updating selected country code to ${newSelectedCountryCode}`);
@@ -319,7 +338,8 @@ const updateCheckoutSessionLanguage = async () => {
     }
     return { errors: [], json };
 };
-const localizationStoreUpdateSelectedLocale = (newSelectedLocale) => {
+const localizationStoreUpdateSelectedLocale = (requestedLocale) => {
+    const newSelectedLocale = getValidLocale(requestedLocale);
     localizationStore.selectedLocale = newSelectedLocale;
     translationStoreUpdateLanguage(newSelectedLocale);
     void updateCheckoutSessionLanguage();
@@ -335,6 +355,7 @@ const initLocalizationStore = async () => {
         return countryInfo
             ? Object.assign(Object.assign({}, acc), { [countryCode]: countryInfo }) : acc;
     }, {});
+    localizationStore.allCountries = allCountries;
     localizationStore.shippingZoneCountries = filteredCountries || null;
     localizationStore.inclusivePricingConfigurations =
         ((_a = window.Zonos.cartSettings) === null || _a === void 0 ? void 0 : _a.inclusivePriceConfigurations) || [];

package/dist/collection/components/store/zonosStore.js

@@ -8,6 +8,9 @@ const { dispose: zonosStoreDispose, onChange: zonosStoreOnChange, reset, state:
         fontFamily: 'Inter',
         logoUrl: '',
         style: 'ROUNDED',
+        // null, never a list: mergeConfig is lodash merge, which merges arrays by index — a
+        // populated default would leak entries past a merchant's shorter selection
+        supportedLocales: null,
         theme: 'LIGHT',
         zonosAttribution: 'DISABLED',
     },

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -357,11 +357,11 @@ export class ZonosAddress {
             this.isAddressFilled = true;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '195940efdd29696d99b1ab6524a53e6a03776c6a', class: classes([
+        return (h(Host, { key: '9b7a5340b839d63c64da03639bdfda5a11a5c25e', class: classes([
                 'zonos--address',
                 'zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, this.titleText && (h("zonos-text", { key: '968d5990fce9c1eb22cd10b58744e6d00f2e622d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: 'ae6dd70dcaa5ecd3465c065736e0f31fb40e72d3', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: '0bf3075670d3fcd945f9ddcbe096399e2dc213ed', class: "zonos--address-component" })));
+            ]) }, this.titleText && (h("zonos-text", { key: '23739f6a48e5698372df2d53098dea6ad1c0559a', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: 'dea4b437eedaad2af2f6bbe3a1e2ae4f0706aa13', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: 'b4be684977a632371b9b6ff4587ccdd7bacc8c67', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-custom-address/zonos-address-suggestions/zonos-address-suggestions.js

@@ -78,9 +78,9 @@ export class ZonosAddressSuggestions {
         return segments;
     }
     render() {
-        return (h(Host, { key: '20e095515d18016bd1f538bd345ed58aafe8518f', class: "zonos--address-suggestions", role: "group", style: {
+        return (h(Host, { key: '9de4179f1bd0057ac71d6b9ed646c034035382f7', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("ul", { key: 'f43e0820d29fc5ef96ab42402e370dc6ce381e66', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: 'd8ff4f7b53ea5fac8f42f1c13b2255ca2ea5d5e8', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '2431de3e4e5241e5d74f552051a5d3d4954624a5', class: "powered-by-container" }, h("zonos-text", { key: '48de6d435ffef45f60ebb4ef6c4b2eaf5bdee821', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: 'b0e8f2986d4f85daa2fd53b7ea812d296d28a164', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: 'e62245b99bcdc192a4ee98511c8a4a0efad6ea92', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => {
+            } }, h("ul", { key: '62fa5ed92fafcdd641f9a7eb36e36e62309c9f52', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: '27c61b5693720d0b33a75385841476787f92b884', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: 'fea9f2e8f65cd50fdf28fc45e18beb8976320f0d', class: "powered-by-container" }, h("zonos-text", { key: '1fec46f543e3673433b6924f7dca1cbd84e0ef16', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '7b3fd93c18d4320522d61e07278f5388d14c8bbb', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '61a8362ab0514a78dd71eaa9bd638dc8b50e2a9c', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => {
                 this.localSuggestions = [];
             } }))), this.localSuggestions.map(suggestion => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events