@zonos/elements 1.3.23 → 1.3.24

package/dist/cjs/zonos-select-dialog-header_2.cjs.entry.js

@@ -18,9 +18,9 @@ const ZonosSelectDialogHeader = class {
         this.label = '';
     }
     render() {
-        return (index.h(index.Host, { key: '6bbc81e8045153c49da17c4b999bc1992aa9f01d', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'aee08db0e889bd5a5b9084180f6ee038c120a3b2', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("zonos-v-stack", { key: 'c0184343c6cefd3c996695964800d242d1673ee1', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: 'ae13d39c8a0917df33aec34a10853892d9470a9c', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: '32e9af076b72f63cb1ec0c92b7e77d3196572106', type: "boldLabel" }, this.label), index.h("zonos-button", { key: 'eb4d2f0cef4a2b0eafe628c19d0fcbac4f3493e6', 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: '98a6f0e4f44e74208b5e446ad8066b74b1f7beaa' }))));
+            } }, index.h("zonos-v-stack", { key: '565a273f0037418387c0868c74943c3325ab6c35', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '0d994f27c948e49c092d016a0f1d6e453f80f00a', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: 'ee7bb796e921b2a14fa6201c8f17d0dfd9f3a3c2', type: "boldLabel" }, this.label), index.h("zonos-button", { key: '0e3a6c9c2cc4b67a51015b2fb7345c47a0e5ef23', 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: 'ad9fb089fa4a571a5443431c0d686b4804d25b0a' }))));
     }
 };
 ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;
