@zonos/elements 1.3.263 → 1.3.264

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -14,9 +14,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: 'b08ba40f5db3ed5aa5315b8b9819ddd464abfad8', class: "zonos--elements", style: {
+        return (h(Host, { key: '74877279697e5e29703bea70e89cae5cb164fbeb', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: 'd1f85a8cf55968ec24794d3130341dfc3b3853fa', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '34a1ac387d14cfe5a4aa7f431d9067700f09dbec', class: "zonos--flex-message" }, h("zonos-icon", { key: 'dcd6403a54453ed4959b9ca483597609bf1f7900', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: '54e77038f56a5929bd56180e00f2ea35d5803cf8', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: 'c3ce65422f7cc7e55026147745349efe987a47a0', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'bae02d71232fed3850946d6426f871d9ede486b8', class: "zonos--flex-message" }, h("zonos-icon", { key: '7b5878e3ffb4f2b012fd17f2ada54fae08df69ae', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: '714897772ab498d4c74f3d29e4186a1bf54397f2', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,7 +86,7 @@ export class ZonosDialog {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'ea5fe1fbc9cddf1937f5d3d5472e8288ca99a772', class: classes([
+        return (h(Host, { key: 'a5e865f6ef72282447404923a8c1b9920ead47b1', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -98,10 +98,10 @@ export class ZonosDialog {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, h("div", { key: 'a8086837918088143287c231afc7594157657ea6', class: "zonos--backdrop" }), h("div", { key: '2449af1214f4b4d745993ea001b4f1147f3989a7', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'f4507a332b704e09fe17c5d73b440c284d83b7d9', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '1bcb8e243e87611474205d6ecd0490e43eb83383', class: "zonos--loading" }, h("zonos-spinner", { key: 'cf7ad545ef370501cf95a7e58736c90b94da7937', size: 30 }), this.loadingTitle && (h("zonos-text", { key: '0d9f87e7d1ce303f996c2536f863f1d125f3c040', class: "zonos--loading-title", size: "l", weight: 700 }, this.loadingTitle)), this.loadingText && (h("zonos-text", { key: 'e2a1d073d020b7914a1025024da0841e10bd09fb', class: "zonos--loading-text" }, this.loadingText)))), (this.headerText || !this.noCloseButton) && (h("div", { key: '3de5de755a28433ac8e14c0b7a1940ca6831a2fd', class: "zonos--header" }, this.headerText && (h("h3", { key: '89f5eb402ef75a079f6d0e0f87f986d461730727', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'fe220b8a93de46c56bebc704e68940c9f70e4cb1', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: '1313249b74777b0394a7a7fca6745add56292086', class: classes([
+            } }, h("div", { key: 'de67001c33a779ed467502d3f2300844034f9559', class: "zonos--backdrop" }), h("div", { key: 'ebdca7ccb32fcf7b4c60bf3d04b5de38b0668b75', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '668aa0ed4b56d7a8bfb2c93fbf045b60ae91c3e5', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '2f7a7471b2665de6c33f194799a890756949a555', class: "zonos--loading" }, h("zonos-spinner", { key: '30432f6ab8ca578896138bcdc1bac0ed737fadb1', size: 30 }), this.loadingTitle && (h("zonos-text", { key: '17fc6c0e541f62118c6ce9dc5670b7023c99372c', class: "zonos--loading-title", size: "l", weight: 700 }, this.loadingTitle)), this.loadingText && (h("zonos-text", { key: '8f278c76b5109c5b048c8c99f559c41240f2f2c0', class: "zonos--loading-text" }, this.loadingText)))), (this.headerText || !this.noCloseButton) && (h("div", { key: '9967ec60be44a768192afc7afd09064001f2881e', class: "zonos--header" }, this.headerText && (h("h3", { key: '12daab9cff11f16b396c8595c76e9e82cea790b2', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '9ba377e1078166e81b3edb7a6f0925602bd271c5', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: 'a467dd66e0feea9a2e035bf8af6ef4c5d43e88eb', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '585402b85ac8ef6cfa1b9051049e42edd645d99d' })), h("slot", { key: '3c0d42a12a16ce61786f1531da312403ad70affd', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '7cb10ba057870384afa85d4492a39c2f01766641' })), h("slot", { key: 'e8a90958c50234218123ffbc65fe16980a35a169', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,10 +10,10 @@ export class HStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '5f51e8415536589fe4300c5db75ea13e4419350b', style: {
+        return (h(Host, { key: '6d17afddd6bee4215f1ca29e6d1876ead04b1cf4', style: {
                 '--spacing': `${this.spacing}px`,
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("slot", { key: 'b0cc8a581603ee78ec576346c5730f28ba5006e1' })));
+            } }, h("slot", { key: '1588eca69137d187ce946df8004a5192187e963b' })));
     }
     static get is() { return "zonos-h-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,17 +31,17 @@ export class ZonosInput {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (h(Host, { key: '97f28cac82f273f95b6401f6b29ec35939cd3652', class: classes([
+        return (h(Host, { key: '3c4fd9d72bc124d6e915661038e6b64bee692a98', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--zonos--border-radius': getBorderRadius(),
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '374a3b102e1dc4c422f6f69eb235f940c0271aab', class: classes([
+            } }, h("div", { key: '80906b54a0cc8e031b0752c4f7c7b8b3ffdd6b3f', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: 'fd0810fbbf21f53dfe890c76bd7b66b2afafeac1', class: classes([
+            ]) }, h("input", { key: '413602bca1b288330631c043610161501c86e59c', class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -49,7 +49,7 @@ export class ZonosInput {
             ]), disabled: this.isDisabled, onInput: e => {
                 const input = e.target;
                 this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '7a1e72620a76eb4507b9b4c79f8faf73657cb789', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '183e2196be5a6d2acb202af9183b0624baf242df', class: "zonos--floated-label", "data-label": this.inputLabel }))));
     }
     static get is() { return "zonos-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,9 +20,9 @@ export class ZonosLanguageSelect {
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: 'ebe7e47d37019b9aa6e2a5ed77d9c82c71b3fa6c', class: "zonos--elements", style: {
+        return (h(Host, { key: '14d44b42030ca6032055288d6b6f75b509910e0a', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '532b2664add5948ae9687049afc1fdaed8cc0890', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '650adad0103c42f27e98bb3c2c6c8e2a122339df', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '84af0288f9911d4739c93388723230b165466908', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, h("div", { key: '3fec082ed1aba86fb31327c5f8312f4eb84f0c71', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'd31533f6e04a0966dc6e9b4dcbe6320951162d16', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '8bc96f64036523ac15ad0414c7b0bed09e9df75d', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
     static get is() { return "zonos-language-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class ZonosLink {
         this.href = '';
     }
     render() {
-        return (h(Host, { key: 'b6d1debcb25cc43d1b4eb9fe41183a3190a4f6be', class: "zonos--elements" }, h("a", { key: '9c81e327e3021215a78bd7ce2a619f5764c012ac', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '59c6fbbc8cf9b5e44e76a52dd6472bd6a28a852f' }))));
+        return (h(Host, { key: '87f948b23f9166f04a9ff478c3a10cac68acd749', class: "zonos--elements" }, h("a", { key: '54ef1e907c92be92a395326808977e97b92b4121', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '9a40d6624eb6e42d54efd40f5e6827713d51197c' }))));
     }
     static get is() { return "zonos-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-loading-overlay/zonos-loading-overlay.js

@@ -13,7 +13,7 @@ export class ZonosLoadingOverlay {
         this.size = 40;
     }
     render() {
-        return (h(Host, { key: '2307e7f2b5db43fa4625097a96fd9182b5a1c729', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: '9c7aa8101410becb1341bc2d602638fbccff2dbf', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: 'ebf5db2566052ee898d8d09aaeceb664a8e264e2', size: this.size, spinnerColor: this.spinnerColor }))));
+        return (h(Host, { key: '3f830d0014a8988893b2cbde578035b1b8727ac5', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: '84371b0bb118aef5c4ec5e1c6903d699d5402c14', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: 'cf53766a1bbdf7433c5f7a1cf46e00bbd63f08b3', size: this.size, spinnerColor: this.spinnerColor }))));
     }
     static get is() { return "zonos-loading-overlay"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,11 +16,11 @@ export class ZonosLogo {
         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: 'd45302a20adc0f2c9ad19a37c1c9e4578f129ddf', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: '93f6a3dab000ca09fcd5c669406cdd44a06b5f25', class: classes(['zonos--elements zonos--logo']), style: {
                 '--zonos--filter-color': filterColor,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--width': this.width,
-            } }, h("img", { key: 'e82b14ece643a9037e57b6ce561f1eff3c3bd8fa', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: 'f2343614678d331ea63210d01e3be9f3c49ce7a6', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-rest-state/zonos-rest-state.js

@@ -14,11 +14,11 @@ export class ZonosRestState {
     }
     render() {
         const imageUrl = this.getImageRestState();
-        return (h(Host, { key: 'c39228c5a45be0c27fc805859ba896f346f4c7bb', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: '70b8901469cba98007780b2dc6cceaa61f96d8ac', class: classes(['zonos--elements zonos--restState']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '466d38527c50fac57c85b29b6d501139a55c652c', class: "zonos--restState-image" }, h("img", { key: '233348dc1fe72c37ac3485dc4ae577b02d44d0cc', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: '7903d837e37c843a55aee6211cc2071add4f5a05', class: "zonos--restState-image" }, h("img", { key: 'dee0733ab529b004f53d1d69a29a07d7a44a3eea', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: '0ead09005b4a4e59fcbe5b673ef206d09c6f344f', class: "content" }, h("zonos-text", { key: '2f6d50f5562ab86918755b2d20aeab1ba170e0d1', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '9304b2421ac05dea5e8567666dc3fd5c279bf6dd', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '00323cff6ad4b67a5af980dcbfce5cb0c59150c4', class: "action" }, h("slot", { key: '256fc2f99f345d0302d6fa4467b22558723dae7b' }))));
+            }, src: imageUrl })), h("div", { key: '612e7d71d5e6bd2e0c37d7c6595b35ea5ca416dd', class: "content" }, h("zonos-text", { key: 'c28379a4b4546afa6b323986c092c9538aa66b65', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '309e2e9c5086d0c84ccbe6c695d657d9f8e16da0', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '7fb9586682d221a311598ee8d294c6daede33e96', class: "action" }, h("slot", { key: '87959654a7a3c9c621d633a492627d53ff561fd4' }))));
     }
     static get is() { return "zonos-rest-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,9 +15,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: '6a667ac343eccf7298cbca49b58ccbca0ca6509d', class: "zonos--elements", style: {
+        return (h(Host, { key: 'eb0958752881635e0e5edf9b0e66fccd1064b3f8', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '4f3958ab4700f1f6d1bfff92cf3c5593c97c536e', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '44d690590c6727b7d17ea96967a6929ea5d60a51', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'cd45b4d292f3487a442510918afe7c828cbdb939', type: "boldLabel" }, this.label), h("zonos-button", { key: '43e7887d8f11185ec7d6ff0895f922e8a5719865', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '2c6e66b98bfbc8d4c3fd1d8459d703a8006324d3' }))));
+            } }, h("zonos-v-stack", { key: '1f02a7f61e20a4b36e2d5598f8228482ad3f54f4', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '87b5d8d2486cc45cd8be8841d2995f4c33e9c524', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'e5c9621a69d19e6925fb7115289f74b8ec0eb76d', type: "boldLabel" }, this.label), h("zonos-button", { key: '4d61d8ee3df26c296b48b945ccb1380027def911', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '1a20da26116e95278d21f7d413d238ae18d8805d' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class ZonosSkeleton {
         this.skeletonHeight = '14px';
     }
     render() {
-        return (h(Host, { key: '0b7adeb320e2f98d56158e4ec4d8933aa252ee8b', class: classes(['zonos--elements zonos--skeleton']), style: styles({
+        return (h(Host, { key: '06888cfea3918480152b8f1af660148882747195', class: classes(['zonos--elements zonos--skeleton']), style: styles({
                 '--zonos--skeleton-height': this.skeletonHeight,
                 '--zonos--skeleton-width': this.skeletonWidth,
             }) }));

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: '90f2916175c8512bf24c235885dba82c8a82bc6d', class: classes([
+        return (h(Host, { key: '77300abdafcc0b557b89c15a7755b4278d0acdee', 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: '95a6eeecfb1c8935ab5289b10a6d4330ba69d780', class: classes([
+            } }, h("div", { key: 'a6d091455bc8a33e8031d37f9b471118994bad47', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", Object.assign({ key: 'ebafe0cd341d3717914d1731c67aa961df1ed25b' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("input", Object.assign({ key: '2001e1c1427c11b203514c0c849f3a1f3c2381dc' }, 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: '4f9a9d698d64a16b20a9d2392c975f7ef7cefb43', class: "zonos--floated-label" }, h("label", { key: '8e90d3a8721703ca616dee5c8238ff01fcc7b631', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: '2fdbfa01afa0baa58a900d7303a82fac78483af9', textColor: "red-600", type: "caption" }, this.error))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), h("div", { key: '8b42af0315ed314fb267bf32dfcfebfee3a69a75', class: "zonos--floated-label" }, h("label", { key: '3de63395251ac591b1c3c527093560702f30575f', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: 'ee7b2b13d5577b965387bb1029f8036fb099890d', 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

@@ -201,24 +201,24 @@ export class ZonosStripePhoneInput {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: '1f200a91b6571a4c113da30e3837ece4b38bc7cb', class: classes([
+        return (h(Host, { key: 'eb23ab75a61aa94b7d4299f39b77d38ec1cbec20', 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: 'c4e048ff9e4fb57598033b782f43a82db4729334', 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: '4690d6346d04820fa677e02483164f1e39c348ad', 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: 'a4c1e90dd4490f6895e39d71233c5e05309434b4', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, h("select", { key: 'be7fab230afd6e19cb133d13f9d1f946893dd85e', 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: 'b56bdb3b9f7acd4a32c9c833c631de2ad74c8b04', class: "zonos--input-group" }, h("div", { key: '4babc988f0432df5a622e3fe70be2395625fec4f', class: "zonos--select-wrapper" }, h("div", { key: 'afd4d0863e2e4d9c809cf74b267452d23db0db9d', class: "zonos--country-select" }, h("div", { key: '6b50899c82c335ea6bc00792f549b059439f80aa', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: 'b2ffde73f454dc7f37598a7992f7e48a98ebe627', class: "zonos--country-select-selected" }, h("div", { key: '25573e4a4409cd742aa2557726bafd9b738a250f', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'b6ed256e1867d8204144676f254d30ca4535eae1', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'd8b0f28d7aa5a0afef1c11603d15b5007e8e81e9', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'ea4ab66f550a807ecd4182dfcb803a317fd69074', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: 'ee0818647a08ac39c6cc3594c7c361b6a79681dd', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: 'c02c404700de1d096838449533b419b1e9f95d84', class: classes([
+        })), h("div", { key: '2da719a561ed71bdaf6563249ceff2556b6a8323', class: "zonos--input-group" }, h("div", { key: 'bb533773af30f0c8c4be47f76ee642fd589a40b6', class: "zonos--select-wrapper" }, h("div", { key: '465e9b7b41ba99852cee2a36822e2a753d401337', class: "zonos--country-select" }, h("div", { key: '5f2ba6cd1937831f3b5cb61f98d501497534b758', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '4f5861174efa761ec9285b5e8721b3b46d5979cb', class: "zonos--country-select-selected" }, h("div", { key: '47c28fd20118f92c9ee18e82ebdafdf212e6740e', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '28fae4f5074ca62d7592142878e3c8d48229a83e', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '9d940039033f7d09b9d6e2ac9f005e3b21060b70', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '5cbbee5f1405d05717873f287b3b6d3bb0f92ede', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: 'd6c493e07ee068a848e10debda7549f4cd4fc28b', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: '2c4ec88e83d61e0305d53285c8bd5107f98eb15f', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, h("input", Object.assign({ key: '88b15052fc88329cc1791e4c89e9db171b6b0569' }, 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: 'bbaffd11b9d33d28dd363e9110ce884ccc1a9ebe', class: "zonos--floated-label" }, h("label", { key: '5cd458d801979127b26407295b95f0d15f5c383d', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: 'f0ef5a5b0762b14007c0df09fff7f7abecd9920b', textColor: "red-600" }, this.error))));
+            ]) }, h("input", Object.assign({ key: '434232fdedebf3c4cd6f7e2c70d41a4cd5ad8104' }, 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: '4ff0d61108d5cc56381eec6f94a50485c149f360', class: "zonos--floated-label" }, h("label", { key: '37db631b0d55253787c0f2d8ae455bbf3ebfc8bb', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '260b115c3efc9ece71cf31eb24a39efc4c21a64c', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-phone-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -105,14 +105,14 @@ export class ZonosStripeSelect {
         const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
         const hasContent = this.internalValue || this.selectPlaceholder;
         const showClearButton = this.isClearable && this.internalValue && !this.isDisabled;
-        return (h(Host, { key: '07b9269eb9130ac91b366369d5db4c49c7fc7be2', class: classes([
+        return (h(Host, { key: '62511439918e73ea4404c4b077c5da143b1459a7', class: classes([
                 'zonos--select zonos--elements',
                 isDark && 'dark',
                 this.isError && 'has-error',
-            ]), "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: '6c82ff92d68ca8b031985af671ad47d4c47c4968', 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: 'cc826990fe112f66682e522e2fbbe808b3017537', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("select", Object.assign({ key: 'c2df2cfc855706c376a82bfe7c752c58d987aab4' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("select", Object.assign({ key: '2803799a7226bf79d173093a4b1773ef57e122f8' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -122,9 +122,9 @@ export class ZonosStripeSelect {
                 this.selectChange.emit(select.value);
                 this.selectedValue = select.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, required: this.required }), h("option", { key: 'aab67935dd68de369fb67749006ec06656e2e187', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
+            }, required: this.required }), h("option", { key: 'ab93bc1a38ab1c897fc57c1b6a55941c021f6944', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
                 // Sometimes google returns the label not the code for some countries
-                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: 'a5a10b4a0b690aad09e2b8138b84623eb8a80e2e', class: "zonos--floated-label" }, h("label", { key: '98da29b702b07eaea01196cffa306d8c7497ce69', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '03b5847543e1c5a60af23cf5b5b572ed53abdcf9', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: '3a078eb32e3702edd6b084e367d336c994a23284', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '3783636799756d514fb456005615692bfb03fbe1', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: '7ba276746b986d5cea76f9c53fa4e3d8627d4d35', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: 'b9e3282bd4b44d7f6c113cff1e3746c836ab29dc', textColor: "red-600" }, this.error))));
+                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: '4d4995d1770bf99e05c0d1b6dbdddbe828f2b3b0', class: "zonos--floated-label" }, h("label", { key: '2b352cf1413f4a539c6f62d7df285dbea1629b77', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '707a0df092ed2196fa8e503d79448890a9e36616', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: '83a605fd7d3799a1ce6f4300193c63722f3f8b7e', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: 'da9e65471ec1b4f89119a71db657f06903a11a3d', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: '4b479d3f9fae286e0ebb6290d9954f08982a4e5e', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: '6c9e2fa9747064203763c00f39dbb08fb413cf0c', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,9 +9,9 @@ export class ZonosToggle {
         this.options = [];
     }
     render() {
-        return (h(Host, { key: '220dcc3ef8685ea09db761d7a42a00a7309caa70', class: classes(['zonos--elements zonos--toggle']), style: {
+        return (h(Host, { key: 'a69d1282e442b2cc5b24df68ee41c452b02fb022', class: classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'fa54f818b15ff33d88dc08a1df370ca9be17ff71', class: "wrapper" }, this.options.map(option => {
+            } }, h("div", { key: 'a0fff3107e8d9a98d3ff323379c6e39bee294eca', 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: '3014faf5b26490a23b7735087dd69b05f785a2eb', class: "zonos--elements" }, h("div", { key: 'b7117e69a0f6f4ec28a7ccaf898567aeb886b418', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: 'bf995bf9de4497d32fd825e6a1382dc5eeb768e6' }), h("div", { key: '15c134b8aeed57ec2ad313c4316b2f5aa2c98dd0', class: classes([
+        return (h(Host, { key: 'f3da69a4f5610963cae6a15e5ff2d980e5d31a07', class: "zonos--elements" }, h("div", { key: '1636b467a3899c486b59167a438e071e0b88e699', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '3a512330cc556d3cabc18dd712cef1f353526e39' }), h("div", { key: 'a93fde0ea517c8eab08cbec375a891fdde5a681c', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '6d6a135a75e9cfa8f4c921755da4bd476dddf83e', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'b166deb4b050d9a18699e1e3858449215d141726', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: 'bbfaa05280ac898421a3c334cb97734ccda8dbbe', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '96fc7d23135644d92062c95686560d714a9ff4b2', 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: 'ddc85068e0fb28356f75caef81829f2820326701', style: {
+        return (h(Host, { key: 'b3f2fa705a9eb81dd74f355c9caf468d8c74f49e', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '6fd038cf714612f64aa2164ebac11ad0cd8acc77', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'e6519671bd7ac4742306d2d702d15c25d9c69af7' }))));
+            } }, h("div", { key: '114ebba1cbf50a3572c412db808cfb7ac74b1724', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'f2070a31f968565c08ce002ae9a6b07178fd4ad8' }))));
     }
     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: 'eca3e3e09d8f14f3c563042b07436732e7af71dc', class: classes(['zonos--virtual-scroll']) }, h("div", { key: '0f69f295a319c617c66b069eba97b18cf7ae8373', class: classes(['scroller']), style: {
+        return (h(Host, { key: 'f8c3a4bb1fc348cbe4fdc6d39a17863a633294ff', class: classes(['zonos--virtual-scroll']) }, h("div", { key: 'c53f706c7e1f9aafaeaa964eb72ca08dda3d620b', class: classes(['scroller']), style: {
                 height: `${this.totalHeight}px`,
                 width: `${containerWidth}px`,
-            } }), h("div", { key: 'ae3a128e8997ba9333a015d488358ff1211d2fea', class: classes(['item-container']), style: {
+            } }), h("div", { key: '06107aa0a13df790db1f21cda0a0817ea5ebceaa', 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: '1d369c76153c971ef62736d7e00a5a940284d346' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'f8ec6c765a31d6d9599003523128ef4f5c8d3078' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,4 +55,9 @@
   :host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper {
     gap: 4px;
   }
+}
+:host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper .zonos--hello-locale-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }

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

@@ -3,6 +3,8 @@ import { localizationStore } from "../../../store/hello/localization";
 import { isDarkColor } from "../../../utils/isDarkColor";
 import { languages } from "../../../../types/ILanguage";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ChevronDownIcon from "./assets/chevronDownIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import Globe from "./assets/globe.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import ZonosIconDark from "./assets/zonosIconDark.svg";
@@ -27,9 +29,9 @@ export class ZonosHelloDialogFooter {
         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: '82022e82f9d984a292a1b4fedd9cb9a6853aab01', class: "zonos--elements" }, h("div", { key: 'd9d8ec1f1eeea5963e5ab9fd42cf8353b8627669', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: 'b8c4b5608d3af10147572ad97b363e6216ceb1a7', class: "zonos--elements" }, h("div", { key: 'a136c029e2f15171be4c14b706b41d8477fae649', class: "zonos--hello-dialog-footer", style: {
                 '--zonos--primary-color': primaryColor,
-            } }, h("a", { key: '896560cd1a50d78b2f228032b79476ac08bebb4a', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '079e11ce77a1d07cde727d4895a6c8ec55fd3d83', "aria-label": "Zonos Logo", autoHeight: true, content: mainColor === 'black' ? ZonosIconLight : ZonosIconDark, iconColor: mainColor, size: 108 })), h("div", { key: '380c23a35df23ad08e87f14e9376fea1630eed59', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'fa475cd2456fd3d79bc81ac5092f389c13894d99', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '5df6f50a27c04caebb1c41f735efaeab43f52699', 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" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: '99eb0554b1167e07efeb4f30c2352fb2210b51e3', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '7b2df9be8326d1913710ff10a6633a31268e8d9b', "aria-label": "Zonos Logo", autoHeight: true, content: mainColor === 'black' ? ZonosIconLight : ZonosIconDark, iconColor: mainColor, size: 108 })), h("div", { key: 'cbb70cb5dc7d03c0345bf0b3fea2f255be0a2b6b', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'c974f79edf2185706404f66f820eb602b15e6467', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, h("span", { key: 'd98e82523a82be43aaaf8dc2b8660af0f240f734', class: "zonos--hello-locale-label" }, language, h("zonos-icon", { key: '06968564c732df35d141d01ef7ecdc62936cade7', "aria-hidden": "true", class: "zonos--hello-locale-chevron", content: ChevronDownIcon, iconColor: mainColor, size: 18 }))), h("zonos-button", { key: '21b299e19244e57a89890c874217ef8848c59be5', 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: '6a7629ffc25230ff13a4ff814dfb22796487ad6f', class: "zonos--hello-locale-label" }, localizationStore.selectedCountryCode, h("zonos-icon", { key: 'fbf465f93fea211f54967c8bd1811ac92f10f140', "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"; }

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: 'af2f34c21db4c521efe77a61bb779790741effba', class: "zonos--elements" }, h("div", { key: '4544ff7c5773d8cfccd6e4d866a07ee50c912a06', class: classes([
+        return (h(Host, { key: '4f03947b13c6e6d9f19d3d4241c427f9ef8cb07b', class: "zonos--elements" }, h("div", { key: 'c5001cd7c4c7bb0fcf2375fc211c9afbd2059f32', 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: '4ba3dd6d5cccda0350a47b5cf2d3dc1c74853d81' }, h("div", { key: 'd5d5990a0d66d5d8b871c595f6cc08ad6077fa79', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '51a79a23bd6ea5e632e12a73591a142a341ce4a1', 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: 'a505bcd3b78b81811dcd60d16971ceeb4c1a3aa7', spacing: 24 }, h("zonos-country-flag", { key: 'b82428ef373bc174e00255e8e0491466cd0fc177', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '10d8e5a46961a02e7159ad57854835f115eb0d76', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '030655d2e3ae3bf770ace2b6bffe96b1423a8aee', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'ce954ae42f9fe90f49980d954522a2e30be23d5b', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '82de2ff11aaa0505737664757f698d9ddd199af1', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'cb86aadda605b075152c21009b11f57b87b1d815' }, h("div", { key: '77a7e3bd67cd2b19f2adec81f15c642d76151f74', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'ac5d1386f34c2948ea087d64ba60d1af87e76487', 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: '50fcf820665b013090f8b22bd011b48edd23e47d', spacing: 24 }, h("zonos-country-flag", { key: 'fba9eb926c23fdad59d4262582fefd102aa9e721', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '08438a0f1f7ab1ed7aa6077bd8c0c040d10a48e2', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: 'f3ed157753544a886c2362e48d4ff941135f69dd', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '989155955d1b6b50e54b38b9aedf71041a1ca57e', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '480acbed038550026005317e0fa41c74db4befe6', 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: 'b9134233fce6f248576b7b894b4be313aacdbf3f', spacing: "12px" }, h("zonos-v-stack", { key: 'e427aaf3dc1e4bba952511528aad5ff66a4950bb', spacing: 12 }, this.renderHelloMessage({
+            !!(additionalInformation === null || additionalInformation === void 0 ? void 0 : additionalInformation.length)) && (h("zonos-card", { key: 'ec95384f56843f11e7ef678363c08718ce879bea', spacing: "12px" }, h("zonos-v-stack", { key: 'e56aedf0bf3c2e698b6911ae0d96f3c46059158e', 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: '343956e04ee86fe6f9bcaa13f7e69c47d7d68c6e', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '99cd990b4df0ea4d5a8f1e81db99d23e6ebd3475' }, h("zonos-country-select", { key: 'd29ce0c79fb371c63b8b0630fd3d99892744179a', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '6a417d593d5644939f1ffbbbef3af6546e44b712' }, h("zonos-language-select", { key: '29c17d83f162a7237e9824d9f60c0cffdbdd1ae7', 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: '103bcee4af2a3979a7db3e86b287063bec16310b', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '900e288096edd6aa4bcfddd3b80932a11c675a6a' }, h("zonos-country-select", { key: '278e3cfe7dcd69332e6257517759ca2c8e959ae0', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '2d70d0c380fc681492b7b97b4d78677db88a78fc' }, h("zonos-language-select", { key: '7debc2fa20436565b00c7f9832b89f388a814a96', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -331,7 +331,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: 'd500743a0ed7dc7615e696aaf958216374e7c33b', class: "zonos--elements" });
+        return h(Host, { key: '681a81baa59bfe91e9fe0927aee49fa720fcb35b', 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: '5745cd59ad8b81a41f8015438afd036621695bbb', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'be5154e55384e2ecd42e2ec6b2be7712fb6ef31b', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'c01e031b29e0089389be2a16e888bd0b7c24dcd8', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'f03c880bde17291f083cfe1f0db6a918f92d720b', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-paypal-payment"; }
     static get encapsulation() { return "scoped"; }

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

@@ -352,11 +352,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: '300434f0623d886693dc101b47cb5cd5f9503d3e', class: classes([
+        return (h(Host, { key: 'ebba5be32c456e8b71d397db63e666e5d5df1543', class: classes([
                 'zonos--address',
                 'zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, this.titleText && (h("zonos-text", { key: 'eb7592c563d728af019db397f4d5e7e9f448f4d7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: 'c9556ead2ad1bf1b462637ae44834dc4f25afa8a', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: 'cecaa1a9b4a176607125106f55b6e4d6cab31705', class: "zonos--address-component" })));
+            ]) }, this.titleText && (h("zonos-text", { key: '25f15ea17b50ed055eb98b072850296312785b06', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: '631bc324d1bb96fb9e796b38a6da42ef6ca601a3', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: '25f88c72f8fc9b788b042f2df2f1b8085132f683', 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: 'fe92e3ac70b644dbacda2cfc56e2676ac34632cc', class: "zonos--address-suggestions", role: "group", style: {
+        return (h(Host, { key: '95f0fa0a1a5eb62ae2f08f305216a365f166af96', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("ul", { key: 'c042e5d4f563ace9631f3a9d4ad3dd3c9e12cc35', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: 'b68deb87d190d53b597085f7503c838e0a089227', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '4dac7702de58610364ad031a181c33d135ec2b1f', class: "powered-by-container" }, h("zonos-text", { key: '74e97d754914267d43e39740ea48634ddcb87355', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: 'f2771fd3f18665eb414b653740930afe1bb42e4e', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '657f036bec0ad31091b83be9927036362f6607a6', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => {
+            } }, h("ul", { key: 'd76493f93428da65b645b8bf16ee82b780b2eb97', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: 'b7d4a61c717a2df1057a81ff2e6517a0b7a7869a', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '0dca2094920653d6205dd79e717290536e7ae1c9', class: "powered-by-container" }, h("zonos-text", { key: 'baa29ec5e43286d4df28eb418c7b2ccc4bf7d1e7', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '2b544408cc75a9c50750072b1efb63e4cd4f1323', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '939ba84809ce8f113a8d13cc75cb8a3c23013847', "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

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

@@ -924,10 +924,10 @@ export class ZonosAddress {
             this.country = localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '4874639006b452cc6a2b5e5beabbe97fe7a0fde5', class: classes([
+        return (h(Host, { key: 'ce15e47889c185c72b9f79327ebbd24950da1811', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: 'a365f9de88a9f7602e46e1d87aa180d2b51a4079', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '66146ab6e78cfce499a10aa4d117a64a49a7f886', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '91d1a627a89b8114075f5ecc1dff7bd8d52dd0b7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '1a69664bc17a2d59cff241bbb0917714340e006e', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
     }
     static get is() { return "zonos-custom-address"; }
     static get encapsulation() { return "scoped"; }

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

@@ -67,7 +67,7 @@ export class ZonosPayment {
     }
     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: 'd6aba7a614610a64012ef6636e19b345623141ec', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'edf8c9ee8d7a9ebf87922a49d9b7420efd80b226', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '3d0d7638a309fdf4dc1ab39bb463a0c35add911d', class: "zonos--payment-component" }), h("div", { key: 'a79f98f63bad2a7c5023eeb5bb28ae39997ada27', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '6bc25553430c9e23c77a0607ad28dc4c9efa66e6', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'e4ba3f581697a799e50fe066e7cc922a206af8e5', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '0247eecadf083f09b67c5f668da845431234750d', class: "zonos--payment-component" }), h("div", { key: '7f63abd0a2c1cbc62f931e44fc44c69b57a4f8ed', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/utils/checkout/bigcommerceStorefrontApi.js

@@ -32,7 +32,7 @@ export const fetchCheckoutId = async () => {
  */
 export const fetchBigCommerceCheckout = async (checkoutId) => {
     try {
-        const response = await fetch(`/api/storefront/checkouts/${checkoutId}?include=customer.customerGroup`, {
+        const response = await fetch(`/api/storefront/checkouts/${checkoutId}?include=customer.customerGroup,customer.addresses`, {
             credentials: 'same-origin',
             headers: {
                 Accept: 'application/json',