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

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-restricted-items/zonos-cart-restricted-items.js

@@ -0,0 +1,101 @@
+import { getAssetPath, h, Host } from "@stencil/core";
+import { cartStore, cartStoreHasOneEligibleItem, } from "../../../store/checkout/cart";
+import { translate } from "../../../store/translationStore";
+import { classes } from "../../../utils/classes";
+import { formatCurrency } from "../../../utils/formatCurrency";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
+export class ZonosCartRestrictedItems {
+    constructor() {
+        this.hide = false;
+        this.errorImages = [];
+        this.internalCollapsed = true;
+        this.firstRender = true;
+    }
+    componentDidLoad() {
+        // Reset if it's first render
+        this.firstRender = true;
+    }
+    render() {
+        var _a;
+        const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
+        const rate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
+        const restrictedItemTotal = cartStore.restrictedItems.length;
+        if (this.hide || restrictedItemTotal === 0) {
+            // show nothing if the parent is collapsed or no restricted items
+            return null;
+        }
+        if (this.firstRender) {
+            // Auto expand if all items are restricted
+            this.internalCollapsed = cartStoreHasOneEligibleItem();
+            this.firstRender = false;
+        }
+        return (h(Host, { class: classes([
+                'zonos--cart-restricted-items',
+                'zonos--elements',
+                this.internalCollapsed && 'collapsed',
+            ]) }, h("button", { class: classes([
+                'zonos--cart-title-collapse-trigger',
+                this.internalCollapsed && 'collapsed',
+            ]), onClick: () => {
+                this.internalCollapsed = !this.internalCollapsed;
+            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { textColor: "red-600", type: "label" }, `${translate(this.internalCollapsed ? 'Show' : 'Hide')} ${restrictedItemTotal} ${translate('restricted items')}`), h("zonos-icon", { content: ChevronUpIcon, iconColor: "red-600" }))), h("zonos-collapse", { collapsed: this.internalCollapsed }, h("zonos-banner", { bannerTitle: translate('The following items are unable to be shipped to your country and are not included in your cart total.'), intent: "error" }), h("table", { class: "zonos--cart-table" }, h("tbody", null, cartStore.restrictedItems.map((item, index) => {
+            var _a, _b;
+            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: 
+                // Use matched item name if available
+                ((_a = item.matchedItem) === null || _a === void 0 ? void 0 : _a.name) ||
+                    item.name ||
+                    `Restricted item ${index + 1}`, onError: () => {
+                    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({
+                amount: item.amount * item.quantity * rate,
+                currency: cartStore.currency,
+            })))));
+        }))))));
+    }
+    static get is() { return "zonos-cart-restricted-items"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-cart-restricted-items.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-cart-restricted-items.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "hide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This is to hide the section when the parent collapse on mobile"
+                },
+                "attribute": "hide",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "errorImages": {},
+            "internalCollapsed": {},
+            "firstRender": {}
+        };
+    }
+}

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

@@ -1,5 +1,5 @@
 import { Fragment, h, Host } from "@stencil/core";
-import { cartStore } from "../../../store/checkout/cart";
+import { cartStore, cartStoreHasOneEligibleItem, } from "../../../store/checkout/cart";
 import { translate } from "../../../store/translationStore";
 import { formatCurrency } from "../../../utils/formatCurrency";
 // These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested
