@zonos/elements 1.3.31 → 1.3.33

package/dist/cjs/zonos-hello-dialog.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b071017b.js');
-const cart = require('./cart-62ff7ee7.js');
+const cart = require('./cart-11b47252.js');
 const zonosStore = require('./zonosStore-4c6c85da.js');
 const classes = require('./classes-b7918f56.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
@@ -217,18 +217,18 @@ const ZonosHelloDialog = class {
         const defaultMessage = formatStringWithLinks.formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (index.h(index.Host, { key: '1194b1466981cf8ba04d726eff3ba34b19510258', class: "zonos--elements" }, index.h("div", { key: 'ffea099f72ff3f42ddbd5b5947a5b8ca0f3d206d', "aria-hidden": "true", class: classes.classes([
+        return (index.h(index.Host, { key: 'af2c46bcc413205d644a2b94ee2ff568d3d004f2', class: "zonos--elements" }, index.h("div", { key: '67a563de9e702e370d057ee3cc45bc0c14feedc5', "aria-hidden": "true", class: classes.classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (index.h("div", { key: '7396d7cd91c69f77d5f2f4ae9a088b1a763c6988' }, index.h("div", { key: 'aedfda83797a58fc2a0432a89503cbc7774d5c8b', class: "zonos--hello-dialog-content" }, index.h("zonos-button", { key: '0c9ad53d902ce7c45cdf9192dbe8ea7f9f46f7d4', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), index.h("zonos-v-stack", { key: '9a359684275e946fc26bdc6ea7b8a371bf49dea5', spacing: 24 }, index.h("zonos-country-flag", { key: 'ca230fb4426ecb39febb0972d9a6ce15435c4e1d', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { key: '17bbc6a70143a9165b8f088b5b2ea1e6e69622ed', class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { key: '33c66273d9fd8330ee4cf2bfcdf5b454a89e0ae0', type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { key: '57cfdcd587ab62fad99016a389771d3a169ad297', innerHTML: defaultMessage, textColor: "gray-800" })), index.h("zonos-v-stack", { key: '28b9b9e7967e81ca50bc4d0cfe45c9545a8b9dde', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (index.h("div", { key: '412a8d2f4c01e4ff216feb92a979be5987bcd8c7' }, index.h("div", { key: 'b2921acfc77c6a402a14256a6f1c28607f6533e7', class: "zonos--hello-dialog-content" }, index.h("zonos-button", { key: 'aa623c0533a5f852dab7f0f98d6dc26f62ef899a', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), index.h("zonos-v-stack", { key: '4fdac9331a5b2506a5ca1c7c1b6bfecf822bfcd9', spacing: 24 }, index.h("zonos-country-flag", { key: '57afef45e0bebe9bdfa715306f6ec2c30aca8dc1', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { key: '954b970c82fd631efadbd9c916e8bad78f0e1321', class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { key: 'cde98a9636e6150d6cab009970938a0cf61bc05a', type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { key: 'b63fc79317f23854737c1f2dd2cbde38f3841f2a', innerHTML: defaultMessage, textColor: "gray-800" })), index.h("zonos-v-stack", { key: 'e115a03222d2271b358c3f1ae3feb938bafcdbef', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (index.h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (index.h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), index.h("zonos-card", { key: '94ef9064b4e523c3f0fc9cd50142da36f003006d', spacing: "12px" }, index.h("zonos-v-stack", { key: '01b3550b5b080d106eaecedf78b13275e01ae159', spacing: 12 }, index.h("div", { key: '19b1ba3e12dab87250d3ad19a5dc8e13b6f871d6', class: "zonos--flex-message" }, index.h("zonos-icon", { key: '9773bf4ad57752437a367c2093de0737693bf588', "aria-label": "Duty de minimis", content: ImportIcon }), index.h("zonos-text", { key: '4c75d971f37db399e6f4332a6c92b53758629b6b' }, dutyDeMinimisMessage)), index.h("div", { key: '52640f51d3664582d7bb3c26f2d2d17d82ad856e', class: "zonos--flex-message" }, index.h("zonos-icon", { key: '9afe9273e6b19aada01018152a64973449b87094', "aria-label": "Tax de minimis", content: MoneyIcon }), index.h("zonos-text", { key: 'b2481af13570471cc2907c48b54c7039ec31e92c' }, taxDeMinimisMessage)), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), index.h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), index.h("zonos-hello-dialog-footer", { key: 'a6b2d31ee922db13cf9987a823e99d6088c392b0', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (index.h("div", { key: '21d187502c3f0ccef0c351f09aa943566228944f' }, index.h("zonos-country-select", { key: '3dbd522e8a5004c2a1ed766ba92c9d0387f845d8', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (index.h("div", { key: '686d8bba48fefd49bf2bf15dc295fb79b9cd5299' }, index.h("zonos-language-select", { key: '22ba1b42ec7ba1808fd806ad3529a377d34b4ac8', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), index.h("zonos-card", { key: '6f5ef13c8ce1171b99c148f43f491ced8f29cd57', spacing: "12px" }, index.h("zonos-v-stack", { key: '816a373a6dcf69976279af51f09d136f18c6b4a8', spacing: 12 }, index.h("div", { key: '51fc31937cb4885c7a98ee5fbc0755a00158f172', class: "zonos--flex-message" }, index.h("zonos-icon", { key: 'bc659d649b3a7f046225270870e7ae31597027f4', "aria-label": "Duty de minimis", content: ImportIcon }), index.h("zonos-text", { key: 'e63ce2eb6f381718ca26962c7429f266bf8cf8d9' }, dutyDeMinimisMessage)), index.h("div", { key: '6f49eac81be52709ad8f35c04cccd7d2fec03b7a', class: "zonos--flex-message" }, index.h("zonos-icon", { key: 'd95f29c3c42480c89a34e831740cfdbb3d64c058', "aria-label": "Tax de minimis", content: MoneyIcon }), index.h("zonos-text", { key: 'c226092fef030070af3af1d45debab989fb4f1b7' }, taxDeMinimisMessage)), additionalInformation === null || additionalInformation === void 0 ? void 0 :
+            additionalInformation.map(info => (index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), index.h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), index.h("zonos-hello-dialog-footer", { key: '32739e817940a937b59380197934ced91f2afc50', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (index.h("div", { key: 'be58e393680370837ae35d5d4f85f77cf9620db2' }, index.h("zonos-country-select", { key: 'bc5c7e086513a44f817e5769acf2ca382b01fcc4', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (index.h("div", { key: '7cbee089b9661602bb23e5e2821030d04891f18a' }, index.h("zonos-language-select", { key: '55d654b2b339cfd83e3fe9814d914a382a891af3', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

package/dist/cjs/zonos-hello.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b071017b.js');
 const zonosStore = require('./zonosStore-4c6c85da.js');
-const cart = require('./cart-62ff7ee7.js');
+const cart = require('./cart-11b47252.js');
 const classes = require('./classes-b7918f56.js');
 const logError = require('./logError-4e2f2020.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');

package/dist/cjs/zonos-input.cjs.entry.js

@@ -27,17 +27,17 @@ const ZonosInput = class {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (index.h(index.Host, { key: 'f2bf9e34ef694f026eceed1327603659bbd4c5a4', class: classes.classes([
+        return (index.h(index.Host, { key: 'f4b7ad75b2aebce3bc05a482fe20fee290a3a4e7', class: classes.classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius.getBorderRadius(),
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '0fe9066fc683f6a683c494209fa29b10c0076dc5', class: classes.classes([
+            } }, index.h("div", { key: '356e16c11c1cd9edf137f69978ebaa3eb2c28d4e', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("input", { key: 'f185418ddc6a83e829a9d2dd44a021288f00d4d5', class: classes.classes([
+            ]) }, index.h("input", { key: '71659072bd58942efebb88be65ced18ad29be8ab', class: classes.classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -45,7 +45,7 @@ const ZonosInput = class {
             ]), disabled: this.isDisabled, onInput: e => {
                 const input = e.target;
                 this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), index.h("label", { key: '3d4ab801e27af15d819b17db226f0d5f719ac903', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), index.h("label", { key: 'b84c60836fc969c23aedc314c67337e8e87f2ab6', class: "zonos--floated-label", "data-label": this.inputLabel }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{zonos-card_2.cjs.entry.js → zonos-language-select_2.cjs.entry.js}

@@ -3,38 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b071017b.js');
+const cart = require('./cart-11b47252.js');
 const zonosStore = require('./zonosStore-4c6c85da.js');
-const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-62ff7ee7.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./logError-4e2f2020.js');
 require('./isDarkColor-371a3b1a.js');
 require('./getBorderRadius-074b46ef.js');
 
-const zonosCardCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .styled-card{border:var(--zonos-elements-border);border-radius:var(--zonos-elements-radius-6);padding:var(--spacing, 24px);text-align:left}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";
-const ZonosCardStyle0 = zonosCardCss;
-
-const ZonosCard = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.actions = undefined;
-        this.footerActions = undefined;
-        this.footerContent = undefined;
-        this.footerHeight = undefined;
-        this.label = undefined;
-        this.spacing = '24px';
-    }
-    render() {
-        return (index.h(index.Host, { key: '0e52ca31db6c2f956da1910d6e0a222b588c1bcc', style: {
-                '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '69f391d821f88cbee4b0c586a8323b1dd68d7fd3', class: classes.classes(['styled-card']), style: { padding: this.spacing } }, this.label && (index.h("header", { key: '4568a1d7c354830e6e65e31b20b38140aaab9d01', class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { key: 'e0a6b7a3776916f8208c27373878041807d91960', type: "subheader" }, this.label), index.h("h-stack", { key: 'c5f8d01b2f477b16ab9387081987eae64b156e76', spacing: 8 }, this.actions))), index.h("slot", { key: '6001acfaae8ba37456a7c23bae5c44a91da074f9' }), (this.footerActions || this.footerContent) && (index.h("footer", { key: '78b926a323a5f1375c8120d5aa8b1ab2a4f3fa4a', class: "card-footer", style: {
-                height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
-                padding: this.spacing,
-            } }, index.h("div", { key: '2bd0c86b75096c2ee786d4a9b16a3d6e385fbbf1' }, this.footerContent), index.h("h-stack", { key: '7a3f840ac9678a905338a99b8327115bc8199789', spacing: 8 }, this.footerActions))))));
-    }
-};
-ZonosCard.style = ZonosCardStyle0;
-
 const GreenCheckDuotoneIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.99996 2.6665C5.05444 2.6665 2.66663 5.05432 2.66663 7.99984C2.66663 10.9454 5.05444 13.3332 7.99996 13.3332C10.9455 13.3332 13.3333 10.9454 13.3333 7.99984C13.3333 5.05432 10.9455 2.6665 7.99996 2.6665Z" fill="#AFF8C3"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1403 6.10535C10.3582 6.27488 10.3975 6.58902 10.228 6.80699L8.01055 9.65797C7.76436 9.97449 7.29646 10.0036 7.01291 9.72008L5.81307 8.52024C5.61781 8.32498 5.61781 8.0084 5.81307 7.81314C6.00833 7.61787 6.32492 7.61787 6.52018 7.81314L7.45301 8.74597L9.43862 6.19305C9.60815 5.97508 9.92229 5.93581 10.1403 6.10535Z" fill="#246627"/>
@@ -56,12 +31,31 @@ const ZonosLanguageSelect = class {
     }
     render() {
         const { selectedLocale } = cart.localizationStore;
-        return (index.h(index.Host, { key: '34580123b768ce983c0c9c6fa309bdb1d6756a5a', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '6682af3d631bac1a8d3783418c30364ff7694792', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '6e86352a45b5d9ad0e5ed5dac330367a49a6c6fe', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: 'd5b55cbb2858a2c0a6aa6ce0ea0d50eecc7360e8', handleOnClose: () => this.handleOnClose(), label: cart.translate('Select a language') }), index.h("div", { key: 'c9aeb075428357c4cb15d9a2b09df7c8d6b01b11', class: "zonos--language-select-content" }, ILanguage.languages.map(language => (index.h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, index.h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, index.h("div", { key: '9f7e60bc5c4e9d1c0cc31afcbbaec444a7da630e', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: 'f790ef85eeb0bed05773d98793437ab4d6e64c8d', handleOnClose: () => this.handleOnClose(), label: cart.translate('Select a language') }), index.h("div", { key: '7385a1134b21ae4b39947483ee643da021e6c54c', class: "zonos--language-select-content" }, ILanguage.languages.map(language => (index.h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, index.h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
 };
 ZonosLanguageSelect.style = ZonosLanguageSelectStyle0;
 
-exports.zonos_card = ZonosCard;
+const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
+
+const zonosSelectDialogHeaderCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--select-dialog-header-wrapper{position:-webkit-sticky;position:sticky;top:0;background:var(--zonos-elements-surface-color);padding:16px}:host .zonos--select-dialog-header-wrapper .zonos--select-dialog-header{position:relative;-ms-flex-pack:justify;justify-content:space-between;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
+const ZonosSelectDialogHeaderStyle0 = zonosSelectDialogHeaderCss;
+
+const ZonosSelectDialogHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.handleOnClose = () => { };
+        this.label = '';
+    }
+    render() {
+        return (index.h(index.Host, { key: '21cd3c3e35baf172ecad7f47a76810e8f39bdeff', class: "zonos--elements", style: {
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("zonos-v-stack", { key: '0470633326b6fca9b45a8be67e0d77819561f634', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '8713cbf368658af22bb88825d32175117d47c95b', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: '2f94e9f6139570398897ca55934c5244df7f82e8', type: "boldLabel" }, this.label), index.h("zonos-button", { key: 'c247dabcc8f487a4cc5a814fb1aa4d9a68fa4ba3', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: '26727e634ec09a3b9e3912ada3b920a87a1ba4d0' }))));
+    }
+};
+ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;
+
 exports.zonos_language_select = ZonosLanguageSelect;
+exports.zonos_select_dialog_header = ZonosSelectDialogHeader;

package/dist/cjs/zonos-link.cjs.entry.js

@@ -16,7 +16,7 @@ const ZonosLink = class {
         this.linkTitle = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'a148ed9b4d285cd39b63da348dcfcc11f4973f04', class: "zonos--elements" }, index.h("a", { key: '121b299148c4227c0b500ecb6ded03470476aa90', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: 'cf6637f399d3c069bd6ea3d0f3a900fd0740afc5' }))));
+        return (index.h(index.Host, { key: 'bba0da02c0dee468bd0cacd268f339f7ec4f1008', class: "zonos--elements" }, index.h("a", { key: '19515197e397b2b24237e77d3e89de75382c14e1', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '63d597a3091e954c9302e461030646b38ee2396e' }))));
     }
 };
 ZonosLink.style = ZonosLinkStyle0;

package/dist/cjs/zonos-logo.cjs.entry.js

@@ -19,11 +19,11 @@ const ZonosLogo = class {
         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 (index.h(index.Host, { key: 'c790c72d413c586a873c5046a1aee797c1f0af36', class: classes.classes(['zonos--elements zonos--logo']), style: {
+        return (index.h(index.Host, { key: '08ef20244bc204125a7a308efed42cd7fc86c885', class: classes.classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, index.h("img", { key: '68efd2097a0d8488308de0b50bef30cc67deb6fa', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
+            } }, index.h("img", { key: '9202f0619fa3874a19ca3050477719b19592d82a', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };

package/dist/cjs/zonos-notification_2.cjs.entry.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b071017b.js');
+const zonosStore = require('./zonosStore-4c6c85da.js');
+const classes = require('./classes-b7918f56.js');
+const cart = require('./cart-11b47252.js');
+const logError = require('./logError-4e2f2020.js');
+require('./isDarkColor-371a3b1a.js');
+require('./getBorderRadius-074b46ef.js');
+
+const zonosNotificationCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999999;bottom:24px;gap:8px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:8px;border-radius:var(--border-radius, var(--zonos-elements-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--zonos-elements-green-700)}:host .zonos--notification-item.error{background-color:var(--zonos-elements-red-700)}:host .zonos--notification-item.warning{background-color:var(--zonos-elements-orange-700)}";
+const ZonosNotificationStyle0 = zonosNotificationCss;
+
+const ZonosNotification = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.notificationArray = [];
+    }
+    /**
+     * Show a notification
+     */
+    async showNotification(notification) {
+        // random generate id
+        const id = `id-${Math.random().toString(36).substring(2, 9)}`;
+        const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
+        this.notificationArray = [...this.notificationArray, notificationItem];
+        setTimeout(() => {
+            this.updateTransitionClass({
+                id,
+                transitionClass: 'show',
+            });
+        }, 50);
+        setTimeout(() => {
+            this.removeNotification(id);
+        }, notificationItem.timeout);
+    }
+    updateTransitionClass({ id, transitionClass, }) {
+        this.notificationArray = this.notificationArray.map(notification => {
+            if (notification.id === id) {
+                return Object.assign(Object.assign({}, notification), { transitionClass });
+            }
+            return notification;
+        });
+    }
+    /**
+     * Remove a notification
+     */
+    removeNotification(id) {
+        // add hide class before removing the item 100ms to trigger animation
+        this.updateTransitionClass({
+            id,
+            transitionClass: '',
+        });
+        setTimeout(() => {
+            this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
+        }, 300);
+    }
+    render() {
+        return (index.h(index.Host, { key: '17c08c90c6c1dfade4e43451c196127a0f53429e', class: classes.classes(['zonos--elements zonos--notification']), style: {
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { key: '6624419d86a5c7518539069dbc5c9d7c08262c75', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+            return (index.h("div", { "aria-hidden": "true", class: classes.classes([
+                    'zonos--notification-item',
+                    notification.type,
+                    notification.transitionClass,
+                ]), key: notification.id, onClick: () => {
+                    this.removeNotification(notification.id);
+                } }, index.h("zonos-text", { textColor: "gray-0" }, notification.message)));
+        }))));
+    }
+};
+ZonosNotification.style = ZonosNotificationStyle0;
+
+const zonosPaymentCss = ".sc-zonos-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-payment-h *.sc-zonos-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:16px}";
+const ZonosPaymentStyle0 = zonosPaymentCss;
+
+const ZonosPayment = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.titleText = undefined;
+        this.stripe = cart.stripeStore.stripe;
+        this.stripeElements = cart.stripeStore.stripeElements;
+    }
+    watchInitStripe() {
+        if (!this.stripeElements) {
+            return;
+        }
+        // Create and mount the Authentication Element in ${type} mode
+        const paymentElement = cart.stripeStore.stripePaymentElement ||
+            this.stripeElements.create('payment', {
+                layout: 'tabs',
+            });
+        const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
+        if (!paymentElementContainer) {
+            logError.logError('Cannot find container element for paymentElement');
+            return;
+        }
+        paymentElement.mount(paymentElementContainer);
+        paymentElement.on('change', event => {
+            cart.stripeStore.stripePaymentEventData = event;
+        });
+        cart.stripeStore.stripePaymentElement = paymentElement;
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        this.watchInitStripe();
+    }
+    render() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (index.h(index.Host, { key: '870d7a4cb6132332368d356488c5eedd1dea16f3', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '7aef62f6daae0c5b59caa685c4255fb78eebc1be', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '073976bceadf5f8efa78d0b1f6098e94bfa3d1a6', class: "zonos--payment-component" })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "stripeElements": ["watchInitStripe"],
+        "stripe": ["watchInitStripe"]
+    }; }
+};
+ZonosPayment.style = ZonosPaymentStyle0;
+
+exports.zonos_notification = ZonosNotification;
+exports.zonos_payment = ZonosPayment;

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b071017b.js');
+const zonosStore = require('./zonosStore-4c6c85da.js');
+const classes = require('./classes-b7918f56.js');
+
+const zonosVStackCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
+const ZonosVStackStyle0 = zonosVStackCss;
+
+const VStack = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.spacing = 24;
+    }
+    render() {
+        return (index.h(index.Host, { key: '8cdee94089af0eac57784a7914e169f363472577', style: {
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { key: 'd60da826d77b4cf7e5349b75927fc746f0053ddd', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '97b0e8232cbac73938225e1310712c1607997073' }))));
+    }
+};
+VStack.style = ZonosVStackStyle0;
+
+exports.zonos_v_stack = VStack;

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.css

@@ -43,14 +43,17 @@
   margin-bottom: 24px;
   border-radius: var(--border-radius, 10px);
   gap: 24px;
-  max-width: 360px;
-  min-width: 300px;
-  width: auto;
-  margin: auto;
   margin-top: 24px;
   background-color: var(--zonos-elements-gray-50);
   padding: 20px;
 }
+:host .zonos--finish-details {
+  max-width: 536px;
+  min-width: 300px;
+  line-height: 24px;
+  width: 0 auto;
+  margin: auto;
+}
 :host zonos-button {
   width: 100%;
 }
@@ -59,4 +62,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+}
+:host .zonos--finish-button-wrapper {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  margin: 0 auto;
+  margin-top: 48px;
+  max-width: 300px;
 }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.js

@@ -4,6 +4,7 @@ import { stripeStore, stripeStoreReset, stripeStoreRetrievePayment, } from "../.
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
+import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
 import { createCustomEvent } from "../../../utils/createCustomEvent";
 import { getBorderRadius } from "../../../utils/getBorderRadius";
 import { handleFetch } from "../../../utils/handleFetch";
@@ -31,16 +32,20 @@ export class ZonosCheckoutFinish {
             }));
             return json;
         };
-        this.handleSuccessBehavior = (orderId) => {
+        this.redirectToUrl = (url) => {
+            // reset store and checkout session id before redirecting
+            stripeStoreReset();
+            cartStore.checkoutSessionId = null;
+            window.location.href = url;
+        };
+        this.handleSuccessBehavior = () => {
+            var _a;
             const { successBehavior } = zonosStore.checkoutSettings;
             switch (successBehavior) {
                 case 'REDIRECT_TO_SUCCESS_PAGE': {
                     const redirectUrl = zonosStore.checkoutSettings.successRedirectUrl;
                     if (redirectUrl) {
-                        // reset store and checkout session id before redirecting
-                        stripeStoreReset();
-                        cartStore.checkoutSessionId = null;
-                        window.location.href = `${redirectUrl}?zOrderNumber=${orderId}`;
+                        this.redirectToUrl(`${redirectUrl}?zOrderNumber=${(_a = this.order) === null || _a === void 0 ? void 0 : _a.id}`);
                     }
                     // If no redirect URL, break and display Zonos success page
                     break;
@@ -61,7 +66,7 @@ export class ZonosCheckoutFinish {
             if (order) {
                 void trackConversionEvent('checkout_orderCompleted');
                 this.order = order;
-                this.handleSuccessBehavior(order.id);
+                this.handleSuccessBehavior();
             }
             else if (!order && attempts < 5) {
                 // Wait for 1 second before the next attempt
@@ -165,18 +170,14 @@ export class ZonosCheckoutFinish {
         void this.checkPaymentStatus();
     }
     render() {
-        // TODO: Keeping this code for when we have a UI for order details
-        // const orderTotal = this.order?.amountSubtotals
-        //   ? Object.values(this.order.amountSubtotals).reduce((a, b) => a + b, 0)
-        //   : 0;
-        // const totalItems = this.order?.items?.reduce((acc, item) => {
-        //   return acc + item.quantity;
-        // }, 0);
-        return (h(Host, { key: 'c6a7067f7f9c0c58605dbf7e1ac3cc7c469d2688', class: "zonos--checkout-finish zonos--elements", style: {
+        var _a, _b;
+        const orderId = ((_a = this.order) === null || _a === void 0 ? void 0 : _a.accountOrderNumber) || ((_b = this.order) === null || _b === void 0 ? void 0 : _b.id);
+        const isTestMode = getIsTestMode();
+        return (h(Host, { key: 'd36ab5e23e09a467b2616ade463baec9626c0157', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (h("div", { key: '5d21e038191edb2135af4fa888c092f35d7d4d13', class: "loading-wrapper" }, h("zonos-spinner", { key: 'c2159b75682659e42f22f944a656a55d20e7268e' }))), !this.isLoading && (h(Fragment, null, h("div", { key: 'c51c81e44edad85e69468666a114021ebbd91a64', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '5ce3ef22c69de3a56af46541e7f768369378328a', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '1bf1911133314aa6b8dd20b7da91f84be2161b86' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: 'b5a2311dcca4852b7bee7f9abfa8de868a44fc4c', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))))));
+            } }, this.isLoading && (h("div", { key: '58181470e5a3e75655bde5bf91ac4a857a8144f8', class: "loading-wrapper" }, h("zonos-spinner", { key: 'b1aba8ef89c9fbce271d6c3226f32e0a0dd1561d' }))), !this.isLoading && (h("div", { key: 'd02576373b5a3affc73906e125d443ce12e6c8d6', class: "zonos--finish-details" }, h("div", { key: 'ba06598ed291e565663c5b321e9419215cd2832a', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '55c453a319a693280518a4b2c2f502a1cc90dc2a', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (h("zonos-badge", { key: '31042753fb3a1ef5155314c1d55abc067c6a6d31', badgeColor: "transparent" }, orderId)), h("zonos-text", { key: 'e9eceec74357986169f829a1c650f1e4b1605245', textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '7c6e8b61be1bf7cc3c84ed369f438af7b1ad60c0', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cartStore.step === 'finish' && (h("div", { key: 'bb567e9a67e6895b7f3c97e6d02584ba9f279acd', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '50afe47a9e5d25759b4f82bb619f5de7fc56f260', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '6cf9d0d670aa07ade295aa5ef3781dcd65e4d812', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-footer/zonos-checkout-footer.js

@@ -33,10 +33,10 @@ export class ZonosCheckoutFooter {
         const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
         // reverse color when on desktop. With the coversheet backdrop, the color should be white
         const colorDesktop = this.dataTheme === 'LIGHT' && !this.mobile ? 'gray-0' : 'gray-1200';
-        return (h(Host, { key: 'c66117f4ec54d24eba7e22271294aeb08746a9e1', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: 'a7b49ac9b5d52c2289c46c6b24c6082e68db64b5', class: "zonos--checkout-footer" }, h("div", { key: 'b2c4beb76236c9fe2eb58d0a27ecddf266c7a103', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: 'b981389f14c0b5696208dbb7ad3fabf0687a168f', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'c0d5b4ab335af157789395632cf4278f55ace3fb', class: classes([
+        return (h(Host, { key: '23b8596ab642089e7109ef9f33e5c8f2f864fc04', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: '38a8d22389df15c429101560758e4aedabf67bfd', class: "zonos--checkout-footer" }, h("div", { key: '9767bbecf5daad5163372382504c4846a6f547c0', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '1d66d656e6f305fbef4b2a5a360fdb7ac458f989', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'daa1cdff45356cb0b6f78b2ae37f009ef313d174', class: classes([
                 'zonos--checkout-footer-dialog',
                 this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, h("zonos-language-select", { key: 'd1442fb364997399f35d657e9f5823da34872c71', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: 'ff8ee730b995a5d8a7b9a3939b96444958390ca5', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: 'b2e896b9b37b1b0ba2bbb77034c7b0f6cf5c16a7', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'd1fe8d2bc28f3606b2f766659d52496ad4603c17', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '4875d6ad0e0efc60f299a2db427608bf23b062f6', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: '13e2c1634ba3d8070f9ff14205fa3c3e9f8f5843', textColor: colorDesktop }, "Powered by"), h("a", { key: 'e00bec78174a8de0963c1a5caf721fd352dc9490', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '5910c724a05c686a7642385955a3faa042efe654', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
+            ]) }, h("zonos-language-select", { key: '243ea828fbda5c8a046faa98783683b31e4a3780', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: 'c159a511f58d07c378f4d95edbcdc09782a95961', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: '3ea84395f0dd0264a83a46f1aa1e7ab6a348caef', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'a59a40f9753cb520352e6c1f838291adaf9192f8', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '26c23f55dd4033d98127bff82807a1512f84854e', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: 'af7d46c29c4f3fd800e66b06ad93869151cd115b', textColor: colorDesktop }, "Powered by"), h("a", { key: 'e1d393aed20e5c923a9b2ab4b0c136cd64a9f0fe', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '7e4119c1f187585321b821a394c82038dfaac838', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
     }
     static get is() { return "zonos-checkout-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/assets/CheckmarkLineIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M15.342 10.21a.75.75 0 0 0-1.184-.92l-2.978 3.829-1.4-1.4a.75.75 0 1 0-1.06 1.061l1.8 1.8a1 1 0 0 0 1.496-.093l3.326-4.277Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/assets/RemoveLineIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M14.475 10.586a.75.75 0 1 0-1.06-1.06L12 10.938l-1.414-1.414a.75.75 0 0 0-1.06 1.06L10.938 12l-1.414 1.414a.75.75 0 1 0 1.06 1.06L12 13.062l1.414 1.414a.75.75 0 0 0 1.06-1.06L13.062 12l1.414-1.414Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.css

@@ -35,6 +35,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
 :host .zonos--title {
   margin-bottom: 24px;
@@ -43,6 +44,9 @@
   margin-bottom: 20px;
   overflow: auto;
   padding: 5px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 :host .zonos--group::-webkit-scrollbar {
   width: 10px;
@@ -81,4 +85,8 @@
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;
+}
+:host .zonos--test-cards {
+  margin-top: auto;
+  padding-top: 16px;
 }

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

@@ -2,8 +2,13 @@ import { h, Host, } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
 import { stripeStore } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
+import { getIsTestMode } from "../../../utils/checkout/getIsTestMode";
 import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 import { submitGtag } from "../../../utils/submitGtag";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import CheckmarkLineIcon from "./assets/CheckmarkLineIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveLineIcon from "./assets/RemoveLineIcon.svg";
 export class ZonosCheckoutPayment {
     constructor() {
         this.handleValidate = () => {
@@ -22,6 +27,14 @@ export class ZonosCheckoutPayment {
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-payment-info');
         };
+        this.copyCardToClipboard = (cardNumber) => {
+            void navigator.clipboard.writeText(cardNumber);
+            window.Zonos.showNotification({
+                message: translate('Card number copied to clipboard'),
+                timeout: 4000,
+                type: 'success',
+            });
+        };
         this.paymentError = false;
         this.submitBtnType = undefined;
         this.continueLoading = false;
@@ -36,12 +49,15 @@ export class ZonosCheckoutPayment {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
+        const isTestMode = getIsTestMode();
         return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
-            variant: this.submitBtnType }, "Pay", ' ', currencyFormat({
-            amount: cartStore.total,
-            currency: cartStore.currency,
-        }))))));
+            variant: this.submitBtnType }, translate('Pay [orderTotal]', {
+            orderTotal: currencyFormat({
+                amount: cartStore.total,
+                currency: cartStore.currency,
+            }),
+        }))), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null))))));
     }
     static get is() { return "zonos-checkout-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.css

@@ -95,6 +95,7 @@
 :host .zonos--left {
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 :host .zonos--left .zonos--wrapper {
   padding: 0 8px 8px;
@@ -121,6 +122,14 @@
   flex-direction: column;
   max-height: 100%;
 }
+:host .zonos--logo-wrapper {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+:host .zonos--logo-wrapper > * {
+  height: fit-content;
+}
 :host .zonos--logo {
   display: flex;
   align-items: center;