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

package/dist/components/zonos-address2.js

@@ -138,7 +138,7 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'f45a7bbe9d6b5ffac15671a862b3ad4f2eb4a87b', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'a9119e6e0c4e5c81a7d17ebe4d6bec925404a3dd', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '7dc12043c6e75ebabd646490c390bafdc2cd4a1d', class: "zonos--address-component" })));
+        return (h(Host, { key: '77cf6085adb67da95283000b857a9252215c71cd', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '30aff37f04ef04ce4c062d52c78286b362469894', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '599e73e5d3f88cba12a7fc72abc3e575eb3eb777', class: "zonos--address-component" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/zonos-button2.js

@@ -33,7 +33,7 @@ const styles = (props) => {
     }, {});
 };
 
-const zonosButtonCss = ":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-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--zonos-elements-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--zonos-elements-radius-10);gap:8px}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--zonos-elements-surface-color);border:none;outline:1px solid var(--zonos-elements-surface-color);border-radius:var(--border-radius, var(--zonos-elements-radius-10));-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:8px 24px;color:var(--color, var(--zonos-elements-gray-1200));margin:1px;}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--zonos-elements-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--zonos-elements-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--zonos-elements-size-sm);line-height:var(--zonos-elements-size-sm);padding:4px 8px}:host button.sm:not(.has-content).has-icon{padding:0 4px}:host button.md{height:var(--zonos-elements-size-md);line-height:var(--zonos-elements-size-md);padding:8px 16px}:host button.md:not(.has-content).has-icon{padding:0 8px}:host button.lg{height:var(--zonos-elements-size-lg);line-height:var(--zonos-elements-size-lg);padding:12px 24px}:host button.lg:not(.has-content).has-icon{padding:0 16px}:host button:not(.only-icon).has-icon{gap:8px}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--zonos-elements-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--zonos-elements-gray-0));color:var(--color, var(--zonos-elements-gray-1200));outline:1px solid var(--background-color, var(--zonos-elements-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--zonos-elements-blue-600);outline:1px solid var(--zonos-elements-blue-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--zonos-elements-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--zonos-elements-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--zonos-elements-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--zonos-elements-blue-600)}:host button:not(.override-background).success{background:var(--zonos-elements-green-600);outline:1px solid var(--zonos-elements-green-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--zonos-elements-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--zonos-elements-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--zonos-elements-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-green-400)}:host button:not(.override-background).danger{background:var(--zonos-elements-red-600);outline:1px solid var(--zonos-elements-red-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--zonos-elements-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--zonos-elements-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--zonos-elements-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-red-400)}:host button:not(.override-background).warning{background:var(--zonos-elements-orange-600);outline:1px solid var(--zonos-elements-orange-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--zonos-elements-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--zonos-elements-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--zonos-elements-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--zonos-elements-gray-500);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--zonos-elements-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--zonos-elements-button-focus-ring);box-shadow:var(--zonos-elements-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--zonos-elements-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--zonos-elements-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--zonos-elements-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--zonos-elements-radius-4);width:24px}";
+const zonosButtonCss = ":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-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--zonos-elements-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--zonos-elements-radius-10);gap:8px}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--zonos-elements-surface-color);border:none;outline:1px solid var(--zonos-elements-surface-color);border-radius:var(--border-radius, var(--zonos-elements-radius-10));-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:8px 24px;color:var(--color, var(--zonos-elements-gray-1200));margin:1px;}: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{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button.with-box-shadow{-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);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}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--zonos-elements-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--zonos-elements-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--zonos-elements-size-sm);line-height:var(--zonos-elements-size-sm);padding:4px 8px}:host button.sm:not(.has-content).has-icon{padding:0 4px}:host button.md{height:var(--zonos-elements-size-md);line-height:var(--zonos-elements-size-md);padding:8px 16px}:host button.md:not(.has-content).has-icon{padding:0 8px}:host button.lg{height:var(--zonos-elements-size-lg);line-height:var(--zonos-elements-size-lg);padding:12px 24px}:host button.lg:not(.has-content).has-icon{padding:0 16px}:host button:not(.only-icon).has-icon{gap:8px}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--zonos-elements-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--zonos-elements-gray-0));color:var(--color, var(--zonos-elements-gray-1200));outline:1px solid var(--background-color, var(--zonos-elements-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--zonos-elements-blue-600);outline:1px solid var(--zonos-elements-blue-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--zonos-elements-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--zonos-elements-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--zonos-elements-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--zonos-elements-blue-600)}:host button:not(.override-background).success{background:var(--zonos-elements-green-600);outline:1px solid var(--zonos-elements-green-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--zonos-elements-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--zonos-elements-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--zonos-elements-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-green-400)}:host button:not(.override-background).danger{background:var(--zonos-elements-red-600);outline:1px solid var(--zonos-elements-red-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--zonos-elements-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--zonos-elements-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--zonos-elements-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-red-400)}:host button:not(.override-background).warning{background:var(--zonos-elements-orange-600);outline:1px solid var(--zonos-elements-orange-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--zonos-elements-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--zonos-elements-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--zonos-elements-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--zonos-elements-gray-500);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--zonos-elements-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--zonos-elements-button-focus-ring);box-shadow:var(--zonos-elements-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--zonos-elements-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--zonos-elements-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--zonos-elements-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--zonos-elements-radius-4);width:24px}";
 const ZonosButtonStyle0 = zonosButtonCss;
 
 const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends HTMLElement {
@@ -47,6 +47,7 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
         this.handleSlotChange = () => {
             this.hasContent = true;
         };
+        this.getColorVarProperty = (color) => color.replace('var(', '').replace(')', '');
         this.buttonColor = undefined;
         this.backgroundColor = undefined;
         this.borderStyle = undefined;
@@ -56,6 +57,7 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
         this.size = 'sm';
         this.variant = 'standard';
         this.noBackground = false;
+        this.withBoxShadow = false;
         this.noPaddingLeft = false;
         this.noPaddingRight = false;
         this.loading = false;
@@ -85,15 +87,22 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
          * 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)
@@ -108,32 +117,34 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
         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: '6e361b1a80fd43a72a99a8201ca5d7cb86404656', 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: 'fd4335b2d9bfe74b509f1355fa620dc4c53f58c6', 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: '7b37a1d30604de0d9e1f5d07bf6034724dcd8875', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'e4e3cbda9ae02c2ac9a7c17767bda93076ea67ad', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e9b7287f2c4d9143f04103fe43d3f4dfd669341e', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
+    static get delegatesFocus() { return true; }
     get ele() { return this; }
     static get watchers() { return {
         "icon": ["iconChangeHandler"]
     }; }
     static get style() { return ZonosButtonStyle0; }
-}, [1, "zonos-button", {
+}, [17, "zonos-button", {
         "buttonColor": [1, "button-color"],
         "backgroundColor": [1, "background-color"],
         "borderStyle": [1, "border-style"],
@@ -143,6 +154,7 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
         "size": [1],
         "variant": [1],
         "noBackground": [4, "no-background"],
+        "withBoxShadow": [4, "with-box-shadow"],
         "noPaddingLeft": [4, "no-padding-left"],
         "noPaddingRight": [4, "no-padding-right"],
         "loading": [4],

package/dist/components/zonos-checkout.js

@@ -4,27 +4,28 @@ import { a as translate } from './translationStore.js';
 import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
-import { c as createCustomEvent, s as sendErrorLog, d as defineCustomElement$n } from './zonos-checkout-finish2.js';
+import { c as createCustomEvent, s as sendErrorLog, d as defineCustomElement$o } from './zonos-checkout-finish2.js';
 import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isDarkColor } from './isDarkColor.js';
 import { s as submitGtag } from './submitGtag.js';
-import { R as RemoveIcon, d as defineCustomElement$w } from './zonos-address-update-dialog2.js';
-import { d as defineCustomElement$z } from './zonos-address2.js';
-import { d as defineCustomElement$y } from './zonos-address-display2.js';
-import { d as defineCustomElement$x } from './zonos-address-form2.js';
-import { d as defineCustomElement$v } from './zonos-badge2.js';
-import { d as defineCustomElement$u } from './zonos-banner2.js';
-import { d as defineCustomElement$t } from './zonos-button2.js';
-import { d as defineCustomElement$s } from './zonos-card2.js';
-import { d as defineCustomElement$r } from './zonos-cart-items2.js';
-import { d as defineCustomElement$q } from './zonos-cart-restricted-items2.js';
-import { d as defineCustomElement$p } from './zonos-cart-subtotal2.js';
-import { d as defineCustomElement$o } from './zonos-checkbox2.js';
-import { d as defineCustomElement$m } from './zonos-checkout-footer2.js';
-import { d as defineCustomElement$l } from './zonos-checkout-payment2.js';
-import { d as defineCustomElement$k } from './zonos-checkout-progress-tabs2.js';
-import { d as defineCustomElement$j } from './zonos-collapse2.js';
+import { R as RemoveIcon, d as defineCustomElement$x } from './zonos-address-update-dialog2.js';
+import { d as defineCustomElement$A } from './zonos-address2.js';
+import { d as defineCustomElement$z } from './zonos-address-display2.js';
+import { d as defineCustomElement$y } from './zonos-address-form2.js';
+import { d as defineCustomElement$w } from './zonos-badge2.js';
+import { d as defineCustomElement$v } from './zonos-banner2.js';
+import { d as defineCustomElement$u } from './zonos-button2.js';
+import { d as defineCustomElement$t } from './zonos-card2.js';
+import { d as defineCustomElement$s } from './zonos-cart-items2.js';
+import { d as defineCustomElement$r } from './zonos-cart-restricted-items2.js';
+import { d as defineCustomElement$q } from './zonos-cart-subtotal2.js';
+import { d as defineCustomElement$p } from './zonos-checkbox2.js';
+import { d as defineCustomElement$n } from './zonos-checkout-footer2.js';
+import { d as defineCustomElement$m } from './zonos-checkout-payment2.js';
+import { d as defineCustomElement$l } from './zonos-checkout-progress-tabs2.js';
+import { d as defineCustomElement$k } from './zonos-collapse2.js';
+import { d as defineCustomElement$j } from './zonos-confirm-dialog2.js';
 import { d as defineCustomElement$i } from './zonos-country-flag2.js';
 import { d as defineCustomElement$h } from './zonos-custom-message2.js';
 import { d as defineCustomElement$g } from './zonos-customer-info2.js';
@@ -369,6 +370,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         this.domesticRedirectedBtnSelector = '#zonos--domestic-redirected-checkout-button';
         this.legacyCheckoutHiddenBtnSelector = '#legacy-checkout-hidden-button';
         this.isLegacyCheckout = false;
+        this.confirmDialogOpen = false;
     }
     /**
      * Init cart info handler event
@@ -377,10 +379,27 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         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') {
@@ -391,6 +410,10 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         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
@@ -795,7 +818,11 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                 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 assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -821,10 +848,11 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         "domesticRedirectedBtnSelector": [32],
         "legacyCheckoutHiddenBtnSelector": [32],
         "isLegacyCheckout": [32],
+        "confirmDialogOpen": [32],
         "closeDialogHandler": [64],
         "init": [64],
         "setToFinishStep": [64]
-    }, [[16, "zonos--init-cart-info", "initCartInfoHandler"], [9, "resize", "handleWindowResize"]], {
+    }, [[16, "zonos--init-cart-info", "initCartInfoHandler"], [4, "keydown", "handleKeyPress"], [9, "resize", "handleWindowResize"]], {
         "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged", "handleAppearanceSettingsOverrideChange"],
         "mobile": ["handleMobileChange"]
     }]);
@@ -832,7 +860,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-checkout", "zonos-address", "zonos-address-display", "zonos-address-form", "zonos-address-update-dialog", "zonos-badge", "zonos-banner", "zonos-button", "zonos-card", "zonos-cart-items", "zonos-cart-restricted-items", "zonos-cart-subtotal", "zonos-checkbox", "zonos-checkout-finish", "zonos-checkout-footer", "zonos-checkout-payment", "zonos-checkout-progress-tabs", "zonos-collapse", "zonos-country-flag", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "zonos-input", "zonos-language-select", "zonos-link-authentication", "zonos-payment", "zonos-review", "zonos-select-dialog-header", "zonos-shipping", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text", "zonos-tooltip", "zonos-v-stack"];
+    const components = ["zonos-checkout", "zonos-address", "zonos-address-display", "zonos-address-form", "zonos-address-update-dialog", "zonos-badge", "zonos-banner", "zonos-button", "zonos-card", "zonos-cart-items", "zonos-cart-restricted-items", "zonos-cart-subtotal", "zonos-checkbox", "zonos-checkout-finish", "zonos-checkout-footer", "zonos-checkout-payment", "zonos-checkout-progress-tabs", "zonos-collapse", "zonos-confirm-dialog", "zonos-country-flag", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "zonos-input", "zonos-language-select", "zonos-link-authentication", "zonos-payment", "zonos-review", "zonos-select-dialog-header", "zonos-shipping", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text", "zonos-tooltip", "zonos-v-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "zonos-checkout":
             if (!customElements.get(tagName)) {
@@ -841,85 +869,90 @@ function defineCustomElement$1() {
             break;
         case "zonos-address":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$A();
             }
             break;
         case "zonos-address-display":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "zonos-address-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$y();
             }
             break;
         case "zonos-address-update-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "zonos-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "zonos-banner":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "zonos-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "zonos-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "zonos-cart-items":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "zonos-cart-restricted-items":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "zonos-cart-subtotal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "zonos-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "zonos-checkout-finish":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "zonos-checkout-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "zonos-checkout-payment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "zonos-checkout-progress-tabs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "zonos-collapse":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "zonos-confirm-dialog":
             if (!customElements.get(tagName)) {
                 defineCustomElement$j();
             }

package/dist/components/zonos-component.js

@@ -20,7 +20,7 @@ const ZonosComponent$1 = /*@__PURE__*/ proxyCustomElement(class ZonosComponent e
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '589c084e9acc84525aa5db6036d13741ed656e26' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'b51f2edddb50f8f6a868da28c73218fe6955d2e5' }, "Hello, World! I'm ", this.getText());
     }
     static get style() { return ZonosComponentStyle0; }
 }, [1, "zonos-component", {

package/dist/components/zonos-confirm-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosConfirmDialog extends Components.ZonosConfirmDialog, HTMLElement {}
+export const ZonosConfirmDialog: {
+    prototype: ZonosConfirmDialog;
+    new (): ZonosConfirmDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { Z as ZonosConfirmDialog$1, d as defineCustomElement$1 } from './zonos-confirm-dialog2.js';
+
+const ZonosConfirmDialog = ZonosConfirmDialog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosConfirmDialog, defineCustomElement };

package/dist/components/zonos-confirm-dialog2.js

@@ -0,0 +1,161 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as translate } from './translationStore.js';
+import { g as getZonosStoreTheme, a as zonosStoreFontFamily, z as zonosStore } from './zonosStore.js';
+import { c as classes } from './classes.js';
+import { g as getBorderRadius } from './getBorderRadius.js';
+import { d as defineCustomElement$4 } from './zonos-button2.js';
+import { d as defineCustomElement$3 } from './zonos-icon2.js';
+import { d as defineCustomElement$2 } from './zonos-spinner2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const ExclamationMarkDuotoneIcon = `<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>`;
+
+const HelpDuotoneIcon = `<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>`;
+
+const WarningDuotoneIcon = `<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>`;
+
+const zonosConfirmDialogCss = ":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--backdrop,:host .zonos--confirm-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:opacity 0.3s, visibility 0.3s;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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align: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;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;gap:24px}:host .icon-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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:-ms-flexbox;display:flex;width:100%;gap:8px}:host .footer zonos-button{-ms-flex:1;flex:1}:host .content{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;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;-webkit-transform:scale(1);transform:scale(1)}";
+const ZonosConfirmDialogStyle0 = zonosConfirmDialogCss;
+
+const ZonosConfirmDialog = /*@__PURE__*/ proxyCustomElement(class ZonosConfirmDialog extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.confirmClicked = createEvent(this, "confirmClicked", 7);
+        this.cancelClicked = createEvent(this, "cancelClicked", 7);
+        this.clickOutsideDialogHandler = (event) => {
+            if (event.target === event.currentTarget && !this.noClickOutside) {
+                this.closeDialogHandler();
+            }
+        };
+        this.dialogTitle = translate('Are you sure?');
+        this.dialogIntent = 'info';
+        this.dialogSubtitle = '';
+        this.submitBtnColor = undefined;
+        this.dialogConfirmBtnText = undefined;
+        this.dialogCancelBtnText = undefined;
+        this.isMobile = false;
+        this.dialogOpen = false;
+        this.noClickOutside = false;
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.closeDialogHandler();
+        }
+    }
+    focusDialog() {
+        if (this.dialogOpen) {
+            setTimeout(() => {
+                var _a, _b;
+                // Focus on a non tabable element (tabIndex=-1), so we will be able to tab to other tabable elements
+                (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--backdrop')) === null || _b === void 0 ? void 0 : _b.focus();
+            }, 100);
+        }
+    }
+    confirmDialogHandler() {
+        // Only do the action if the dialog is open
+        if (!this.dialogOpen) {
+            return;
+        }
+        // Emit confirm event
+        this.confirmClicked.emit();
+    }
+    closeDialogHandler() {
+        // Only do the action if the dialog is open
+        if (!this.dialogOpen) {
+            return;
+        }
+        // Emit cancel event
+        this.cancelClicked.emit();
+    }
+    renderIcon() {
+        switch (this.dialogIntent) {
+            case 'info':
+                return (h("zonos-icon", { content: HelpDuotoneIcon, iconColor: 'blue-800' }));
+            case 'danger':
+                return (h("zonos-icon", { content: ExclamationMarkDuotoneIcon, iconColor: 'red-800' }));
+            case 'warn':
+                return (h("zonos-icon", { content: WarningDuotoneIcon, iconColor: 'orange-800' }));
+        }
+    }
+    getButtonConfirmVariant() {
+        switch (this.dialogIntent) {
+            case 'warn':
+                return 'warning';
+            case 'danger':
+                return 'danger';
+            default:
+                return 'primary';
+        }
+    }
+    render() {
+        this.focusDialog();
+        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: '9adab1c77e8087cfbb92a52e66d12f1b1917bf7e', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-theme": theme, style: {
+                '--border-radius': borderStyle,
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'c5b40120ff7b3c4684eb65fb5ef6f8ffa157f98f', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: 'c7cf4d2839cb42a064b4303bdefdfe4fed116b2a', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '30256495401f4967371e923055dfe9efed8cb6b7', class: "zonos--confirm-dialog", onBlur: () => {
+                this.focusDialog();
+            } }, h("div", { key: '6121ab29b80d233f9ca47aaf66725fe91ae6827c', class: "wrapper" }, h("div", { key: '8fbb75eca3ee163b57c60159d5c5374382f3fa33', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '56376add713778af1df087c0f9f4b8d90065caa2', class: "content" }, h("div", { key: '4f31ad7d42127c5350a64b86ae12fde42a350422', class: "title" }, h("zonos-text", { key: '7a5dc82d3f2250c1b3a3403e116736cedcf63f51', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '87b04af2b1984a8cf205b6fa0acf0320f56342e7', class: "subtitle" }, h("zonos-text", { key: '53d0157655b1d8193a0f698e41442b676d9e0ca6', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '4b410f4a4079a25549bef228c3b9a81a64fe20e2', class: "footer" }, h("zonos-button", { key: '5a8ffb99756bd142605c564df381bfb9e72d5d78', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText), h("zonos-button", { key: '61c2b8272202f316ec09441ab64428c557073c9d', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return this; }
+    static get style() { return ZonosConfirmDialogStyle0; }
+}, [1, "zonos-confirm-dialog", {
+        "dialogTitle": [1, "dialog-title"],
+        "dialogIntent": [1, "dialog-intent"],
+        "dialogSubtitle": [1, "dialog-subtitle"],
+        "submitBtnColor": [1, "submit-btn-color"],
+        "dialogConfirmBtnText": [1, "dialog-confirm-btn-text"],
+        "dialogCancelBtnText": [1, "dialog-cancel-btn-text"],
+        "isMobile": [4, "is-mobile"],
+        "dialogOpen": [4, "dialog-open"],
+        "noClickOutside": [4, "no-click-outside"]
+    }, [[4, "keydown", "handleKeyDown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-confirm-dialog", "zonos-button", "zonos-icon", "zonos-spinner", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-confirm-dialog":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosConfirmDialog);
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZonosConfirmDialog as Z, defineCustomElement as d };

package/dist/components/zonos-controller.js

@@ -265,7 +265,7 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: 'c607814c97ec998ef3e56ccdb28ef0369daf9ff3', class: "zonos--elements" });
+        return h(Host, { key: '129317aa410d96319846670a1aaae29490993b19', class: "zonos--elements" });
     }
     static get style() { return ZonosControllerStyle0; }
 }, [1, "zonos-controller", {

package/dist/components/zonos-country-select2.js

@@ -1829,9 +1829,9 @@ const ZonosCountrySelect = /*@__PURE__*/ proxyCustomElement(class ZonosCountrySe
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '1b37f326e23e3afaba1428cc23add2e5c425f0b9', class: "zonos--elements", style: {
+        return (h(Host, { key: '67675ff9b37f110026ced223509104eb8ad805c0', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '966ab933f1bcd754e64fc43dc2013f6cde0f043b', class: "zonos--country-select" }, h("zonos-v-stack", { key: '77d6412871658e9fc8e59df130d3b95df68c5e0b', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '17d0413090d9637aa17234d19a3549b9828a3a86', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '08aa6bd77273095d0b1753c6b423a283b638cc69', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'e1e770226aa2ad9c74681d8291797ff676217f09', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: '83d69dde89f0fafadf344ca0be017f43c468f154', class: "zonos--country-select" }, h("zonos-v-stack", { key: '8262345817217ba3f27ecf433ff56712b8018ae7', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '80ef94a9a2b1d7bdd835a9b31b09663f28b0532a', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'd3151d1287ee98b697e35f1f755694b250f089a3', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'f98ff12368e49125f7fc2409f84bcbaef2143809', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     get ele() { return this; }
     static get style() { return ZonosCountrySelectStyle0; }

package/dist/components/zonos-custom-message2.js

@@ -31,9 +31,9 @@ const ZonosCustomMessage = /*@__PURE__*/ proxyCustomElement(class ZonosCustomMes
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: 'c2cec226eb9236205d0c4b234bb393e4663d982f', class: "zonos--elements", style: {
+        return (h(Host, { key: '7d3c45852c97272a3606321dad09c6433dfc664c', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: '51814b00b14061891914753a950b6a3dc852c0f0', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '4f7298eb552d9f0e1b6ded333c298df3d4fbbee2', class: "zonos--flex-message" }, h("zonos-icon", { key: '0a1fb171e1365a845e1e0855466058ced6c57f12', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'dd714a4f1fd3e1ebe55586c5c8c6941928eb2862', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: '53b64b2faea9d06fd66365f80efe3b9d26aab5b6', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '2bfc437f100084a1e661bf823e20be72a0ab616d', class: "zonos--flex-message" }, h("zonos-icon", { key: '5c0f5da248ddb25a69a3db46b85e8e0e4d481101', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'aabbcc00b1b50d29a3e6f48938b50c7b64d250dc', innerHTML: messageWithLinks }))))));
     }
     static get style() { return ZonosCustomMessageStyle0; }
 }, [1, "zonos-custom-message", {