@zonos/elements 1.3.21 → 1.3.22

package/dist/esm/zonos-button_3.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-3b46f3c3.js';
-import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-0ce57f37.js';
+import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-93da32b4.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-393bf797.js';
+import { g as getBorderRadius } from './getBorderRadius-a2e46e26.js';
 import { i as isColorVariable } from './isColorVariable-82457bef.js';
-import { i as isDarkColor } from './isDarkColor-454ec221.js';
+import { i as isDarkColor } from './isDarkColor-69ed8e39.js';
 
 /**
  * Get theme for button text based on background color
@@ -19,6 +19,11 @@ const getButtonTheme = (overrideBackground) => {
     return buttonTheme;
 };
 
+// This is to determine if variable of the element is using dark theme, so we can invert the color if needed
+const isElementUsingDarkTheme = (element) => isDarkColor(window
+    .getComputedStyle(element)
+    .getPropertyValue('--zonos-elements-gray-0'));
+
 /**
  * Filter out all of the undefined values from the object so we don't have undefined css variable values
  */
@@ -32,7 +37,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: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 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-900)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--zonos-elements-gray-800)}:host button:not(.override-background).subtle:not([disabled]).dark-hover-subtle:hover{background:var(--zonos-elements-gray-100)}:host button:not(.override-background).subtle:not([disabled]).dark-hover-subtle: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 = class {
@@ -45,6 +50,69 @@ const ZonosButton = class {
             this.hasContent = true;
         };
         this.getColorVarProperty = (color) => color.replace('var(', '').replace(')', '');
+        this.getButtonStyle = () => {
+            /**
+             * If the parent component pass in the variant prop with `undefined` value, it would not re-assign the `undefined` value with the default value.
+             * 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 color = this.buttonColor && isColorVariable(this.buttonColor)
+                ? `var(--zonos-elements-${this.buttonColor})`
+                : this.buttonColor;
+            const actualTextColor = window
+                .getComputedStyle(this.ele)
+                .getPropertyValue(this.getColorVarProperty(color || '')) ||
+                color ||
+                '';
+            /**
+             * Determine if the button should use dark hover subtle
+             * If variable = LIGHT && text color = LIGHT, use white hover subtle
+             * If variable = LIGHT && text color = DARK, use dark hover subtle
+             * If variable = DARK && text color = LIGHT, use dark hover subtle (invert hover color)
+             * If variable = DARK && text color = DARK, use white hover subtle (invert hover color)
+             */
+            const isLightVariable = !isElementUsingDarkTheme(this.ele);
+            const isTextLight = !isDarkColor(actualTextColor);
+            const useDarkHoverSubtle = (isLightVariable && !isTextLight) || (!isLightVariable && isTextLight);
+            switch (variant) {
+                case 'subtle': {
+                    // Background color is not used for subtle variant
+                    return {
+                        color,
+                        useDarkHoverSubtle,
+                    };
+                }
+                default: {
+                    // 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 = backgroundColor || zonosStore.appearance.colorSecondary;
+                    const backgroundActualColor = overrideBackground &&
+                        isColorVariable(this.getColorVarProperty(overrideBackground))
+                        ? window
+                            .getComputedStyle(this.ele)
+                            .getPropertyValue(this.getColorVarProperty(overrideBackground))
+                        : overrideBackground;
+                    // set contrast color if background color is dark for all variants except subtle
+                    const contrastColor = this.variant !== 'subtle' &&
+                        backgroundActualColor &&
+                        isDarkColor(backgroundActualColor)
+                        ? 'white'
+                        : color;
+                    return {
+                        backgroundColor: overrideBackground,
+                        color: contrastColor,
+                        spinnerColor: backgroundActualColor && isDarkColor(backgroundActualColor)
+                            ? 'white'
+                            : 'black',
+                        useDarkHoverSubtle,
+                    };
+                }
+            }
+        };
         this.buttonColor = undefined;
         this.backgroundColor = undefined;
         this.borderStyle = undefined;
@@ -78,48 +146,20 @@ const ZonosButton = class {
         this.iconChangeHandler();
     }
     render() {
+        const { backgroundColor, color, spinnerColor, useDarkHoverSubtle } = this.getButtonStyle();
         const disabled = this.loading || this.isDisabled;
-        /**
-         * If the parent component pass in the variant prop with `undefined` value, it would not re-assign the `undefined` value with the default value.
-         * 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 = 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;
+        // // only set theme for button to change text color if variant is standard and override background is set
+        const buttonTheme = variant === 'standard' ? getButtonTheme(backgroundColor) : undefined;
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        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)
-            ? `var(--zonos-elements-${this.buttonColor})`
-            : this.buttonColor;
-        // set contrast color if background color is dark for all variants except subtle
-        const contrastColor = this.variant !== 'subtle' &&
-            backgroundActualColor &&
-            isDarkColor(backgroundActualColor)
-            ? 'white'
-            : color;
-        const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
-            ? 'white'
-            : 'black';
-        return (h(Host, { key: '00d085d600a759366f4a2de8617d81831c0ce16b', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
-                '--background-color': overrideBackground,
+        return (h(Host, { key: 'a07724884592f96388174eb751bc3349391e2bf6', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+                '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
-                '--color': contrastColor,
+                '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'b79ffdb0212630598e95f07059bb3b41049cff47', class: classes([
+            }) }, h("button", { key: 'd34d62c7582abdb6aee6a1ec7fefb89bcc7a31ac', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -127,13 +167,12 @@ const ZonosButton = class {
                 this.noPaddingRight && 'no-padding-right',
                 this.iconRight && 'icon-right',
                 this.withBoxShadow && 'with-box-shadow',
+                useDarkHoverSubtle && 'dark-hover-subtle',
                 variant,
                 this.size,
                 // only override background if variant is set to standard
-                overrideBackground &&
-                    variant === 'standard' &&
-                    'override-background',
-            ]), 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)));
+                backgroundColor && variant === 'standard' && 'override-background',
+            ]), disabled: disabled }, this.loading && (h("div", { key: 'aaa929d205d5a4cec679f3ee7ef6097801dc69d0', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '372b0a8504ecb0af54c7f68a67d6ad400bb13173', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '0eefacfb7af58abf8049fd72180ba82f09ef9a34', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get delegatesFocus() { return true; }
     get ele() { return getElement(this); }

package/dist/esm/zonos-card_2.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, h, H as Host } from './index-3b46f3c3.js';
-import { d as zonosStoreFontFamily } from './zonosStore-0ce57f37.js';
+import { d as zonosStoreFontFamily } from './zonosStore-93da32b4.js';
 import { c as classes } from './classes-0d95c529.js';
-import { H as localizationStoreUpdateSelectedLocale, t as translate, l as localizationStore } from './cart-d3c98a81.js';
+import { H as localizationStoreUpdateSelectedLocale, t as translate, l as localizationStore } from './cart-efecbea6.js';
 import { l as languages } from './ILanguage-97790bee.js';
 import './logError-c456c092.js';
-import './isDarkColor-454ec221.js';
-import './getBorderRadius-393bf797.js';
+import './isDarkColor-69ed8e39.js';
+import './getBorderRadius-a2e46e26.js';
 
 const zonosCardCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .styled-card{border:var(--zonos-elements-border);border-radius:var(--zonos-elements-radius-6);padding:var(--spacing, 24px);text-align:left}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";
 const ZonosCardStyle0 = zonosCardCss;

package/dist/esm/zonos-cart-items_11.entry.js

@@ -1,27 +1,17 @@
 import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-3b46f3c3.js';
-import { d as cartStore, C as cartStoreHasOneEligibleItem, t as translate, r as handleFetch, p as stripeStoreReset, h as stripeStore, D as stripeStoreRetrievePayment, l as localizationStore, E as stripeStoreTranslateAddressToLatin, F as cartStoreUpdateSelectedShippingOption, G as cartStoreGetShippingTransitInfo } from './cart-d3c98a81.js';
+import { d as cartStore, B as currencyFormat, C as cartStoreHasOneEligibleItem, t as translate, r as handleFetch, p as stripeStoreReset, h as stripeStore, D as stripeStoreRetrievePayment, l as localizationStore, E as stripeStoreTranslateAddressToLatin, F as cartStoreUpdateSelectedShippingOption, G as cartStoreGetShippingTransitInfo } from './cart-efecbea6.js';
 import { c as classes } from './classes-0d95c529.js';
-import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-0ce57f37.js';
-import { t as trackConversionEvent, s as sendErrorLog, a as submitGtag, c as createCustomEvent } from './submitGtag-acdb8bd7.js';
-import { g as getBorderRadius } from './getBorderRadius-393bf797.js';
+import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-93da32b4.js';
+import { t as trackConversionEvent, s as sendErrorLog, a as submitGtag, c as createCustomEvent } from './submitGtag-a7b8a86e.js';
+import { g as getBorderRadius } from './getBorderRadius-a2e46e26.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { l as languages } from './ILanguage-97790bee.js';
-import { t as tinycolor, i as isDarkColor } from './isDarkColor-454ec221.js';
+import { t as tinycolor, i as isDarkColor } from './isDarkColor-69ed8e39.js';
 import { i as isColorVariable } from './isColorVariable-82457bef.js';
 import { c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
 import './logError-c456c092.js';
 
-const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
-    ? `${new Intl.NumberFormat('en-US', {
-        currency,
-        style: 'currency',
-    }).format(amount)} ${currency}`
-    : new Intl.NumberFormat('en-US', {
-        currency,
-        style: 'currency',
-    }).format(amount);
-
-const zonosCartItemsCss = ":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--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host img{min-width:40px}";
+const zonosCartItemsCss = ":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--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--cart-table td{vertical-align:top}:host .zonos--cart-item-price zonos-text{white-space:nowrap}:host img{min-width:40px;margin-top:6px}";
 const ZonosCartItemsStyle0 = zonosCartItemsCss;
 
 const ZonosCartItems = class {
@@ -34,14 +24,14 @@ const ZonosCartItems = class {
         const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
         const rate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
         const nonRestrictedItems = cartStore.items.filter(item => !item.isRestricted);
-        return (h(Host, { key: '2dc2189f79fe59260a9fcd8a61142ab628ff7f57', class: "zonos--cart-items zonos--elements" }, h("table", { key: 'd354007fffb5afa397038f319571e83c3fb3ad65', class: "zonos--cart-table" }, h("tbody", { key: '5f31a21b612495ee583650cbd71614cc10a799cc' }, nonRestrictedItems.map(item => {
+        return (h(Host, { key: '054ea5ed2f86b2d802dd89fe77e010cb2a1a574d', class: "zonos--cart-items zonos--elements" }, h("table", { key: '6fcd4c1f30ba1d438a7ef8831ae6475171aa2f79', class: "zonos--cart-table" }, h("tbody", { key: 'd82fea259e5f70e43979512e86759b167c7cece8' }, nonRestrictedItems.map(item => {
             const itemImg = item.imageUrl;
             return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: item.imageUrl, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, item.name)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-                amount: item.amount * item.quantity * rate,
+                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, item.name)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
+                amount: item.amount * rate * item.quantity,
                 currency: cartStore.currency,
             })))));
         })))));
@@ -124,7 +114,7 @@ const ZonosCartRestrictedItems = class {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: itemImg, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (h("img", { alt: item.name || `Restricted item ${index + 1}`, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, ((_b = item.matchedItem) === null || _b === void 0 ? void 0 : _b.name) || item.name), h("zonos-text", { type: "caption" }, item.restriction.reason)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+                }, width: 40 })) : (h("img", { alt: item.name || `Restricted item ${index + 1}`, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, ((_b = item.matchedItem) === null || _b === void 0 ? void 0 : _b.name) || item.name), h("zonos-text", { type: "caption" }, item.restriction.reason)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
                 amount: item.amount * item.quantity * rate,
                 currency: cartStore.currency,
             })))));
@@ -140,7 +130,7 @@ const InfoIcon = `<svg viewBox="0 0 17 16" fill="none" xmlns="https://www.w3.org
 </svg>
 `;
 
-const zonosCartSubtotalCss = ":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--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:20px 8px;vertical-align:top}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--zonos-elements-gray-200)}:host .zonos--cart-duty-tax-price{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;gap:5px}:host .zonos--cart-subtotal-price{text-align:right}";
+const zonosCartSubtotalCss = ":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--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:20px 8px;vertical-align:top}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--zonos-elements-gray-200)}:host .zonos--cart-duty-tax-price{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;gap:5px}:host .zonos--cart-subtotal-price{text-align:right}:host .zonos--cart-subtotal-price zonos-text{white-space:nowrap}:host .zonos--cart-subtotal-price zonos-text,:host .zonos--cart-pay-total zonos-text{white-space:nowrap}";
 const ZonosCartSubtotalStyle0 = zonosCartSubtotalCss;
 
 const ZonosCartSubtotal = class {
@@ -158,20 +148,20 @@ const ZonosCartSubtotal = class {
             }
             return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cartStore.selectedShippingOption.displayName), cartStore.selectedShippingOptionTransitTime && (h("zonos-text", { class: "zonos--caption", type: "caption" }, cartStore.selectedShippingOptionTransitTime, ' ', translate('business days')))));
         };
-        return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+        return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
             amount: subtotal,
             currency: cartStore.currency,
         })))), h("tr", { class: "zonos--row zonos--cart-shipping" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cartStore.shipping
-            ? formatCurrency({
+            ? currencyFormat({
                 amount: cartStore.shipping,
                 currency: cartStore.currency,
             })
             : '-')), showDutyTaxesInfo && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-tooltip", { label: translate('Nothing due at the door') }, h("zonos-icon", { "aria-label": "Learn more about duties, taxes, and fees", content: InfoIcon, size: 16 }))), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { textColor: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxFees
-            ? formatCurrency({
+            ? currencyFormat({
                 amount: cartStore.dutiesTaxFees,
                 currency: cartStore.currency,
             })
-            : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed'))))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+            : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed'))))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
             amount: total,
             currency: cartStore.currency,
         })))))));
@@ -434,7 +424,7 @@ const ZonosCheckoutPayment = class {
         }
         return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
-            variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
+            variant: this.submitBtnType }, "Pay", ' ', currencyFormat({
             amount: cartStore.total,
             currency: cartStore.currency,
         }))))));
@@ -874,7 +864,7 @@ const ZonosReview = class {
         return (h(Host, { class: classes([
                 'zonos--review zonos--elements',
                 this.isMobile && 'mobile',
-            ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
+            ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, currencyFormat({
             amount: total,
             currency: cartStore.currency,
         })))));
@@ -960,7 +950,7 @@ const ZonosShipping = class {
                     amount: shippingAmount,
                     caption,
                     label: item.displayName,
-                    price: formatCurrency({
+                    price: currencyFormat({
                         amount: shippingAmount,
                         currency: cartStore.currency,
                     }),
@@ -1001,7 +991,7 @@ const ZonosShipping = class {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: '7d55ffefe3cb926587a9b2d6617d732b52cf1a82', class: "zonos--shipping zonos--elements" }, h("div", { key: 'dfe3d7d7e0be1857a428c7c3dff5a60f45e2c843', class: "zonos--group" }, h("zonos-text", { key: 'dccf7b24862e88ee3ab8914b04a4ee02f02324fb', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: 'c343522911e886a2365b795a9b95b17acbfa59c8', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '83c873c95e5b7466cfba997a4385ea55771f2571', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: 'c7dd64a8d84fa04629010d20010e89ea51c3b634', class: "zonos--group-btn" }, h("zonos-button", { key: '8d5ec0f9896be564ab659affd578939eff1c62dc', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { key: '11734c7c14a3a63e733a7fa4f2e202bf3b069fd4', class: "zonos--shipping zonos--elements" }, h("div", { key: 'ac22237e620e0b65c9b3920d57373207f991d926', class: "zonos--group" }, h("zonos-text", { key: 'ee4c12ab90bcd029027284d00ab304ea4dd5a71a', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: '4b641aaf9270a8bf022d66878096768fe2956e4a', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '6b29f4338c0920040599cdf01154b43d274ecfed', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '7b649c6c3da3c8023edc177077679bc2f397a91f', class: "zonos--group-btn" }, h("zonos-button", { key: '18181ad177d5beb7cdd8a3d0e437b332dd20f669', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }

package/dist/esm/zonos-checkout.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h, F as Fragment, H as Host } from './index-3b46f3c3.js';
-import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as stripeStore, j as stripeStoreInitCheckoutSession, k as cartStoreUpdateToErrorState, t as translate, m as stripeStorePrefetchLandedCost, n as cartStoreNextStep, o as stripeStoreConfirmPayment, p as stripeStoreReset, q as localizationStoreOnUpdate } from './cart-d3c98a81.js';
-import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-0ce57f37.js';
-import { c as createCustomEvent, s as sendErrorLog, a as submitGtag, t as trackConversionEvent } from './submitGtag-acdb8bd7.js';
+import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as stripeStore, j as stripeStoreInitCheckoutSession, k as cartStoreUpdateToErrorState, t as translate, m as stripeStorePrefetchLandedCost, n as cartStoreNextStep, o as stripeStoreConfirmPayment, p as stripeStoreReset, q as localizationStoreOnUpdate } from './cart-efecbea6.js';
+import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-93da32b4.js';
+import { c as createCustomEvent, s as sendErrorLog, a as submitGtag, t as trackConversionEvent } from './submitGtag-a7b8a86e.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { l as log, a as logError } from './logError-c456c092.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-393bf797.js';
-import { i as isDarkColor } from './isDarkColor-454ec221.js';
+import { g as getBorderRadius } from './getBorderRadius-a2e46e26.js';
+import { i as isDarkColor } from './isDarkColor-69ed8e39.js';
 import { R as RemoveIcon } from './RemoveIcon-9dc5dd1a.js';
 
 /**
@@ -385,9 +385,13 @@ const ZonosCheckout = class {
             const tempCartData = buildCartItemsByTempCart(window.Zonos.tempCartData);
             await cartStoreUpdateItems(tempCartData);
         }
-        else if (zonosStore.checkoutSettings.buildCartDetail) {
+        else if (zonosStore.checkoutSettings.buildCartDetail &&
+            localizationStore.selectedCountryCode) {
             log('build cart detail');
-            const cartItems = await zonosStore.checkoutSettings.buildCartDetail();
+            const cartItems = await zonosStore.checkoutSettings.buildCartDetail({
+                countryCode: localizationStore.selectedCountryCode,
+                currencyCode: localizationStore.targetCurrency,
+            });
             await cartStoreUpdateItems(cartItems);
         }
         // if client secret doesn't exist, request a new one.

package/dist/esm/zonos-controller.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-3b46f3c3.js';
-import { r as handleFetch, u as isValidSelector, h as stripeStore, v as initLocalizationStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-d3c98a81.js';
-import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-0ce57f37.js';
+import { r as handleFetch, u as isValidSelector, h as stripeStore, v as initLocalizationStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-efecbea6.js';
+import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-93da32b4.js';
 import { a as logError, l as log } from './logError-c456c092.js';
-import './isDarkColor-454ec221.js';
-import './getBorderRadius-393bf797.js';
+import './isDarkColor-69ed8e39.js';
+import './getBorderRadius-a2e46e26.js';
 
 const getZonosSettings = async () => {
     const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/zonos-settings`;

package/dist/esm/zonos-country-flag.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-3b46f3c3.js';
-import { l as localizationStore } from './cart-d3c98a81.js';
-import { d as zonosStoreFontFamily } from './zonosStore-0ce57f37.js';
+import { l as localizationStore } from './cart-efecbea6.js';
+import { d as zonosStoreFontFamily } from './zonosStore-93da32b4.js';
 import { c as classes } from './classes-0d95c529.js';
 import './logError-c456c092.js';
-import './isDarkColor-454ec221.js';
-import './getBorderRadius-393bf797.js';
+import './isDarkColor-69ed8e39.js';
+import './getBorderRadius-a2e46e26.js';
 
 const zonosCountryFlagCss = ":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}:host .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";
 const ZonosCountryFlagStyle0 = zonosCountryFlagCss;

package/dist/esm/zonos-country-select_3.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-3b46f3c3.js';
-import { a as localizationStoreUpdateSelectedCountryCode, l as localizationStore } from './cart-d3c98a81.js';
-import { d as zonosStoreFontFamily } from './zonosStore-0ce57f37.js';
+import { a as localizationStoreUpdateSelectedCountryCode, l as localizationStore } from './cart-efecbea6.js';
+import { d as zonosStoreFontFamily } from './zonosStore-93da32b4.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';
-import { i as isDarkColor } from './isDarkColor-454ec221.js';
+import { i as isDarkColor } from './isDarkColor-69ed8e39.js';
 import { l as languages } from './ILanguage-97790bee.js';
 import './logError-c456c092.js';
-import './getBorderRadius-393bf797.js';
+import './getBorderRadius-a2e46e26.js';
 
 /**
  * Fuse.js v7.0.0 - Lightweight fuzzy-search (http://fusejs.io)
@@ -1874,14 +1874,16 @@ const ZonosHelloDialogFooter = class {
         this.setShowLanguageSelect = () => { };
     }
     render() {
-        var _a, _b, _c;
+        var _a, _b;
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
-        const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (h(Host, { key: '714c0ccdaab553158a4990e24e471e0a0be64655', class: "zonos--elements" }, h("div", { key: '4c177b9120aee7ccdc242bb656399e1597b35f28', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
-                '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-            } }, h("a", { key: 'cb2b3ffb8a637825c76d4b33d71fa38d20a19220', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'affb176b938a399d51ccb6ae4fb5906e31ea2ff0', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: '4aa0ce039d196d804b26df7e2b8608252da2a478', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '088259ecd3d2271fb9a4042126886c7f4fe3a9ba', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'e20dcd573266b53341e9f21bab3b34672d4d96a1', buttonColor: "gray-1200", 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)))));
+        // 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: '056e6cead0dd21acc085689ea850ba4a53f67bf9', class: "zonos--elements" }, h("div", { key: '00f61e795abc81d6e2f0be7e64eeae298248b34e', class: "zonos--hello-dialog-footer", style: {
+                '--primary-color': primaryColor,
+            } }, h("a", { key: '79235722e7f4caaeac2d2a400665603e07b14614', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '7a92af7024dfc3e21de1a0789623b1c1fdb8a33e', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '04d44adc9941688bc7ae7bef0ea8c9d26a33a401', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'b9f3debc0c965f1ebd8745cb020c10f6e8c17285', 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: 'cc3ec6a8ece0ed8e94a85ec3a7a38c3c87fbf95e', 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)))));
     }
+    get ele() { return getElement(this); }
 };
 ZonosHelloDialogFooter.style = ZonosHelloDialogFooterStyle0;
 

package/dist/esm/zonos-elements.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["zonos-checkout",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"domesticRedirectedBtnSelector":[32],"legacyCheckoutHiddenBtnSelector":[32],"isLegacyCheckout":[32],"confirmDialogOpen":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[4,"keydown","handleKeyPress"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged","handleAppearanceSettingsOverrideChange"],"mobile":["handleMobileChange"]}]]],["zonos-hello",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64],"openHelloDialog":[64]},[[9,"resize","handleResize"]],{"appearanceSettingsOverride":["handleAppearanceSettingsOverrideChange"]}]]],["zonos-controller",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]},[[8,"locationchange","handleLocationChange"]]]]],["zonos-component",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-link",[[1,"zonos-link",{"href":[1],"rel":[1],"target":[1],"linkTitle":[1,"link-title"]}]]],["zonos-logo",[[1,"zonos-logo",{"theme":[1],"width":[1]}]]],["zonos-text",[[1,"zonos-text",{"textColor":[1,"text-color"],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-hello-dialog",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32],"showLanguageSelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification",[[1,"zonos-notification",{"notificationArray":[32],"showNotification":[64]}]]],["zonos-payment",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"initialSelectedValue":[8,"initial-selected-value"],"selectedItem":[32]}]]],["zonos-badge_2",[[1,"zonos-badge",{"bold":[4],"badgeColor":[1,"badge-color"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4]}],[1,"zonos-tooltip",{"label":[1],"subtitle":[1],"showTooltip":[32]}]]],["zonos-input",[[1,"zonos-input",{"inputValue":[1,"input-value"],"inputLabel":[1,"input-label"],"inputSize":[1,"input-size"],"isDisabled":[4,"is-disabled"],"isError":[4,"is-error"],"inputPlaceholder":[1,"input-placeholder"],"value":[32]},null,{"inputValue":["onInputValueChange"]}]]],["zonos-banner",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"hasContent":[32]}]]],["zonos-button_3",[[17,"zonos-button",{"buttonColor":[1,"button-color"],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"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],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-spinner",{"size":[2],"spinnerColor":[1,"spinner-color"]}],[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"iconColor":[1,"icon-color"],"content":[1],"size":[2]}]]],["zonos-select-dialog-header_2",[[1,"zonos-select-dialog-header",{"handleOnClose":[16],"label":[1]}],[1,"zonos-v-stack",{"spacing":[2]}]]],["zonos-card_2",[[1,"zonos-language-select",{"handleOnClose":[16]}],[1,"zonos-card",{"actions":[16],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}]]],["zonos-country-flag",[[1,"zonos-country-flag",{"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-country-select_3",[[1,"zonos-country-select",{"handleOnClose":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16],"setShowLanguageSelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}]]],["zonos-address_8",[[1,"zonos-address-update-dialog",{"continueLoading":[4,"continue-loading"],"dialogLoading":[4,"dialog-loading"],"dialogOpen":[4,"dialog-open"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"isMobile":[4,"is-mobile"],"shippingAddress":[16],"billingAddress":[16],"translatedShippingAddress":[16],"translatedBillingAddress":[16],"showErrorBanner":[32],"translatedShippingAddressState":[32],"translatedBillingAddressState":[32]},null,{"translatedShippingAddress":["watchTranslatedShippingAddress"],"translatedBillingAddress":["watchTranslatedBillingAddress"]}],[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-checkbox",{"backgroundColor":[1,"background-color"],"label":[1],"isChecked":[4,"is-checked"],"isDisabled":[4,"is-disabled"],"size":[2],"fontSize":[1,"font-size"],"borderStyle":[1,"border-style"]},[[1,"click","onClick"]]],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"defaultEmail":[1,"default-email"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"minHeight":[1,"min-height"],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"],[4,"keydown","handleKeyDown"]]],[1,"zonos-address-display",{"currentAddress":[16],"addressType":[1,"address-type"]}],[1,"zonos-address-form",{"currentAddress":[16],"translatedAddress":[16],"addressType":[1,"address-type"],"localAddress":[32]},null,{"translatedAddress":["watchCurrentAddress"]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32],"iframe":[32]}]]],["zonos-cart-items_11",[[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"isMobile":[4,"is-mobile"],"defaultAddress":[16],"showErrorBanner":[32],"shippingCountry":[32],"isCheckingForRestrictedItems":[32],"isValidatingAddress":[32],"invalidShippingCharacterList":[32],"invalidBillingCharacterList":[32],"openAddressValidationDialog":[32]}],[1,"zonos-checkout-footer",{"mobile":[4],"dataTheme":[1,"data-theme"],"showLanguageDialog":[32],"isMobile":[32]},[[4,"click","handleGlobalClick"]],{"mobile":["handleMobileChange"]}],[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"showErrorBanner":[32]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"isSelecting":[32],"showErrorBanner":[32],"serviceLevels":[32]}],[1,"zonos-cart-restricted-items",{"hide":[4],"errorImages":[32],"internalCollapsed":[32],"firstRender":[32]}],[1,"zonos-cart-subtotal"],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[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"]]],[1,"zonos-checkout-progress-tabs",{"tabColor":[1,"tab-color"],"backgroundColor":[1,"background-color"],"setTabItems":[64],"setTabSelected":[64]}],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}]]]], options);
+  return bootstrapLazy([["zonos-checkout",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"domesticRedirectedBtnSelector":[32],"legacyCheckoutHiddenBtnSelector":[32],"isLegacyCheckout":[32],"confirmDialogOpen":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[4,"keydown","handleKeyPress"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged","handleAppearanceSettingsOverrideChange"],"mobile":["handleMobileChange"]}]]],["zonos-hello",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64],"openHelloDialog":[64]},[[9,"resize","handleResize"]],{"appearanceSettingsOverride":["handleAppearanceSettingsOverrideChange"]}]]],["zonos-controller",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]},[[8,"locationchange","handleLocationChange"]]]]],["zonos-component",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-link",[[1,"zonos-link",{"href":[1],"rel":[1],"target":[1],"linkTitle":[1,"link-title"]}]]],["zonos-logo",[[1,"zonos-logo",{"theme":[1],"width":[1]}]]],["zonos-text",[[1,"zonos-text",{"textColor":[1,"text-color"],"size":[1],"type":[1],"weight":[2],"ready":[32]}]]],["zonos-hello-dialog",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32],"showLanguageSelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification",[[1,"zonos-notification",{"notificationArray":[32],"showNotification":[64]}]]],["zonos-payment",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"initialSelectedValue":[8,"initial-selected-value"],"selectedItem":[32]}]]],["zonos-badge_2",[[1,"zonos-badge",{"bold":[4],"badgeColor":[1,"badge-color"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4]}],[1,"zonos-tooltip",{"label":[1],"subtitle":[1],"showTooltip":[32]}]]],["zonos-input",[[1,"zonos-input",{"inputValue":[1,"input-value"],"inputLabel":[1,"input-label"],"inputSize":[1,"input-size"],"isDisabled":[4,"is-disabled"],"isError":[4,"is-error"],"inputPlaceholder":[1,"input-placeholder"],"value":[32]},null,{"inputValue":["onInputValueChange"]}]]],["zonos-banner",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"hasContent":[32]}]]],["zonos-button_3",[[17,"zonos-button",{"buttonColor":[1,"button-color"],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"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],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-spinner",{"size":[2],"spinnerColor":[1,"spinner-color"]}],[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"iconColor":[1,"icon-color"],"content":[1],"size":[2]}]]],["zonos-select-dialog-header_2",[[1,"zonos-select-dialog-header",{"handleOnClose":[16],"label":[1]}],[1,"zonos-v-stack",{"spacing":[2]}]]],["zonos-card_2",[[1,"zonos-language-select",{"handleOnClose":[16]}],[1,"zonos-card",{"actions":[16],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}]]],["zonos-country-flag",[[1,"zonos-country-flag",{"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-country-select_3",[[1,"zonos-country-select",{"handleOnClose":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16],"setShowLanguageSelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}]]],["zonos-address_8",[[1,"zonos-address-update-dialog",{"continueLoading":[4,"continue-loading"],"dialogLoading":[4,"dialog-loading"],"dialogOpen":[4,"dialog-open"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"isMobile":[4,"is-mobile"],"shippingAddress":[16],"billingAddress":[16],"translatedShippingAddress":[16],"translatedBillingAddress":[16],"showErrorBanner":[32],"translatedShippingAddressState":[32],"translatedBillingAddressState":[32]},null,{"translatedShippingAddress":["watchTranslatedShippingAddress"],"translatedBillingAddress":["watchTranslatedBillingAddress"]}],[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-checkbox",{"backgroundColor":[1,"background-color"],"label":[1],"isChecked":[4,"is-checked"],"isDisabled":[4,"is-disabled"],"size":[2],"fontSize":[1,"font-size"],"borderStyle":[1,"border-style"]},[[1,"click","onClick"]]],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"defaultEmail":[1,"default-email"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"minHeight":[1,"min-height"],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"],[4,"keydown","handleKeyDown"]]],[1,"zonos-address-display",{"currentAddress":[16],"addressType":[1,"address-type"]}],[1,"zonos-address-form",{"currentAddress":[16],"translatedAddress":[16],"addressType":[1,"address-type"],"localAddress":[32]},null,{"translatedAddress":["watchCurrentAddress"]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32],"iframe":[32]}]]],["zonos-cart-items_11",[[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"isMobile":[4,"is-mobile"],"defaultAddress":[16],"showErrorBanner":[32],"shippingCountry":[32],"isCheckingForRestrictedItems":[32],"isValidatingAddress":[32],"invalidShippingCharacterList":[32],"invalidBillingCharacterList":[32],"openAddressValidationDialog":[32]}],[1,"zonos-checkout-footer",{"mobile":[4],"dataTheme":[1,"data-theme"],"showLanguageDialog":[32],"isMobile":[32]},[[4,"click","handleGlobalClick"]],{"mobile":["handleMobileChange"]}],[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"showErrorBanner":[32]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"isSelecting":[32],"showErrorBanner":[32],"serviceLevels":[32]}],[1,"zonos-cart-restricted-items",{"hide":[4],"errorImages":[32],"internalCollapsed":[32],"firstRender":[32]}],[1,"zonos-cart-subtotal"],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[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"]]],[1,"zonos-checkout-progress-tabs",{"tabColor":[1,"tab-color"],"backgroundColor":[1,"background-color"],"setTabItems":[64],"setTabSelected":[64]}],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}]]]], options);
 });