@@ -34,9 +34,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: '3d0753111d525b29e1f36684c89b7216ee0b323f', style: {
+        return (index.h(index.Host, { key: '9b7115624d2e27b1c6da58ac16f6059d5cad71a9', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '95b732681743abc1b08b1b8bc722855c3c8e967a', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'b93347c5fb986a70f9f1d67ce2216bba84db7ba4' }))));
+            } }, index.h("div", { key: 'bd3ccd8700897292fd1a9ad40825c851a484fcf2', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '1c6fe3e6dc8eda9461eb90180535c9bd563a1840' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/collection/collection-manifest.json

@@ -33,6 +33,7 @@
     "components/common/zonos-language-select/zonos-language-select.js",
     "components/common/zonos-link/zonos-link.js",
     "components/common/zonos-logo/zonos-logo.js",
+    "components/common/zonos-rest-state/zonos-rest-state.js",
     "components/common/zonos-select-dialog-header/zonos-select-dialog-header.js",
     "components/common/zonos-text/zonos-text.js",
     "components/common/zonos-tooltip/zonos-tooltip.js",

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

@@ -90,7 +90,7 @@
   width: 360px;
   max-width: 100vw;
   max-height: 500px;
-  z-index: 10005;
+  z-index: 2147483011;
   overflow: auto;
   transform: scale(0);
   transform-origin: bottom left;

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

@@ -22,6 +22,8 @@ import { submitGtag } from "../../utils/submitGtag";
 import MessageIcon from "./assets/MessageIcon.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import RemoveIcon from "./assets/RemoveIcon.svg";
+// 90 minutes
+const CHECKOUT_SESSION_TIMEOUT = 90 * 60 * 1000;
 export class ZonosCheckout {
     constructor() {
         /**
@@ -69,6 +71,8 @@ export class ZonosCheckout {
         this.legacyCheckoutHiddenBtnSelector = '#legacy-checkout-hidden-button';
         this.isLegacyCheckout = false;
         this.confirmDialogOpen = false;
+        this.showSessionTimoutScreen = false;
+        this.checkoutTimeoutInterval = null;
     }
     /**
      * Init cart info handler event
@@ -108,6 +112,8 @@ export class ZonosCheckout {
         cartStore.step = 'customer-info';
         // reset the tab item, so that user needs to click on Continue button to re-quote the landed cost if needed.
         cartStoreResetTabItems();
+        // clear the checkout session timeout timer when checkout dialog close action is triggered
+        this.clearCheckoutTimeoutInterval();
         /**
          * Trigger callback when the checkout is closed
          */
@@ -140,6 +146,33 @@ export class ZonosCheckout {
         await this.applyStripeTheme();
         return true;
     }
+    clearCheckoutTimeoutInterval() {
+        if (this.checkoutTimeoutInterval) {
+            clearTimeout(this.checkoutTimeoutInterval);
+            this.checkoutTimeoutInterval = null;
+        }
+    }
+    startCheckoutTimeoutInterval() {
+        // do nothing if in preview mode
+        if (this.preview) {
+            return;
+        }
+        const timeoutQuery = new URLSearchParams(window.location.search).get('zonosCheckoutTimeout');
+        const timeout = 
+        // timeout query is mainly for testing purpose
+        timeoutQuery && !isNaN(parseInt(timeoutQuery, 10))
+            ? parseInt(timeoutQuery, 10)
+            : CHECKOUT_SESSION_TIMEOUT;
+        log(`==START CHECKOUT TIMEOUT - ${timeout}==`);
+        // start a timer to validate the price
+        this.checkoutTimeoutInterval = setTimeout(() => {
+            // Show session timeout alert
+            this.showSessionTimoutScreen = true;
+        }, timeout);
+    }
+    reloadCheckoutSession() {
+        window.location.reload();
+    }
     attachCheckout() {
         const buttonAnchorSelector = zonosStore.checkoutSettings.placeOrderButtonSelector;
         log(`attach checkout ${buttonAnchorSelector}`);
@@ -173,6 +206,8 @@ export class ZonosCheckout {
                     if (!result) {
                         throw new Error('Error building cart');
                     }
+                    // start the timer to validate the price
+                    this.startCheckoutTimeoutInterval();
                     submitGtag('zonos-checkout-start');
                     void trackConversionEvent('checkout_open');
                 }
@@ -385,6 +420,8 @@ export class ZonosCheckout {
         try {
             await stripeStoreConfirmPayment();
             cartStoreNextStep();
+            // clear the checkout session timeout timer when purchase is complete
+            this.clearCheckoutTimeoutInterval();
         }
         catch (err) {
             logError(err);
@@ -497,6 +534,9 @@ export class ZonosCheckout {
                 this.isMobile ? '--zonos-elements-gray-0' : null }), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         };
         const renderContent = () => {
+            if (this.showSessionTimoutScreen) {
+                return (h("zonos-rest-state", { class: "zonos--session-timeout", restStateSubtitle: translate('Your checkout session has expired. Please reload the page to continue.'), restStateTitle: translate('Session timed out'), restStateType: 'Warning' }, h("zonos-button", { onClick: () => this.reloadCheckoutSession(), variant: "primary" }, translate('Reload'))));
+            }
             return (h("div", { class: 'zonos--content', style: {
                     '--border-radius': getBorderRadius({ overrideBorderStyle: style }),
                 } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
@@ -524,7 +564,7 @@ export class ZonosCheckout {
                 hasFooter && 'has-footer',
                 this.preview && 'preview',
                 this.isMobile && 'mobile',
-            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-confirm-dialog", { dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
+            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },
             // Mark user selected confirm to close the dialog
@@ -662,7 +702,9 @@ export class ZonosCheckout {
             "domesticRedirectedBtnSelector": {},
             "legacyCheckoutHiddenBtnSelector": {},
             "isLegacyCheckout": {},
-            "confirmDialogOpen": {}
+            "confirmDialogOpen": {},
+            "showSessionTimoutScreen": {},
+            "checkoutTimeoutInterval": {}
         };
     }
     static get methods() {

package/dist/collection/components/common/zonos-confirm-dialog/zonos-confirm-dialog.css

@@ -115,11 +115,11 @@
   visibility: visible;
 }
 :host(.open) .zonos--backdrop {
-  z-index: 10003;
+  z-index: 2147483009;
   opacity: 0.65;
 }
 :host(.open) .zonos--confirm-layout {
   opacity: 1;
-  z-index: 10004;
+  z-index: 2147483010;
   transform: scale(1);
 }

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

@@ -22,8 +22,9 @@ export class ZonosConfirmDialog {
         this.submitBtnColor = undefined;
         this.dialogConfirmBtnText = undefined;
         this.dialogCancelBtnText = undefined;
+        this.dialogType = 'confirm';
         this.isMobile = false;
-        this.dialogOpen = false;
+        this.dialogOpen = undefined;
         this.noClickOutside = false;
     }
     handleKeyDown(ev) {
@@ -81,12 +82,12 @@ export class ZonosConfirmDialog {
         const borderStyle = getBorderRadius();
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(zonosStore.appearance.theme);
-        return (h(Host, { key: 'e52030ffc052c699daa87c5b62ee8b44ddad7f7f', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-theme": theme, style: {
+        return (h(Host, { key: '0adbea273e5504ac29ef8040fd968ded3f731f4b', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'a34d31946f198b2593f142b582aec18f69fe74c5', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '2f3dfa27dfbfbc4080eb710dd3db530521b63d36', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '8f61424a8899c81f9510deda0adc3ff3e2da102b', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, h("div", { key: '4dbb78a0d1fc37dbd573c23aee53838a4578e18e', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '106e28d9bea08a332063cf8fe07f7e1db7ef3f0b', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'b296e7d2c30815147396b6e5c50207b40722d6f5', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: '2fca3f071d7f9d2af628d909770bb12a3acabfe2', class: "wrapper" }, h("div", { key: 'fed312e492a9fcac175a9cac7501255aeb975c10', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '131651e201a8d6b2ee9e0c82bd1990bc9a8dc702', class: "content" }, h("div", { key: 'a42e1a9271bdfb9fba133e9af330bdb8b16be230', class: "title" }, h("zonos-text", { key: '91461b9e572e3eb0e6e8616612cce56cf723678f', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: 'fde989f7ef37692173c1476b5cfd98f6cc71bb6e', class: "subtitle" }, h("zonos-text", { key: '2e273099ff036b1aa62bba923fff696d1d291867', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '3b7f50adf490388feb759f2e09a626ece5f29c20', class: "footer" }, h("zonos-button", { key: '9686f10d831470273543cf3b5217a8e59bb5160a', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText), h("zonos-button", { key: '3781a86d62efe11e8dc08886e3b4ad885c64776a', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: 'ba8c7aa3f0a6c3753f2275b2fd9daac8181d8e05', class: "wrapper" }, h("div", { key: '60490f9e714881bd75c6fcad07aebf3ae9d9947b', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: 'd735c7e03bff1d41fdbc003c9628a4abaa4f9313', class: "content" }, h("div", { key: 'e085cea22f8036b3deec9fa9f51c977629e6cc74', class: "title" }, h("zonos-text", { key: '4e41e3b2fe012a8c28daa7ceab614b19299c7cdf', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '5cc1fefbe7a551bf5ad7ff3744d7ecc6ecf5e73a', class: "subtitle" }, h("zonos-text", { key: '07afaf41a189f491db17d135cf074d4c6152e3cb', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'fbcfeb7f1a195ad928dea606f5085d8d2c1f2df6', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: 'eab37a4bf872bcde807ea50f33f2f082889a47c1', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '21e66354e0eaa951fd68f86beda36c4a89f06e44', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
     }
     static get is() { return "zonos-confirm-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -205,11 +206,11 @@ export class ZonosConfirmDialog {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Cancel button text"
@@ -217,6 +218,27 @@ export class ZonosConfirmDialog {
                 "attribute": "dialog-cancel-btn-text",
                 "reflect": false
             },
+            "dialogType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'alert' | 'confirm'",
+                    "resolved": "\"alert\" | \"confirm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"confirm\""
+                        }],
+                    "text": "Type of dialog\n- \"alert\" - Only confirm button\n- \"confirm\" - Both Confirm and cancel buttons"
+                },
+                "attribute": "dialog-type",
+                "reflect": false,
+                "defaultValue": "'confirm'"
+            },
             "isMobile": {
                 "type": "boolean",
                 "mutable": false,
@@ -243,15 +265,14 @@ export class ZonosConfirmDialog {
                     "resolved": "boolean",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Whether or not the dialog is open"
                 },
                 "attribute": "dialog-open",
-                "reflect": false,
-                "defaultValue": "false"
+                "reflect": false
             },
             "noClickOutside": {
                 "type": "boolean",

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

@@ -55,7 +55,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 10002;
+  z-index: 2147483009;
   background: var(--zonos-elements-gray-0);
   border-radius: var(--border-radius, var(--zonos-elements-radius-10));
 }
@@ -73,7 +73,7 @@
 }
 :host .zonos--dialog {
   position: relative;
-  z-index: 10001;
+  z-index: 2147483008;
   background: var(--zonos-elements-gray-0);
   max-width: 90vw;
   max-height: 90vh;
@@ -127,12 +127,12 @@
   visibility: visible;
 }
 :host(.open) .zonos--backdrop {
-  z-index: 10001;
+  z-index: 2147483008;
   opacity: 0.65;
 }
 :host(.open) .zonos--dialog-layout {
   opacity: 1;
-  z-index: 10002;
+  z-index: 2147483009;
   transform: scale(1);
 }
 

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

@@ -0,0 +1,53 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+}
+:host .zonos--restState-image {
+  width: 124px;
+  height: 124px;
+  margin-bottom: 15px;
+}
+:host .content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}

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

@@ -0,0 +1,102 @@
+import { getAssetPath, h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+export class ZonosRestState {
+    constructor() {
+        this.getImageRestState = () => {
+            const imageSrc = getAssetPath(`./assets/${this.restStateType}.png`);
+            return imageSrc;
+        };
+        this.restStateSubtitle = undefined;
+        this.restStateTitle = undefined;
+        this.restStateType = undefined;
+        this.isErrorImageLoad = false;
+    }
+    render() {
+        const imageUrl = this.getImageRestState();
+        return (h(Host, { key: '1bfff1095ec5c517b04106972431ac2e7f6355d9', class: classes(['zonos--elements zonos--restState']), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'e4c9b3b63f73c8c9ed04e196369a888fdbece30a', class: "zonos--restState-image" }, h("img", { key: 'e7444fae5141035f415ae0255ce5ff1446910fa4', alt: this.restStateType, onError: () => {
+                this.isErrorImageLoad = true;
+            }, src: imageUrl })), h("div", { key: '2f1d1ac03dcf47d7fd7bc7014a8c4af0486d3a80', class: "content" }, h("zonos-text", { key: 'bf9fe66af7349c07c6fba5dd4e749a808b051fcc', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '2b9fc699b05557487ad8534f34857febb0defda8', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'fe7c44da5367b5b52abbbee2631a955544f41042', class: "action" }, h("slot", { key: '395e78af0e2dff6f0a98e7ac005509c3abb965fd' }))));
+    }
+    static get is() { return "zonos-rest-state"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-rest-state.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-rest-state.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "restStateSubtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The subtitle of the rest state"
+                },
+                "attribute": "rest-state-subtitle",
+                "reflect": false
+            },
+            "restStateTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the rest state"
+                },
+                "attribute": "rest-state-title",
+                "reflect": false
+            },
+            "restStateType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RestStateType",
+                    "resolved": "\"Boxes\" | \"Earth\" | \"EmptyBox\" | \"Lock\" | \"PigBank\" | \"Scribble\" | \"Search\" | \"Settings\" | \"ShoppingCart\" | \"SpilledCup\" | \"Switch\" | \"TaxId\" | \"Truck\" | \"Warning\"",
+                    "references": {
+                        "RestStateType": {
+                            "location": "import",
+                            "path": "src/components/utils/restStateType",
+                            "id": "src/components/utils/restStateType.ts::RestStateType"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of rest state"
+                },
+                "attribute": "rest-state-type",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isErrorImageLoad": {}
+        };
+    }
+}

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

@@ -8,9 +8,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: '6bbc81e8045153c49da17c4b999bc1992aa9f01d', class: "zonos--elements", style: {
+        return (h(Host, { key: 'aee08db0e889bd5a5b9084180f6ee038c120a3b2', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: 'c0184343c6cefd3c996695964800d242d1673ee1', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'ae13d39c8a0917df33aec34a10853892d9470a9c', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '32e9af076b72f63cb1ec0c92b7e77d3196572106', type: "boldLabel" }, this.label), h("zonos-button", { key: 'eb4d2f0cef4a2b0eafe628c19d0fcbac4f3493e6', 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: '98a6f0e4f44e74208b5e446ad8066b74b1f7beaa' }))));
+            } }, h("zonos-v-stack", { key: '565a273f0037418387c0868c74943c3325ab6c35', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '0d994f27c948e49c092d016a0f1d6e453f80f00a', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'ee7bb796e921b2a14fa6201c8f17d0dfd9f3a3c2', type: "boldLabel" }, this.label), h("zonos-button", { key: '0e3a6c9c2cc4b67a51015b2fb7345c47a0e5ef23', 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: 'ad9fb089fa4a571a5443431c0d686b4804d25b0a' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: 'dd98e35a2295dd72209775ce1e63d6f653913466', class: "zonos--elements" }, h("div", { key: '4bee5ca82e3a493826b723f620baa6d7cf7af63a', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '1320496e6caed5f16d940f0e5119d5f19186f565' }), h("div", { key: '2a9b891c672d03cdbe8babf59312942e101704a7', class: classes([
+        return (h(Host, { key: '62f307eee14511a4d37aecd927a25f797e206d8f', class: "zonos--elements" }, h("div", { key: '8bcdbbbd4d9fffe487c975d2f42bc0e7ecc0d7a5', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '53413e70a522d44f044bf08154c933e8d2b6863e' }), h("div", { key: 'b3ff18f30520346abe71df2987763d08ccc21c3c', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '0146fad3f70fa07e9eb644b26d6dd65963a70c3d', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '36e76d4624927255679107ee47022b7314479441', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '72567e2ace426b1d45e46a7bb68aa17076fcf7d3', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '183b70f17a065b3eb3eef65df38bee2092c91582', 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

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '3d0753111d525b29e1f36684c89b7216ee0b323f', style: {
+        return (h(Host, { key: '9b7115624d2e27b1c6da58ac16f6059d5cad71a9', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '95b732681743abc1b08b1b8bc722855c3c8e967a', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'b93347c5fb986a70f9f1d67ce2216bba84db7ba4' }))));
+            } }, h("div", { key: 'bd3ccd8700897292fd1a9ad40825c851a484fcf2', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '1c6fe3e6dc8eda9461eb90180535c9bd563a1840' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: 'b51f2edddb50f8f6a868da28c73218fe6955d2e5' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'b2d57ce9356cd0d1454c7ef195fe0ac21f694b7b' }, "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

@@ -18,9 +18,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: 'a43121c2a6e9410362a570f9270f0b32c587200b', class: "zonos--elements" }, h("div", { key: 'f8bf4003c536abd60a903b808f1cd136bcebbd0a', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: 'f84d021e99271bd6a00da32edd35fdc5e0520c5a', class: "zonos--elements" }, h("div", { key: '96eeeb3df6698a18ae1439c3c35bc2337fe3e83c', class: "zonos--hello-dialog-footer", style: {
                 '--primary-color': primaryColor,
-            } }, h("a", { key: 'a3967d63fee336a53ede4dfe30f270d7c932dfed', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '72e918b1b6800d97df8f73487b7d72f8130312d7', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '9614506f8b3eac485fa19a1743ac6fc0117f9611', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '2e72f28b9b08d9a729340f6c0999bf48381bfe00', 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: 'd4832d123d553b71eacda5f6ec66d0a36e1018d3', 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: 'bb17cee42a3cb6d88e1b064649184c686ef41201', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '9183c662eb9d2dbb63b5149c338d013439767634', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: 'dd5bed89a4a2ae9386fa39fe15362c42fa7535ee', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'cbe6cb613fb2ca39f772363f8276cbc8c9e28b70', 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: 'e05876aa9b1e56f945f810b82163335cd14202d1', 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

@@ -151,17 +151,17 @@ export class ZonosHelloDialog {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: 'c8f49239246e63e8df2a57b3349b8ad97e84a216', class: "zonos--elements" }, h("div", { key: '6fd4ac561ae03f823acdecce1a40e0164096b2df', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: '354758888accf5c5f44e321cc36f3126fe161596', class: "zonos--elements" }, h("div", { key: 'b6e9ef3ac53035b578f1ccb6940e04561a6c7362', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '7c8fa46a42ca6b4bbaab68e25c77e56306120fbf' }, h("div", { key: 'c2cc19c362b09e6dfd56f62a63302e6d2dc6f500', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'b108faf0e9e997be2f6c497dc859f8f154c78c49', 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: '1f6ef6edbc73d4935fbfeed08dcbbcf31cf5dcd4', spacing: 24 }, h("zonos-country-flag", { key: '7f1d844bb5b39ecc7555abdda7d3be9f341b11d0', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '7df9a3867b69e90134565e4115df94f504f1d9f6', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '6c10ffcef44b13642496a4ee2d2740498d8c2742', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '5a455ba25cbe525df77c42f8db03c080f51ee1a5', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: 'b298a89bbbca53b32136093a386fc10d9d9aa39e', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'cba389a7107bf0505743237a7e61e27988955a44' }, h("div", { key: '3cef5f247dca70671ad0c304f29980f7147cf21c', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '013764140f25f64ab52f4588a50b5148f4b170d0', 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: '099dc23581474e5167cfa8bd90be9987b3caa47f', spacing: 24 }, h("zonos-country-flag", { key: 'c545313157e3a488433619292306419588e20e50', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'f8be1b95571b28be7ed4fc3caee5d13177845150', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '9ac86d0f247cecd0bfa19ffc041eee89bd19b168', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '3234c9640aa1d484c6dcb78e7e3bf43e3545d67e', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '2f090b934ede76c8400b7891b6caa391e1f039b0', 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: '0436fd5b2157162e41426b9a0723c3f94140a465', spacing: "12px" }, h("zonos-v-stack", { key: 'd673d38dee2d274cd0010d3f6ac265548374c238', spacing: 12 }, h("div", { key: 'ab44b5782f6a2d9d2fa0abe36feafbb1f9a56782', class: "zonos--flex-message" }, h("zonos-icon", { key: 'dc84c724a6f2354414ccba221ab7bc6849717534', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: '534fea4854e05f0550fe97fcdb2c133d21f7dfd7' }, dutyDeMinimisMessage)), h("div", { key: 'fb08aa1b5a63dc3170245e8ea14525da097c6f5f', class: "zonos--flex-message" }, h("zonos-icon", { key: '4e82ccee8a63d682ba818609e9eeb080d9ea2342', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: '00f4d5936b105247396fd45c91bc66bc034a2280' }, taxDeMinimisMessage)), additionalInformation && (h("div", { key: 'cb5126e6b7f0c4197dc3247948397b0298dce015', class: "zonos--flex-message" }, h("zonos-icon", { key: '555dfb42452e298c17718cd3cee2179abb9a5e2f', "aria-label": "Low value order shipping restriction", content: BagIcon }), h("zonos-text", { key: 'd1d29153de5ae3c2dcbca2622bc0cea3dc9b6fa5' }, additionalInformation))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '7e1d4b405972059bd759ba12a760e4037eb8a724', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '5e8adbd361831901f60687b243030ff20a55de42' }, h("zonos-country-select", { key: '3ac541296c02b366f10aace6a8497e06eded103a', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '37aa0ebdf43b0252c4fc3d249751bd6a7cd7341f' }, h("zonos-language-select", { key: '7394d663a509ff75fb5c79cd27403fda02d29877', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: 'e7ec890c1673b4025e650ed737ee4ba0e37ceb5d', spacing: "12px" }, h("zonos-v-stack", { key: 'a09bc2634da2795a4f0e2ef8b66680db9b0e403d', spacing: 12 }, h("div", { key: '2182aac10dc9b654b81234188cf0ef4decb2328a', class: "zonos--flex-message" }, h("zonos-icon", { key: '362807633b9a55a4438e95a9150c4c80f5bd836b', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: '10bbbd399a255ad3a593b246d4b8b475e1c089e1' }, dutyDeMinimisMessage)), h("div", { key: '451c58a91d38413cc295a377e08ffa9947411112', class: "zonos--flex-message" }, h("zonos-icon", { key: '2eceeced9d2b0ab482c94b8edd768134ba936d2d', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: 'f4284b8e56522de93d5ca1160103ca2fac85250e' }, taxDeMinimisMessage)), additionalInformation && (h("div", { key: 'f9f0a09a1a7bfa85b2a70f843aabea7961250141', class: "zonos--flex-message" }, h("zonos-icon", { key: '147ee865b2708d662c185e4fe5d4dba7f099c310', "aria-label": "Low value order shipping restriction", content: BagIcon }), h("zonos-text", { key: 'ccb671b31672ebfd41369a9b0fda8e49ed3739cc' }, additionalInformation))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '16b584281762c987d375b15e5cd3b5784fce5cd4', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '1122d535ce9bf451aa823726764a1a662c0378df' }, h("zonos-country-select", { key: '73c417e435dcbb15be72879ecde8271cb5cc01a1', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '4555dcf5260fa976458f6d612efce72a39564abf' }, h("zonos-language-select", { key: 'c19ca73913d2b026976acc36c1d9eb68bf90f07c', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -178,7 +178,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '5085618e4664aa12a2d48d289ae5b2c3ac15d83b', class: "zonos--elements" });
+        return h(Host, { key: 'a5a97e414d4be249a1d8a733356111a65623aaeb', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }