@zonos/elements 1.3.18-alpha.1 → 1.3.18-alpha.3

package/dist/collection/collection-manifest.json

@@ -17,13 +17,13 @@
     "components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js",
     "components/checkout/zonos-checkout/zonos-review/zonos-review.js",
     "components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js",
-    "components/common/component-template/zonos-link/zonos-link.js",
     "components/common/zonos-badge/zonos-badge.js",
     "components/common/zonos-button/zonos-button.js",
     "components/common/zonos-card/zonos-card.js",
     "components/common/zonos-checkbox/zonos-checkbox.js",
     "components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js",
     "components/common/zonos-collapse/zonos-collapse.js",
+    "components/common/zonos-confirm-dialog/zonos-confirm-dialog.js",
     "components/common/zonos-country-flag/zonos-country-flag.js",
     "components/common/zonos-country-select/zonos-country-select.js",
     "components/common/zonos-custom-message/zonos-custom-message.js",
@@ -31,6 +31,7 @@
     "components/common/zonos-icon/zonos-icon.js",
     "components/common/zonos-input/zonos-input.js",
     "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-select-dialog-header/zonos-select-dialog-header.js",
     "components/common/zonos-text/zonos-text.js",

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

@@ -156,11 +156,11 @@ export class ZonosCheckoutFinish {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: '5ff65f7e0c06f41df8aae634bdfc5d6c249066e3', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '1e4627e936e0508761c12d842523adb51d3c797e', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (h("div", { key: '90a55566440c372885ecfd0d4ec1ceaca61d5169', class: "loading-wrapper" }, h("zonos-spinner", { key: '814fcab377f26107b42d431a9bd89cb415ea2aba' }))), !this.isLoading && (h(Fragment, null, h("div", { key: '5f0af17eadfad44a28b7a3cab861630aab10ea46', 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: 'cb98643270b2faf2522437d653251b7a1b520d8c', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '24b040b053da852c0e6d9e76532647d7f4ec3d7a' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '664c02f338ef2020fed645c759cfa70fcd1edb97', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
+            } }, this.isLoading && (h("div", { key: '4d3be87aec252946c5b6fb516c882830232a83e5', class: "loading-wrapper" }, h("zonos-spinner", { key: '25e9bafaaebed75582efd936c57121921c8f2f8a' }))), !this.isLoading && (h(Fragment, null, h("div", { key: '49c211db17af433b3936e69722c3c76c9197c170', 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: '4cb90069dcf385886cb9235ee0854d63781e4452', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '8e16be3b15d7fba7b697ba9ed41332c9794f3551' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: 'e1bfacd92d36c303defc464c7eaf10b8853175c1', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }
@@ -228,14 +228,9 @@ export class ZonosCheckoutFinish {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "OverrideNotification",
+                    "original": "{\n    messages: string[];\n    title: string;\n    type: 'success' | 'error';\n  }",
                     "resolved": "undefined | { messages: string[]; title: string; type: \"error\" | \"success\"; }",
-                    "references": {
-                        "OverrideNotification": {
-                            "location": "global",
-                            "id": "global::OverrideNotification"
-                        }
-                    }
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,

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

@@ -68,6 +68,7 @@ export class ZonosCheckout {
         this.domesticRedirectedBtnSelector = '#zonos--domestic-redirected-checkout-button';
         this.legacyCheckoutHiddenBtnSelector = '#legacy-checkout-hidden-button';
         this.isLegacyCheckout = false;
+        this.confirmDialogOpen = false;
     }
     /**
      * Init cart info handler event
@@ -76,10 +77,27 @@ export class ZonosCheckout {
         const cartItems = e.detail;
         void cartStoreUpdateItems(cartItems);
     }
+    async handleKeyPress(e) {
+        if (e.key === 'Escape') {
+            void this.closeDialogHandler();
+        }
+    }
     /**
      * Close dialog action
      */
-    async closeDialogHandler() {
+    async closeDialogHandler(props) {
+        var _a, _b;
+        if (!this.open) {
+            // Do nothing if the checkout is not even open
+            return;
+        }
+        // Only proceed when user select confirmed.
+        if (!(props === null || props === void 0 ? void 0 : props.confirmed)) {
+            this.confirmDialogOpen = true;
+            return;
+        }
+        // Close the confirm dialog
+        this.confirmDialogOpen = false;
         submitGtag('zonos-checkout-close');
         this.open = this.forceDialogOpen || false;
         if (!this.preview && cartStore.step === 'finish') {
@@ -90,6 +108,10 @@ 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();
+        /**
+         * Trigger callback when the checkout is closed
+         */
+        (_b = (_a = zonosStore.checkoutSettings).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     async buildCartAndInit() {
         // if tempCartUUID is provided, use it instead of buildCartDetail
@@ -494,7 +516,11 @@ 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()))));
+            ]) }, 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.confirmDialogOpen = false;
+            },
+            // Mark user selected confirm to close the dialog
+            onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) })));
     }
     static get is() { return "zonos-checkout"; }
     static get encapsulation() { return "scoped"; }
@@ -576,13 +602,13 @@ export class ZonosCheckout {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ContactOption | null",
+                    "original": "StripeStoreContactOption | null",
                     "resolved": "null | { address: { city: string; country: string; line1: string; line2?: string | undefined; postal_code: string; state: string; }; email: string; name: string; phone?: string | undefined; }",
                     "references": {
-                        "ContactOption": {
+                        "StripeStoreContactOption": {
                             "location": "import",
                             "path": "src/components/store/checkout/stripe",
-                            "id": "src/components/store/checkout/stripe.ts::ContactOption"
+                            "id": "src/components/store/checkout/stripe.ts::StripeStoreContactOption"
                         }
                     }
                 },
@@ -627,15 +653,20 @@ export class ZonosCheckout {
             "storybookPaymentStatusOverride": {},
             "domesticRedirectedBtnSelector": {},
             "legacyCheckoutHiddenBtnSelector": {},
-            "isLegacyCheckout": {}
+            "isLegacyCheckout": {},
+            "confirmDialogOpen": {}
         };
     }
     static get methods() {
         return {
             "closeDialogHandler": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(props?: { confirmed: boolean; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "props",
+                            "type": "{ confirmed: boolean; } | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -717,6 +748,12 @@ export class ZonosCheckout {
                 "target": "body",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyPress",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "resize",
                 "method": "handleWindowResize",

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

@@ -279,13 +279,13 @@ export class ZonosCustomerInfo {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ContactOption | null",
+                    "original": "StripeStoreContactOption | null",
                     "resolved": "null | { address: { city: string; country: string; line1: string; line2?: string | undefined; postal_code: string; state: string; }; email: string; name: string; phone?: string | undefined; }",
                     "references": {
-                        "ContactOption": {
+                        "StripeStoreContactOption": {
                             "location": "import",
                             "path": "src/components/store/checkout/stripe",
-                            "id": "src/components/store/checkout/stripe.ts::ContactOption"
+                            "id": "src/components/store/checkout/stripe.ts::StripeStoreContactOption"
                         }
                     }
                 },

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

@@ -11,16 +11,16 @@ export class ZonosBadge {
         this.rounded = false;
     }
     render() {
-        return (h(Host, { key: 'c68ba6ef2bcb35c94ecf2b11379be748aa998198', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '6abf1f29bb6368710b45414baca9643421de2643', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '7f200effb42296a21829c292101ef3300b041327', class: classes([
+            } }, h("div", { key: 'fb0b246a59f0350313673d4430ac4f2bcd9d6b80', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: '4358e95cb29ec6a82e32213b268612aadf8772c6' }, h("slot", { key: 'ab76831e3691a896179e06896d33ed771e4bbdf9' })))));
+            ]) }, this.icon, h("zonos-text", { key: '2d6024af48ce0e082d3a1332794978cfd42793d6' }, h("slot", { key: '9cb7e771b0a949b912c6fa5946018cbf072ed018' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,6 +73,18 @@
   margin: 1px;
   /** Button size */
 }
+:host button:not([disabled]):hover {
+  background-image: var(--zonos-elements-button-standard-hover);
+}
+:host button:not([disabled]):active {
+  background: var(--zonos-elements-gray-700);
+}
+:host button:not([disabled]):focus {
+  box-shadow: var(--zonos-elements-focus-button);
+}
+:host button.with-box-shadow {
+  box-shadow: var(--zonos-elements-shadow-button-standard);
+}
 :host button.sm.no-background, :host button.md.no-background, :host button.lg.no-background {
   background: none;
   outline: none;

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

@@ -14,6 +14,7 @@ export class ZonosButton {
         this.handleSlotChange = () => {
             this.hasContent = true;
         };
+        this.getColorVarProperty = (color) => color.replace('var(', '').replace(')', '');
         this.buttonColor = undefined;
         this.backgroundColor = undefined;
         this.borderStyle = undefined;
@@ -23,6 +24,7 @@ export class ZonosButton {
         this.size = 'sm';
         this.variant = 'standard';
         this.noBackground = false;
+        this.withBoxShadow = false;
         this.noPaddingLeft = false;
         this.noPaddingRight = false;
         this.loading = false;
@@ -52,15 +54,22 @@ export class ZonosButton {
          * So need to re-assign the variant prop with the default value if the value is `undefined` here.
          */
         const variant = this.variant || 'standard';
+        // use the variable if it's a color variable, otherwise use the color
+        const backgroundColor = this.backgroundColor && isColorVariable(this.backgroundColor)
+            ? `var(--zonos-elements-${this.backgroundColor})`
+            : this.backgroundColor;
         // use override background if it exists, otherwise use color from setting
-        const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
+        const overrideBackground = backgroundColor || zonosStore.appearance.colorSecondary;
         // only set theme for button to change text color if variant is standard and override background is set
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
-            ? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
+        const backgroundActualColor = overrideBackground &&
+            isColorVariable(this.getColorVarProperty(overrideBackground))
+            ? window
+                .getComputedStyle(this.ele)
+                .getPropertyValue(this.getColorVarProperty(overrideBackground))
             : overrideBackground;
         // use the variable if it's a color variable, otherwise use the color
         const color = this.buttonColor && isColorVariable(this.buttonColor)
@@ -75,28 +84,30 @@ export class ZonosButton {
         const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
             ? 'white'
             : 'black';
-        return (h(Host, { key: 'f5fd039f9ceeacae2448a09228bacc1bd6476be7', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '00d085d600a759366f4a2de8617d81831c0ce16b', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': contrastColor,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'bcd3c7bf52464dd1e7485cdac6b0e3defbf63af3', class: classes([
+            }) }, h("button", { key: 'b79ffdb0212630598e95f07059bb3b41049cff47', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
                 this.noPaddingLeft && 'no-padding-left',
                 this.noPaddingRight && 'no-padding-right',
                 this.iconRight && 'icon-right',
+                this.withBoxShadow && 'with-box-shadow',
                 variant,
                 this.size,
                 // only override background if variant is set to standard
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: 'ea73d8c4b4973f3a8ed6e5b85c2236c0f20b4c6f', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'cdbe444e0aee0e64facd757a1b5ebd74208359e0', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e7a46cced38d7916873e5dea8aff4c33e137cdf6', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { key: '4462430185736b45b11bd18f08d1e3c6177f192f', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'c866ff989b95929e8d6a44d950dc943531f1dc0c', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'a57d0b3924eef51bf3938261c8d823e9d8aa0206', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["zonos-button.scss"]
@@ -288,8 +299,14 @@ export class ZonosButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The variance of the button\n**NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded"
+                    "tags": [{
+                            "name": "note",
+                            "text": "If the button `variant` is set to 'standard', backgroundColor will be disregarded"
+                        }, {
+                            "name": "default",
+                            "text": "standard"
+                        }],
+                    "text": "The variance of the button"
                 },
                 "attribute": "variant",
                 "reflect": false,
@@ -316,6 +333,24 @@ export class ZonosButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "withBoxShadow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the button has a box shadow"
+                },
+                "attribute": "with-box-shadow",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "noPaddingLeft": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -12,12 +12,12 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: '206169280db67be5e74382c5beccfad87ec9068a', style: {
+        return (h(Host, { key: '0e52ca31db6c2f956da1910d6e0a222b588c1bcc', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '4a1c7eab9b5420295ce3ec30cfd59985be35d912', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: '75454e5d9eacdfdf842a9a220deab467625e497b', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'bc9c7d3500cef41237dbe53f27ab398103be55dd', type: "subheader" }, this.label), h("h-stack", { key: '29d68a483bfc61ddfb9deeb63272a8221759513c', spacing: 8 }, this.actions))), h("slot", { key: '0ad416c6cdb0b1fc2c922b8569cf35a4009263cc' }), (this.footerActions || this.footerContent) && (h("footer", { key: '469110ce0f0f81cbee4ef67e79d3be17933bcf2e', class: "card-footer", style: {
+            } }, h("div", { key: '69f391d821f88cbee4b0c586a8323b1dd68d7fd3', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: '4568a1d7c354830e6e65e31b20b38140aaab9d01', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'e0a6b7a3776916f8208c27373878041807d91960', type: "subheader" }, this.label), h("h-stack", { key: 'c5f8d01b2f477b16ab9387081987eae64b156e76', spacing: 8 }, this.actions))), h("slot", { key: '6001acfaae8ba37456a7c23bae5c44a91da074f9' }), (this.footerActions || this.footerContent) && (h("footer", { key: '78b926a323a5f1375c8120d5aa8b1ab2a4f3fa4a', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '9044d9f3c81935119f668deb188f16cb1cb243bb' }, this.footerContent), h("h-stack", { key: '3f258ed6b07b8973b0bf753c7ab6427d67bf210c', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: '2bd0c86b75096c2ee786d4a9b16a3d6e385fbbf1' }, this.footerContent), h("h-stack", { key: '7a3f840ac9678a905338a99b8327115bc8199789', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,14 +36,14 @@ export class ZonosCheckbox {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'be29586ffd5ae5227614622cfb402686ff5e0583', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '8a1adb8ba23d34a7730e5b5a81bc6b5ada58cb83', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: '091c2388668a94962d7b2bde4496856805f675e8', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c0f66d11f63591b03631cb1c970c0db201d435e2', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: 'e954bcef9e021bfbb98031f030542a89d8faf0f3', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '17788f6c205a139dde1b42cc91579d0975233e77', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: 'ab6c4847d006a812829bd8e871520455da91c7b0', class: "checkmark-container" }, h("svg", { key: '617693bef302910db463cdf95b10700b72ea8d44', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '410728b7d5edf27966e660e598f166ce8292015e', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '1b9a21e7ef15ad34684453bc25cb3744ba183cd0', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '589486a19b7b0b42ce8eabd2230a8b4620ca3216', class: "checkmark-container" }, h("svg", { key: 'd56ce06c20e0c3460b6222d323d0a17059147157', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5e6af8d520bcb7c3b0fe2891ce0c2e783976b501', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '18c5a586756ddc0808c05f305c89dbb07f1b7d16', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -63,17 +63,17 @@ export class ZonosCheckoutProgressTabs {
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: '5079903c5c31395bc5c92a4542d1f7ae78dc34b2', class: "zonos--elements", style: {
+        return (h(Host, { key: '1c51be111b22f45ad33d430dc4d0a250f8e4d911', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'fabfe8836c827910907c4bceb6f99d65492b440b', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: '01e24d42123318aa23982e742b5f2053f5b5392d', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
             const isSelected = tab.value === selectedStep;
             return (h("button", { class: classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, translate(tab.label))));
-        })), h("div", { key: 'cfb1c57fadb793f5db34d02e48f3fe4c3a93a043', class: "zonos--tab-progress" }, h("div", { key: 'd02dd1cc3a5e5b7bc8395038e1cd75cb07104072', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: '55832cb123f7efa019ccddfe6bd82938d9f02206', class: "zonos--tab-progress" }, h("div", { key: '15fd9749c64530f09854a297cbc35fe97d3398e3', class: "zonos--progress-bar-fill" }))));
     }
     static get is() { return "zonos-checkout-progress-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,10 +42,10 @@ export class ZonosCollapse {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: '514e75d41d29d70b4ca60230288ae183200b1e12', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: 'c268257dcef8e8def5e34bf5b3ea432136c06d6a', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '068aee1d13bde4c83ea8582b34844da7452c907c' }, h("iframe", { key: 'b22fd8ad898a098c244cb817dc6951854505efca', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'b54783376005085e379c7b8d43218ead1bf8e8ac' }))));
+            } }, h("div", { key: 'ea4abe6a03ffed6f4fd1248e668d123c1a8cef77' }, h("iframe", { key: 'dc010404892272fece7a913149e75171bb6e786c', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'c9dc7dd83363211d249ee417111f3a36057f0af0' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-confirm-dialog/assets/ExclamationMarkDuotoneIcon.svg

@@ -0,0 +1,4 @@
+<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-400)"></path>
+  <path d="M12.75 9a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V9Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
+</svg>

package/dist/collection/components/common/zonos-confirm-dialog/assets/HelpDuotoneIcon.svg

@@ -0,0 +1,4 @@
+<svg color="var(--zonos-elements-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-blue-400)"></path>
+  <path d="M10.25 10.25a1.75 1.75 0 1 1 2.431 1.613c-.616.26-1.431.885-1.431 1.887a.75.75 0 0 0 1.5 0c0-.053.02-.128.108-.228.092-.104.236-.205.408-.278A3.25 3.25 0 1 0 8.75 10.25a.75.75 0 0 0 1.5 0Zm2.5 5.75a.75.75 0 0 0-1.5 0v.25a.75.75 0 0 0 1.5 0V16Z" fill="currentColor"></path>
+</svg>

package/dist/collection/components/common/zonos-confirm-dialog/assets/WarningDuotoneIcon.svg

@@ -0,0 +1,4 @@
+<svg color="var(--zonos-elements-orange-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+  <path d="M14.46 5.492c-1.014-2.027-3.906-2.027-4.92 0L4.276 16.02c-.914 1.83.416 3.98 2.46 3.98h10.528c2.044 0 3.374-2.151 2.46-3.98L14.46 5.492Z" data-is-secondary-color="true" fill="var(--zonos-elements-orange-400)"></path>
+  <path d="M12.75 10a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V10Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
+</svg>

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

@@ -0,0 +1,125 @@
+: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 .zonos--backdrop,
+:host .zonos--confirm-layout {
+  opacity: 0;
+  z-index: -999;
+  visibility: hidden;
+  transition: opacity 0.3s, visibility 0.3s;
+}
+:host .zonos--backdrop {
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  background: var(--zonos-elements-backdrop-color);
+  position: fixed;
+}
+:host .zonos--confirm-layout {
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--zonos-elements-text-color);
+}
+:host .zonos--confirm-dialog {
+  position: relative;
+  background: var(--zonos-elements-gray-0);
+  max-width: 90vw;
+  max-height: 90vh;
+  width: 350px;
+  border-radius: var(--border-radius, 10px);
+  outline: none;
+  box-shadow: var(--zonos-elements-v3-shadow-xxl);
+  border: var(--zonos-elements-border);
+  display: flex;
+  flex-direction: column;
+}
+:host .wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  gap: 24px;
+}
+:host .icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  background: var(--zonos-elements-blue-100);
+}
+:host .warn .icon-wrapper {
+  background: var(--zonos-elements-orange-100);
+}
+:host .danger .icon-wrapper {
+  background: var(--zonos-elements-red-100);
+}
+:host .footer {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+}
+:host .footer zonos-button {
+  flex: 1;
+}
+:host .content {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+}
+:host .content zonos-text {
+  text-align: center;
+}
+
+:host(.open) .zonos--confirm-layout,
+:host(.open) .zonos--backdrop {
+  visibility: visible;
+}
+:host(.open) .zonos--backdrop {
+  z-index: 10003;
+  opacity: 0.65;
+}
+:host(.open) .zonos--confirm-layout {
+  opacity: 1;
+  z-index: 10004;
+  transform: scale(1);
+}