@@ -8,6 +8,9 @@ import InfoIcon from "./assets/InfoIcon.svg";
 export class ZonosCartSubtotal {
     render() {
         const showDutyTaxesInfo = cartStore.step === 'payment' || cartStore.step === 'shipping';
+        // Show 0 for subtotal and total when all items are restricted
+        const total = cartStoreHasOneEligibleItem() ? cartStore.total : 0;
+        const subtotal = cartStoreHasOneEligibleItem() ? cartStore.subtotal : 0;
         const renderShippingInfo = () => {
             if (!cartStore.selectedShippingOption) {
                 return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Shipping')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('No shipping method selected'))));
@@ -15,7 +18,7 @@ export class ZonosCartSubtotal {
             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({
-            amount: cartStore.subtotal,
+            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({
@@ -28,7 +31,7 @@ export class ZonosCartSubtotal {
                 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({
-            amount: cartStore.total,
+            amount: total,
             currency: cartStore.currency,
         })))))));
     }

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

@@ -68,6 +68,9 @@
 :host zonos-button {
   box-shadow: 0 0 1px 0 var(--zonos-elements-gray-600);
 }
+:host zonos-button {
+  box-shadow: 0 0 1px 0 var(--zonos-elements-gray-600);
+}
 :host .zonos--group-btn {
   position: sticky;
   display: flex;

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

@@ -161,7 +161,7 @@
 @media (max-width: 768px) {
   :host(.mobile) .zonos--content .zonos--left,
   :host(.mobile) .zonos--content .zonos--right {
-    padding-bottom: 0px;
+    padding-bottom: 0;
   }
 }
 :host(.mobile) .zonos--content .zonos--left {

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

@@ -68,6 +68,7 @@ export class ZonosCheckout {
         this.domesticRedirectedBtnSelector = '#zonos--domestic-redirected-checkout-button';
         this.legacyCheckoutHiddenBtnSelector = '#legacy-checkout-hidden-button';
         this.isLegacyCheckout = false;
+        this.confirmDialogOpen = false;
     }
     /**
      * Init cart info handler event
@@ -76,10 +77,27 @@ export class ZonosCheckout {
         const cartItems = e.detail;
         void cartStoreUpdateItems(cartItems);
     }
+    async handleKeyPress(e) {
+        if (e.key === 'Escape') {
+            void this.closeDialogHandler();
+        }
+    }
     /**
      * Close dialog action
      */
-    async closeDialogHandler() {
+    async closeDialogHandler(props) {
+        var _a, _b;
+        if (!this.open) {
+            // Do nothing if the checkout is not even open
+            return;
+        }
+        // Only proceed when user select confirmed.
+        if (!(props === null || props === void 0 ? void 0 : props.confirmed)) {
+            this.confirmDialogOpen = true;
+            return;
+        }
+        // Close the confirm dialog
+        this.confirmDialogOpen = false;
         submitGtag('zonos-checkout-close');
         this.open = this.forceDialogOpen || false;
         if (!this.preview && cartStore.step === 'finish') {
@@ -90,6 +108,10 @@ export class ZonosCheckout {
         cartStore.step = 'customer-info';
         // reset the tab item, so that user needs to click on Continue button to re-quote the landed cost if needed.
         cartStoreResetTabItems();
+        /**
+         * Trigger callback when the checkout is closed
+         */
+        (_b = (_a = zonosStore.checkoutSettings).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     async buildCartAndInit() {
         // if tempCartUUID is provided, use it instead of buildCartDetail
@@ -480,7 +502,7 @@ export class ZonosCheckout {
                 } }), h("zonos-collapse", {
                 // only collapsible on mobile
                 collapsed: this.collapseReviewMobile && this.isMobile
-            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), !this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
+            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), h("zonos-cart-restricted-items", null), !this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
                     ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), h("zonos-checkout-footer", { "data-theme": rightSideTheme, mobile: this.isMobile,
                 /**
                  * For this component, use slot instead of passing JSX through prop of other component. Because
@@ -494,7 +516,11 @@ export class ZonosCheckout {
                 hasFooter && 'has-footer',
                 this.preview && 'preview',
                 this.isMobile && 'mobile',
-            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent()))));
+            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-confirm-dialog", { dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
+                this.confirmDialogOpen = false;
+            },
+            // Mark user selected confirm to close the dialog
+            onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) })));
     }
     static get is() { return "zonos-checkout"; }
     static get encapsulation() { return "scoped"; }
@@ -627,15 +653,20 @@ export class ZonosCheckout {
             "storybookPaymentStatusOverride": {},
             "domesticRedirectedBtnSelector": {},
             "legacyCheckoutHiddenBtnSelector": {},
-            "isLegacyCheckout": {}
+            "isLegacyCheckout": {},
+            "confirmDialogOpen": {}
         };
     }
     static get methods() {
         return {
             "closeDialogHandler": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(props?: { confirmed: boolean; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "props",
+                            "type": "{ confirmed: boolean; } | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -717,6 +748,12 @@ export class ZonosCheckout {
                 "target": "body",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyPress",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "resize",
                 "method": "handleWindowResize",

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

@@ -115,6 +115,8 @@ export class ZonosCustomerInfo {
         this.isMobile = false;
         this.defaultAddress = null;
         this.showErrorBanner = false;
+        this.shippingCountry = '';
+        this.isCheckingForRestrictedItems = false;
         this.isValidatingAddress = false;
         this.invalidShippingCharacterList = null;
         this.invalidBillingCharacterList = null;
@@ -146,10 +148,22 @@ export class ZonosCustomerInfo {
         return invalidList;
     }
     render() {
-        var _a;
+        var _a, _b;
         if (!stripeStore.stripeElements) {
             return null;
         }
+        // init the shipping country when shipping address is available
+        if (!this.shippingCountry && stripeStore.stripeAddressEventData) {
+            this.shippingCountry =
+                (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        }
+        if (stripeStore.stripeAddressEventData &&
+            this.shippingCountry !==
+                stripeStore.stripeAddressEventData.value.address.country) {
+            // reset the shipping country if it's different from the current shipping address
+            this.shippingCountry =
+                stripeStore.stripeAddressEventData.value.address.country;
+        }
         const showBilling = !stripeStore.stripeShippingSameAsBilling;
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(zonosStore.appearance.theme);
@@ -157,7 +171,7 @@ export class ZonosCustomerInfo {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.email, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: (_b = this.defaultAddress) === null || _b === void 0 ? void 0 : _b.email, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
             } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Billing address'), type: "billing" })), 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
@@ -288,6 +302,8 @@ export class ZonosCustomerInfo {
     static get states() {
         return {
             "showErrorBanner": {},
+            "shippingCountry": {},
+            "isCheckingForRestrictedItems": {},
             "isValidatingAddress": {},
             "invalidShippingCharacterList": {},
             "invalidBillingCharacterList": {},

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { cartStore } from "../../../store/checkout/cart";
+import { cartStore, cartStoreHasOneEligibleItem, } from "../../../store/checkout/cart";
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { isCheckoutMobile } from "../../../utils/checkout/isCheckoutMobile";
@@ -23,6 +23,7 @@ export class ZonosReview {
         this.isMobile = isCheckoutMobile(this.mobile);
     }
     render() {
+        const total = cartStoreHasOneEligibleItem() ? cartStore.total : 0;
         const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
         const totalTextType = this.isMobile
             ? 'boldSubheader'
@@ -42,7 +43,7 @@ export class ZonosReview {
                 '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({
-            amount: cartStore.total,
+            amount: total,
             currency: cartStore.currency,
         })))));
     }

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,125 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .zonos--backdrop,
+:host .zonos--confirm-layout {
+  opacity: 0;
+  z-index: -999;
+  visibility: hidden;
+  transition: opacity 0.3s, visibility 0.3s;
+}
+:host .zonos--backdrop {
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  background: var(--zonos-elements-backdrop-color);
+  position: fixed;
+}
+:host .zonos--confirm-layout {
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--zonos-elements-text-color);
+}
+:host .zonos--confirm-dialog {
+  position: relative;
+  background: var(--zonos-elements-gray-0);
+  max-width: 90vw;
+  max-height: 90vh;
+  width: 350px;
+  border-radius: var(--border-radius, 10px);
+  outline: none;
+  box-shadow: var(--zonos-elements-v3-shadow-xxl);
+  border: var(--zonos-elements-border);
+  display: flex;
+  flex-direction: column;
+}
+:host .wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  gap: 24px;
+}
+:host .icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  background: var(--zonos-elements-blue-100);
+}
+:host .warn .icon-wrapper {
+  background: var(--zonos-elements-orange-100);
+}
+:host .danger .icon-wrapper {
+  background: var(--zonos-elements-red-100);
+}
+:host .footer {
+  display: flex;
+  width: 100%;
+  gap: 8px;
+}
+:host .footer zonos-button {
+  flex: 1;
+}
+:host .content {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+}
+:host .content zonos-text {
+  text-align: center;
+}
+
+:host(.open) .zonos--confirm-layout,
+:host(.open) .zonos--backdrop {
+  visibility: visible;
+}
+:host(.open) .zonos--backdrop {
+  z-index: 10003;
+  opacity: 0.65;
+}
+:host(.open) .zonos--confirm-layout {
+  opacity: 1;
+  z-index: 10004;
+  transform: scale(1);
+}