@zonos/elements 1.3.218 → 1.3.220

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: '18d7ba03b9136af8614874b13b9ac3ce85f7c0d0', class: classes([
+        return (h(Host, { key: 'e781d691f1f1f72ceed06c488af7f427ed4f82d0', 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: '88b8d885c11bc0776bd0c25b5f0a08f91cfb7c72', 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: '4df83fa9bcb12e94e2d4bba3d6f31a4f56006097', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("select", Object.assign({ key: 'd972a6a7b91bb51f2d5ed291a686d521c1bf82a3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("select", Object.assign({ key: '31daa88fdaeb8a35055b97ade6aa10bbd234568a' }, 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: 'b67730b2c3e77ba60221320519f55e67d7d2b127', 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: '4c5c09493d0e9d38bc56860682c092017dc927ff', 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: '088c104006e983b5ec1680067af32c0479dde13b', class: "zonos--floated-label" }, h("label", { key: 'faf3bf337253d205265b181d65d8f8024ffd6124', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '7ce8d36b84b08df139877cd2e12a26b8157ce83b', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: 'b0a1af08afd9792ba4e7989361219c5cf7d5d8bc', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '50ae86d5e9d9722b5546997f9fd52a997cac3add', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: '30034030f97f7ed6b3027cbc5220c73cde4bbbc2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: 'cd02da8b1a1cb81581ac7285af84193000692eaa', textColor: "red-600" }, this.error))));
+                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: 'abe6ea181a207b8b85232226078c92ab1a8b6618', class: "zonos--floated-label" }, h("label", { key: 'c079f2f21289e5ba06906fd7e29b3c8216c6ae01', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '3cad61609828a9b38a4a38625629481c9fb5411e', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: 'f24323bdbd652cff52bec827f3a93a2e343e35c4', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: 'e8fe204b510477855de4dfee29d1200f30c50933', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: 'f071765d705d67b741f9381bbe96e2e8beb0968d', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: '7425ced4032df77a7f1219f9c03caedcd1a55841', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-text/zonos-text.css

@@ -41,6 +41,7 @@
 
 :host(.zonos--text-size-2xl) > *, :host(.zonos--text-size-2xl) {
   font-size: var(--zonos--font-size-2xl, var(--zonos-elements-font-size-2xl));
+  line-height: 32px;
 }
 
 :host(.zonos--text-size-xl) > *, :host(.zonos--text-size-xl) {

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

@@ -9,9 +9,9 @@ export class ZonosToggle {
         this.options = [];
     }
     render() {
-        return (h(Host, { key: '9a526e8fee8e4c5af558442c82f7acbc634706c3', class: classes(['zonos--elements zonos--toggle']), style: {
+        return (h(Host, { key: '1b844d11272181b9c81c2bfb03a13a1ad412cb9f', class: classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '97ca281e8e782c3b08231c6ba705325bbf16d402', class: "wrapper" }, this.options.map(option => {
+            } }, h("div", { key: 'f5991e19ea02a82ae1f6e7529bb3bb77e66b7165', 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: 'd984faacc8d79f2001c84fb69c30f3665dca44aa', class: "zonos--elements" }, h("div", { key: '327f9d077f2400f05ff3c4337b566c461a2d05cf', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '24315359176ca625f18a856d781624850d05de17' }), h("div", { key: '296041bbebddd0250c6d5d9649e6502571a08533', class: classes([
+        return (h(Host, { key: 'd96671c8c9b426cbde335b3d8024a56f4e188281', class: "zonos--elements" }, h("div", { key: 'de75e111a65033501e9907992df0d9ae8cbf5df5', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '3d8297ef44c97112e29a62a31b3acf47789726a9' }), h("div", { key: 'ee777f084991e28255a2957cf3585110f14c65d5', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '5a2828baf420acb666eb1f0029c8d0b9eadd55ce', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '1bd8bf5085edfdc3d42db03e460062bf744c174b', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: 'fb22b220feb39c31111d45a393024e7df4d3e314', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '6019665e4e0b8eb4390a70b5d90cdcc4f16c6ba3', 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: '558218f6135d5fcc9f3649b76c568a9f514aa8e8', style: {
+        return (h(Host, { key: 'd65f235ba8ffaefff1ec5e5bbd8bba1313e97a83', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '86af63aa01214db20cc094ddcbfd05b3ee28f1ed', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '4786fb44cbf865a548c900b752f9b13709f1f935' }))));
+            } }, h("div", { key: '31806036975f9640fdccafcc11053596dd17f4ef', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'a3c5a3f592f86cfd9ebb810c72e2e22011ec4758' }))));
     }
     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: 'ef009c7cd2e654ea2dd3d67675f221229f924ec0', class: classes(['zonos--virtual-scroll']) }, h("div", { key: 'a2831fb8251cb27b3d814e8c493e8303ac04ff1c', class: classes(['scroller']), style: {
+        return (h(Host, { key: '931ec0dfcbb239d4e3f6f127acfffd22b4b9316f', class: classes(['zonos--virtual-scroll']) }, h("div", { key: '65b5823473b15304317e7a3ec51efd807b3215fa', class: classes(['scroller']), style: {
                 height: `${this.totalHeight}px`,
                 width: `${containerWidth}px`,
-            } }), h("div", { key: 'e36052e45224c89860b469b939898aa9861181a8', class: classes(['item-container']), style: {
+            } }), h("div", { key: 'ac8fae50951a3a03ff76ebcef744d739c03bbad8', 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: '725c727348687e663e6225837a2a135d177b6d4a' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'ce1a6a656f02ba26460066561b08f449e9e042bc' }, "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.js

@@ -27,9 +27,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: 'd202f2295a5a3182727f2166847ac56f5958b654', class: "zonos--elements" }, h("div", { key: 'b42f6b1339449c5c4cebc999f25c0fc02a6b6e85', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: 'ff7ca3834fbd8febed2ad016add7832c84b3d067', class: "zonos--elements" }, h("div", { key: 'f3c28cb5afe06a98789e61ed233317402eb7deca', class: "zonos--hello-dialog-footer", style: {
                 '--zonos--primary-color': primaryColor,
-            } }, h("a", { key: 'c6465111d747a9c4a5b067039df51a9dc8df1976', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'fedd91718e253a8332334bea848178f091ae1cea', "aria-label": "Zonos Logo", autoHeight: true, content: mainColor === 'black' ? ZonosIconLight : ZonosIconDark, iconColor: mainColor, size: 108 })), h("div", { key: '9211d83b19f866ba87e171eeeb29690890ca9dcb', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'c88ca108b05511ebcaa9f1761d01413e61af91a5', 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: 'ff2386a7e4bfced9a9c8a2d62c21257c1052053e', 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: 'e229fcdcc64734e9ed762f5324c7c35ae88a8e17', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '7eb45e7359e7c5d411801d29f06d7c700633c7f3', "aria-label": "Zonos Logo", autoHeight: true, content: mainColor === 'black' ? ZonosIconLight : ZonosIconDark, iconColor: mainColor, size: 108 })), h("div", { key: '9dba0c118f8d7cac5c9aaae36d8270f2a8cb8360', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'd40f08f0e1437290ed4fbbd6ad4dd6e61878804c', 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: '6312ac59bc58142aee85702b3f4538949255cbb9', 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)))));
     }
     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

@@ -308,18 +308,18 @@ export class ZonosHelloDialog {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '048945538b24e429425ba47f0964a2c16a8c2d3d', class: "zonos--elements" }, h("div", { key: '539cb35da5f85ec64a166757eb09389262232d3e', class: classes([
+        return (h(Host, { key: '178654e9b701bb68a4d47495897445cf87806c37', class: "zonos--elements" }, h("div", { key: 'eb0f3ced0226513df3911e0664aff10d523fdac7', 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: 'ef1ad9355d3244d96971217311f1c674adeb6ee3' }, h("div", { key: '463e7752c0a1c11c6c86bf0dd8031b81511c0c14', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '89c1ae9d62c5b6c21472597c1afc5733a1cb8512', 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: '2657decc4b955f00eeb360018791e18a7a4ac70a', spacing: 24 }, h("zonos-country-flag", { key: '57e9c4bdfc7a14e0268097a5c0c79ef508011347', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'cda79b1e8487d72ed6ca33e2298731953ad9620e', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '17d98d8f62d953c2b41ee46678ae4bea26b09ca5', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '856cebfb2d0d34a52d23f3eb8ccc7a64ef16e822', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '905f5e46a8eba8d9ff69af0ee5f51dadd168878e', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'f185f2d707a3b9628896a7e15f2a0ad20da112ec' }, h("div", { key: '80c53ad6728b221bedbfaec2ec77fee96029e12b', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '31b71832bee5e4515dbf060746f022d9c91502af', 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: '5f11c3b0355ba0c85cf134522b6e21fd28dfe16c', spacing: 24 }, h("zonos-country-flag", { key: '6d6dcad7e3700f67c4261995d867aacb42715404', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '7a325a9b94e58dc5f8dba5baba9a00f835466ee2', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '24e2407475b740b50ca07fe9278363fdefc27d01', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '6b38dee6ec6fcf39e02c5225155e2af69c367a39', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '567d126d05f236fa0aab764d78b1692ebfe82f8b', 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)))));
-        }), h("zonos-card", { key: '600e71f5ccd6f2f86d5fe00833f480b5059fa145', spacing: "12px" }, h("zonos-v-stack", { key: '75cc0236d7f59ef08e7700ef326c079b2eb273a2', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, dutyDeMinimisMessage && (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis icon", content: ImportIcon }), h("zonos-text", { "aria-label": "Duty de minimis message" }, dutyDeMinimisMessage))), taxDeMinimisMessage && (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis icon", content: MoneyIcon }), h("zonos-text", { "aria-label": "Tax de minimis message" }, 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: '70c60065a548ab2e178df64062991b8160d62f55', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '14da13080459253ab355f60f67216f99741b69a2' }, h("zonos-country-select", { key: 'e18e90eb0e68450ceb833aa999f24108fd154eb8', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '56255cb5629ee7600378d13ee700adf1d3c73f51' }, h("zonos-language-select", { key: '3d74f4c28c067ea9f94da2d3274abf4d750bcab7', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: 'e96943bc58d47531f748217858939ddf2a586441', spacing: "12px" }, h("zonos-v-stack", { key: '3e1850a86542ad66c224e4b81f1c5442e7716f6d', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, dutyDeMinimisMessage && (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis icon", content: ImportIcon }), h("zonos-text", { "aria-label": "Duty de minimis message" }, dutyDeMinimisMessage))), taxDeMinimisMessage && (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis icon", content: MoneyIcon }), h("zonos-text", { "aria-label": "Tax de minimis message" }, 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: '33e41b69e4a5b00623f3e412609e7162cb560c38', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'fa17c20b3d893ed9f2249bbceca5237fa48bc64e' }, h("zonos-country-select", { key: '15a5924f176c4a805405684c3eda90f47979cf0b', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'ab1d061a3c9c68b43c4203fa14af2ffcf7d33e82' }, h("zonos-language-select", { key: '97f4c760e65d7af39160a1ff978d8a7b0864a763', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,6 +5,7 @@ import { storageStore } from "../store/storageStore";
 import { zonosStore, zonosStoreFontFamily, zonosStoreInitSetting, } from "../store/zonosStore";
 import { getZonosSettings } from "../utils/api/getZonosSettings";
 import { initCheckout } from "../utils/checkout/initCheckout";
+import { initCollect } from "../utils/checkout/initCollect";
 import { handleFetch } from "../utils/handleFetch";
 import { initHello } from "../utils/hello/initHello";
 import { CheckoutAddressService } from "../utils/iframe/CheckoutAddressService";
@@ -23,6 +24,18 @@ export class ZonosController {
         void initCheckout(zonosStore.checkoutSettings);
         log('init checkout element');
     }
+    /**
+     * Method to initialize Collect element
+     */
+    async initCollectElement(stripe) {
+        if (!stripe) {
+            log('Stripe is not loaded yet - cannot init Collect element', 'warn');
+            return;
+        }
+        stripeStore.stripe = stripe;
+        void initCollect();
+        log('init Collect element');
+    }
     /**
      * Init zonos notification
      */
@@ -94,8 +107,8 @@ export class ZonosController {
         if (!htmlString) {
             return;
         }
-        // Skip injecting custom HTML for legacy checkout
-        if (!window.Zonos.isLegacyCheckout) {
+        // Skip injecting custom HTML for legacy checkout and collect
+        if (!window.Zonos.isLegacyCheckout || window.Zonos.isCollect) {
             log('=== Skip injecting custom HTML for hosted checkout', 'info');
             return;
         }
@@ -134,12 +147,48 @@ export class ZonosController {
             src: `${process.env.NEXT_PUBLIC_ZONOS_CLOUDFLARE_URL}/iframe/google-maps?signedToken=${signedPayload}`,
         });
     }
+    buildBaseConfig(json) {
+        var _a, _b;
+        const baseCheckoutConfig = Object.assign(Object.assign({}, this.config.checkoutSettings), {
+            // Don't allow to override settlement currencies setting. This setting is only configured by Zonos
+            allowedSettlementCurrencies: undefined,
+            // Don't allow to override capture delay setting. This setting is only configured by Zonos
+            captureDelay: undefined,
+            // Don't allow to override subscription status
+            subscriptionStatus: undefined
+        });
+        if (window.Zonos.isCollect) {
+            return Object.assign(Object.assign({}, this.config), { checkoutSettings: baseCheckoutConfig, helloSettings: Object.assign(Object.assign({}, this.config.helloSettings), {
+                    // No need to show hello for collect
+                    visibilityStatus: 'DISABLED'
+                }) });
+        }
+        if (!this.config.checkoutSettings) {
+            return Object.assign(Object.assign({}, this.config), {
+                // If there is no override checkout settings from Zonos.init, just use the default checkout settings from our settings
+                checkoutSettings: undefined
+            });
+        }
+        // Should override success behavior for legacy checkout if
+        const shouldOverrideSuccessBehavior = window.Zonos.isLegacyCheckout &&
+            !!window.Zonos.cartData &&
+            ((_a = this.config.checkoutSettings) === null || _a === void 0 ? void 0 : _a.successBehavior) === 'CLOSE_MODAL';
+        return Object.assign(Object.assign({}, this.config), { checkoutSettings: Object.assign(Object.assign({}, baseCheckoutConfig), {
+                // Set success redirect url to store url if it's legacy checkout.
+                // when success behavior is CLOSE_MODAL, use the default success behavior and update the keep shopping button link to their store, because just redirect user without confirmation page would confuse them
+                successBehavior: shouldOverrideSuccessBehavior
+                    ? 'ZONOS_SUCCESS_PAGE'
+                    : this.config.checkoutSettings.successBehavior, successRedirectUrl: shouldOverrideSuccessBehavior
+                    ? ((_b = window.Zonos.cartData) === null || _b === void 0 ? void 0 : _b.storeBaseUrl) || (json === null || json === void 0 ? void 0 : json.onlineStoreSettings.url)
+                    : this.config.checkoutSettings.successRedirectUrl
+            }) });
+    }
     async componentWillLoad() {
         this.initHistoryListener();
         zonosStore.zonosApiKey = this.zonosApiKey;
         // running with scope async function to avoid blocking the main thread
         (async () => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d;
             const { errors, json, zonosMode } = await getZonosSettings();
             if (((_b = (_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toString()) === '403') {
                 log('Failed to load zonos settings. This domain may not have access', 'warn');
@@ -158,27 +207,9 @@ export class ZonosController {
                 // Otherwise respect override
                 return (_c = this.config.appearance) === null || _c === void 0 ? void 0 : _c.logoUrl;
             };
-            const shouldOverrideSuccessBehavior = window.Zonos.isLegacyCheckout &&
-                !!window.Zonos.cartData &&
-                ((_d = this.config.checkoutSettings) === null || _d === void 0 ? void 0 : _d.successBehavior) === 'CLOSE_MODAL';
+            const baseConfig = this.buildBaseConfig(json);
             // override subscription status
-            const config = Object.assign(Object.assign({}, this.config), { appearance: Object.assign(Object.assign({}, this.config.appearance), { logoUrl: getLogoUrl() }), checkoutSettings: this.config.checkoutSettings
-                    ? Object.assign(Object.assign({}, this.config.checkoutSettings), {
-                        // Don't allow to override settlement currencies setting. This setting is only configured by Zonos
-                        allowedSettlementCurrencies: undefined,
-                        // Don't allow to override capture delay setting. This setting is only configured by Zonos
-                        captureDelay: undefined,
-                        // Don't allow to override subscription status
-                        subscriptionStatus: undefined,
-                        // Set success redirect url to store url if it's legacy checkout.
-                        // when success behavior is CLOSE_MODAL, use the default success behavior and update the keep shopping button link to their store, because just redirect user without confirmation page would confuse them
-                        successBehavior: shouldOverrideSuccessBehavior
-                            ? 'ZONOS_SUCCESS_PAGE'
-                            : this.config.checkoutSettings.successBehavior, successRedirectUrl: shouldOverrideSuccessBehavior
-                            ? ((_e = window.Zonos.cartData) === null || _e === void 0 ? void 0 : _e.storeBaseUrl) ||
-                                (json === null || json === void 0 ? void 0 : json.onlineStoreSettings.url)
-                            : this.config.checkoutSettings.successRedirectUrl
-                    }) : undefined });
+            const config = Object.assign(Object.assign(Object.assign({}, this.config), { appearance: Object.assign(Object.assign({}, this.config.appearance), { logoUrl: getLogoUrl() }) }), baseConfig);
             // load default setting if failed to load user settings
             zonosStoreInitSetting({
                 overrideSettings: config,
@@ -199,11 +230,20 @@ export class ZonosController {
             // init localization store
             await initLocalizationStore();
             // checkout init
-            const publishableKey = ((_f = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _f === void 0 ? void 0 : _f.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
+            const publishableKey = ((_d = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _d === void 0 ? void 0 : _d.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
             if (!publishableKey || !this.stripeInitEvent) {
                 log('Checkout failed to load -- missing publishable key', 'warn');
                 return;
             }
+            if (window.Zonos.isCollect) {
+                // send publishable key out to load stripe
+                this.stripeInitEvent.emit({
+                    publishableKey: publishableKey.token,
+                });
+                // init google places service
+                void this.initGooglePlacesService(json);
+                return;
+            }
             if (zonosStore.checkoutSettings.subscriptionStatus === 'INACTIVE') {
                 log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
                 log('zonos controller loaded');
@@ -270,7 +310,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '62c0b3079d64f05800da24daa19e0e1e3a890bca', class: "zonos--elements" });
+        return h(Host, { key: 'ca4c02bf0aa73d19ea58cdf6a76c8424276b69cd', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }
@@ -391,6 +431,32 @@ export class ZonosController {
                     "tags": []
                 }
             },
+            "initCollectElement": {
+                "complexType": {
+                    "signature": "(stripe: Stripe) => Promise<void>",
+                    "parameters": [{
+                            "name": "stripe",
+                            "type": "Stripe",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Stripe": {
+                            "location": "import",
+                            "path": "@stripe/stripe-js",
+                            "id": "node_modules::Stripe"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to initialize Collect element",
+                    "tags": []
+                }
+            },
             "setupGoogleFont": {
                 "complexType": {
                     "signature": "(overrideFont?: string) => Promise<void>",

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

@@ -1,11 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h, Host, } from "@stencil/core";
-import { paypalStoreInitButtons } from "../store/checkout/paypal";
+import { paypalStoreInitButtons, paypalStoreOnChange, } from "../store/checkout/paypal";
 import { log } from "../utils/logging/log";
 /**
  * This component is a wrapper for the paypal authentication element that would render default style object
  */
 export class ZonosPaypalPayment {
+    constructor() {
+        this.storeUnsubscribeList = [];
+    }
     async loadPaypal() {
         if (!window.Zonos.paypal) {
             log('Paypal is not available');
@@ -36,12 +39,20 @@ export class ZonosPaypalPayment {
             await paypalButton.render(container);
         });
     }
+    componentWillLoad() {
+        this.storeUnsubscribeList = [
+            paypalStoreOnChange('paypal', this.loadPaypal.bind(this)),
+        ];
+    }
     componentDidLoad() {
         // @Watch doesn't get trigger on initial load
         void this.loadPaypal();
     }
+    disconnectedCallback() {
+        this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
+    }
     render() {
-        return (h(Host, { key: 'e8c839cc9d0286f5ae4643243b14fa66f9584833', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'cac06948de1ccca97ba65eca10b3e5d9f3a9a362', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'bcf11ef0ceab1d847c237ec26ec604440983c16f', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'ce5033f39b2e9644e30fc1e0e35f64e5d9b9730d', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-paypal-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/store/checkout/cart.js

@@ -283,8 +283,12 @@ const cartStoreGetMethod = (landedCost) => {
     }
     return landedCost.method;
 };
-const cartStoreUpdateSelectedShippingOption = async (selectedShippingOption, landedCostId) => {
+const cartStoreUpdateSelectedShippingOption = async ({ applySubtotalsOnly, landedCostId, selectedShippingOption, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    log('Updating selected shipping option', 'info', {
+        landedCostId,
+        selectedShippingOption,
+    });
     cartStore.selectedShippingOption = selectedShippingOption;
     // update shipping transit info
     const transitData = cartStoreGetShippingTransitInfo(cartStore.selectedShippingOption);
@@ -319,16 +323,33 @@ const cartStoreUpdateSelectedShippingOption = async (selectedShippingOption, lan
     const isAboveDeminimis = !!((_e = (_d = selectedLandedCost === null || selectedLandedCost === void 0 ? void 0 : selectedLandedCost.landedCost) === null || _d === void 0 ? void 0 : _d.deMinimis) === null || _e === void 0 ? void 0 : _e.find(item => ['DUTY', 'TAX'].includes(item.type) && item.threshold === 'ABOVE'));
     cartStore.isSelectedShippingAboveDeminimis = isAboveDeminimis;
     cartStore.isSelectedShippingGuarantee = isGuarantee;
-    // update session with selected landed cost
-    const updateCalculateStatus = await cartStoreReCalculateTotal({
-        adjustmentsAmount: cartStore.adjustmentTotal,
-        billToPartyId: stripeStore.partyBillingId,
-        cartId: window.Zonos.cartId,
-        dutiesTaxesFeesEstimate: dutiesTaxesFeesEstimate,
-        landedCostId: (_f = selectedLandedCost.landedCost) === null || _f === void 0 ? void 0 : _f.id,
-        shipToPartyId: stripeStore.partyShippingId,
-        varianceTestInput: storageStore.enabledVariantTestKeys || [],
-    });
+    let updateCalculateStatus = false;
+    /**
+     * For collect, we are trying to mimic the behavior that checkout is currently doing, where there is already a checkout session, we already updated with the landed cost.
+     * But we need to call this function so that we can use all of the information that already in place in cartStore, so to avoid latency issue, we only apply subtotals here.
+     */
+    if (applySubtotalsOnly) {
+        const subtotals = selectedLandedCost.subtotals;
+        cartStoreApplySubtotals({
+            dutiesTaxesFeesEstimate,
+            method: cartStore.landedCostMethod,
+            subtotals,
+        });
+        log('Exchange rate updated for cart items (landed cost subtotal)', 'info', cartStore.exchangeRate);
+        updateCalculateStatus = true;
+    }
+    else {
+        // update session with selected landed cost
+        updateCalculateStatus = await cartStoreReCalculateTotal({
+            adjustmentsAmount: cartStore.adjustmentTotal,
+            billToPartyId: stripeStore.partyBillingId,
+            cartId: window.Zonos.cartId,
+            dutiesTaxesFeesEstimate: dutiesTaxesFeesEstimate,
+            landedCostId: (_f = selectedLandedCost.landedCost) === null || _f === void 0 ? void 0 : _f.id,
+            shipToPartyId: stripeStore.partyShippingId,
+            varianceTestInput: storageStore.enabledVariantTestKeys || [],
+        });
+    }
     // update conditionally render pay in USD button
     const firstItem = (_g = cartStore.items.find(Boolean)) === null || _g === void 0 ? void 0 : _g.currencyCode;
     // Stripe address event data should be available at this point
@@ -370,7 +391,7 @@ const cartStoreResetCartItems = () => {
     cartStore.items = cartStore.items.map(item => (Object.assign(Object.assign({}, item), { isRestricted: false })));
     cartStore.restrictedItems = [];
 };
-const cartStoreUpdateItems = async ({ adjustments, cartItems, }) => {
+const cartStoreUpdateItems = async ({ adjustments, cartItems, landedCostId, shouldInitSessionOnFailure = true, }) => {
     var _a;
     // Update adjustments and items
     cartStore.adjustments = adjustments;
@@ -394,9 +415,9 @@ const cartStoreUpdateItems = async ({ adjustments, cartItems, }) => {
         currency: currency,
         dutiesTaxesFeesEstimate: 0,
         itemsAmount: total,
+        landedCostId,
         shipToPartyId: stripeStore.partyShippingId,
-        // attempt to init session on failure to update checkout session
-        shouldInitSessionOnFailure: true,
+        shouldInitSessionOnFailure,
         varianceTestInput: storageStore.enabledVariantTestKeys || [],
     });
     stripeStore.isFetchingSession = false;
@@ -449,4 +470,4 @@ const cartStoreResetTabItems = () => {
     cartStore.tabItems = Object.assign(Object.assign({}, cartStore.tabItems), { 'customer-info': Object.assign(Object.assign({}, cartStore.tabItems['customer-info']), { isDone: false }), payment: Object.assign(Object.assign({}, cartStore.tabItems.payment), { isDone: false }), shipping: Object.assign(Object.assign({}, cartStore.tabItems.shipping), { isDone: false }) });
     cartStoreResetSelectedShippingOption();
 };
-export { cartStore, cartStoreApplySubtotals, cartStoreCheckItemRestrictions, cartStoreClearCheckoutInterval, cartStoreGetMethod, cartStoreGetShippingTransitInfo, cartStoreHasOneEligibleItem, cartStoreNextStep, cartStoreOnChange, cartStorePreviousStep, cartStoreReset, cartStoreResetCartItems, cartStoreResetTabItems, cartStoreSetCheckoutSession, cartStoreStartCheckoutInterval, cartStoreUpdateItems, cartStoreUpdateSelectedShippingOption, cartStoreUpdateToErrorState, };
+export { cartStore, cartStoreApplySubtotals, cartStoreCheckItemRestrictions, cartStoreClearCheckoutInterval, cartStoreGetMethod, cartStoreGetShippingTransitInfo, cartStoreHasOneEligibleItem, cartStoreNextStep, cartStoreOnChange, cartStorePreviousStep, cartStoreReCalculateTotal, cartStoreReset, cartStoreResetCartItems, cartStoreResetTabItems, cartStoreSetCheckoutSession, cartStoreStartCheckoutInterval, cartStoreUpdateItems, cartStoreUpdateSelectedShippingOption, cartStoreUpdateToErrorState, };