@zonos/elements 1.3.249 → 1.3.251

package/dist/cjs/{paypal-6acca678.js → paypal-c61ef042.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-f5a61112.js');
-const cart = require('./cart-eca56521.js');
-const localization = require('./localization-878ef681.js');
+const cart = require('./cart-77640463.js');
+const localization = require('./localization-be7afc1b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const isContrastColor = require('./isContrastColor-d1936a5c.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
@@ -365,6 +365,33 @@ const paypalButtonOptions = ({ checkoutSessionId, onPaypalFail, onPaypalSessionD
                 if (cart.cartStore.inventoryCheckErrorMessage) {
                     return '';
                 }
+                // Apply store credit if customer has selected an amount
+                const storeCreditAmount = cart.storeCreditStoreGetEffectiveAmount();
+                if (storeCreditAmount > 0) {
+                    const storeCreditResult = await cart.storeCreditStoreApplyCredit();
+                    if (!storeCreditResult.success) {
+                        paypalStore.paypalErrorMessage =
+                            storeCreditResult.error ||
+                                localization.translate('Unable to apply store credit. Please try again.');
+                        onPaypalFail === null || onPaypalFail === void 0 ? void 0 : onPaypalFail();
+                        return '';
+                    }
+                }
+                // If store credit covers the full order, create order directly
+                if (cart.storeCreditStoreCoversFullAmount()) {
+                    const orderResult = await cart.storeCreditStoreCreateOrder();
+                    if (!orderResult.success) {
+                        paypalStore.paypalErrorMessage =
+                            orderResult.error ||
+                                localization.translate('Unable to place order with store credit. Please try again.');
+                        onPaypalFail === null || onPaypalFail === void 0 ? void 0 : onPaypalFail();
+                        return '';
+                    }
+                    onPaypalSessionDone === null || onPaypalSessionDone === void 0 ? void 0 : onPaypalSessionDone({ orderId: orderResult.orderId || '' });
+                    cart.cartStoreNextStep();
+                    cart.cartStoreClearCheckoutInterval();
+                    return '';
+                }
                 const paypalOrderId = await paypalStoreCreaterOrder({
                     checkoutSessionId,
                 });

package/dist/cjs/{placeTestOrder-f1c1e939.js → placeTestOrder-0f7477c8.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const cart = require('./cart-eca56521.js');
-const localization = require('./localization-878ef681.js');
+const cart = require('./cart-77640463.js');
+const localization = require('./localization-be7afc1b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 
 const placeTestOrder = async () => {

package/dist/cjs/{renderCheckoutCurrency-d9590e81.js → renderCheckoutCurrency-1ac02803.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const cart = require('./cart-eca56521.js');
-const localization = require('./localization-878ef681.js');
+const cart = require('./cart-77640463.js');
+const localization = require('./localization-be7afc1b.js');
 
 const getDisplayCurrency = () => {
     var _a, _b;

package/dist/cjs/{zonos-address-display_9.cjs.entry.js → zonos-address-display_8.cjs.entry.js}

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const localization = require('./localization-878ef681.js');
+const localization = require('./localization-be7afc1b.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
-const cart = require('./cart-eca56521.js');
+const cart = require('./cart-77640463.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-27a74844.js');
 const zonosStore = require('./zonosStore-f5a61112.js');
 const RemoveIcon$2 = require('./RemoveIcon-081ac073.js');
-const isDarkColor = require('./isDarkColor-a68abf7a.js');
 const throttle = require('./throttle-ff483793.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-b8abf6de.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const TaxId = require('./TaxId-12acedde.js');
 const helpers = require('./helpers-5bdbb68c.js');
+const isDarkColor = require('./isDarkColor-a68abf7a.js');
 require('./debounce-0c75ba33.js');
 require('./ShortAddressCode-bec338b0.js');
 
@@ -379,81 +379,6 @@ const ZonosAddressUpdateDialog = class {
 };
 ZonosAddressUpdateDialog.style = ZonosAddressUpdateDialogStyle0;
 
-const colorPrefixes = [
-    'blue',
-    'cyan',
-    'green',
-    'orange',
-    'purple',
-    'red',
-    'gray',
-    'glass',
-];
-
-const zonosCheckboxCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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;cursor:pointer}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:8px;-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--zonos--size);width:var(--zonos--size);background-color:transparent;border:1.5px solid var(--zonos-elements-gray-400);position:relative;border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;width:calc(100% + 3px);-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--zonos--background-color);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
-const ZonosCheckboxStyle0 = zonosCheckboxCss;
-
-let inputId$1 = 0;
-const ZonosCheckbox = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.checkboxSelected = index.createEvent(this, "checkboxSelected", 7);
-        this.inputId = `zonos--checkbox-${++inputId$1}`;
-        /**
-         * background color of the checkbox
-         */
-        this.backgroundColor = 'blue';
-        /**
-         * Whether or not the checkbox is checked
-         */
-        this.isChecked = false;
-        /**
-         * Whether or not the checkbox is disabled
-         */
-        this.isDisabled = false;
-        /**
-         * Size of the checkbox
-         */
-        this.size = 12;
-        /**
-         * Font size of the checkbox text
-         */
-        this.fontSize = 'base';
-    }
-    onClick() {
-        if (this.isDisabled) {
-            return;
-        }
-        this.checkboxSelected.emit(!this.isChecked);
-    }
-    render() {
-        const isBackgroundVariable = colorPrefixes.includes(this.backgroundColor);
-        const backgroundColor = isBackgroundVariable
-            ? `var(--zonos-elements-${this.backgroundColor}-600)`
-            : this.backgroundColor;
-        const checkmarkColor = isBackgroundVariable
-            ? // use lighter color if the color is amino variable
-                `var(--zonos-elements-${this.backgroundColor}-200)`
-            : // if it's not an amino variable, use white if the background is dark, and dark if the background is light
-                !isDarkColor.isDarkColor(backgroundColor)
-                    ? 'var(--zonos-elements-gray-800)'
-                    : 'var(--zonos-elements-gray-0)';
-        const borderStyle = getBorderRadius.getBorderRadius({
-            customRoundRadius: '4px',
-            overrideBorderStyle: this.borderStyle,
-        });
-        return (index.h(index.Host, { key: 'c2a9023becafd6d19ad769d449383924c85c641f', class: classes.classes(['zonos--elements zonos--checkbox']), style: {
-                '--zonos--background-color': backgroundColor,
-                '--zonos--border-radius': borderStyle,
-                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-                '--zonos--size': `${this.size}px`,
-            } }, index.h("label", { key: '352e8bda93f1ac9a7a55ba7038e922626c3a9594', class: classes.classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, index.h("input", { key: '71d664f9d83345ad4c143f71209bdb0a2cb16745', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
-                this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), index.h("span", { key: 'c772c4e8dbbbef8035874616a0254fb4114a97c8', class: "checkmark-container" }, index.h("svg", { key: 'd497191975edeca268cc014431535f4befdd7b2c', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '15b26fdf72a058e81d4472d0c757a725c04e3f47', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (index.h("zonos-text", { key: '2d6015d16eda08dc39eff677f4858d2aed620891', size: this.fontSize }, this.label)))));
-    }
-};
-ZonosCheckbox.style = ZonosCheckboxStyle0;
-
 const isValidZip = ({ countryFields, zip, }) => {
     if (!countryFields) {
         return true;
@@ -7422,7 +7347,6 @@ exports.zonos_address_display = ZonosAddressDisplay;
 exports.zonos_address_form = ZonosAddressForm;
 exports.zonos_address_suggestions = ZonosAddressSuggestions;
 exports.zonos_address_update_dialog = ZonosAddressUpdateDialog;
-exports.zonos_checkbox = ZonosCheckbox;
 exports.zonos_custom_address = ZonosAddress;
 exports.zonos_dialog = ZonosDialog;
 exports.zonos_stripe_phone_input = ZonosStripePhoneInput;

package/dist/cjs/zonos-address_4.cjs.entry.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
 const throttle = require('./throttle-ff483793.js');
-const cart = require('./cart-eca56521.js');
-const localization = require('./localization-878ef681.js');
+const cart = require('./cart-77640463.js');
+const localization = require('./localization-be7afc1b.js');
 const zonosStore = require('./zonosStore-f5a61112.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-b8abf6de.js');

package/dist/cjs/zonos-card_5.cjs.entry.js

@@ -6,10 +6,10 @@ const index = require('./index-b1f95d96.js');
 const zonosStore = require('./zonosStore-f5a61112.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-27a74844.js');
-const cart = require('./cart-eca56521.js');
-const localization = require('./localization-878ef681.js');
+const cart = require('./cart-77640463.js');
+const localization = require('./localization-be7afc1b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
-const paypal = require('./paypal-6acca678.js');
+const paypal = require('./paypal-c61ef042.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 require('./isDarkColor-a68abf7a.js');
 require('./isContrastColor-d1936a5c.js');

package/dist/cjs/zonos-cart-items_12.cjs.entry.js

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const cart = require('./cart-eca56521.js');
-const localization = require('./localization-878ef681.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-d9590e81.js');
+const cart = require('./cart-77640463.js');
+const localization = require('./localization-be7afc1b.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-1ac02803.js');
 const cleanHtmlMarkdown = require('./cleanHtmlMarkdown-31da84b7.js');
 const classes = require('./classes-b7918f56.js');
 const zonosStore = require('./zonosStore-f5a61112.js');
-const hasInclusivePrice = require('./hasInclusivePrice-e7d67b45.js');
-const paypal = require('./paypal-6acca678.js');
+const hasInclusivePrice = require('./hasInclusivePrice-e93c64fd.js');
+const paypal = require('./paypal-c61ef042.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
 const getBorderRadius = require('./getBorderRadius-27a74844.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const submitGtag = require('./submitGtag-cb4fb332.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const placeTestOrder = require('./placeTestOrder-f1c1e939.js');
+const placeTestOrder = require('./placeTestOrder-0f7477c8.js');
 const isDarkColor = require('./isDarkColor-a68abf7a.js');
 const getContrastColor = require('./getContrastColor-cc087c53.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
@@ -300,6 +300,9 @@ const ZonosCartSubtotal = class {
             } }), index.h("zonos-button", { loading: this.loading, onClick: () => applyPromoCode(), variant: "primary" }, localization.translate('Apply'))))))), !!cart.cartStore.adjustmentTotal && (index.h("tr", { class: "zonos--row zonos--cart-discount" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("div", { class: "zonos--title-with-icon" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Discounts')))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, renderCheckoutCurrency.renderCheckoutCurrency({
             amount: cart.cartStore.adjustmentTotal,
             isForeign: true,
+        }))))), !!cart.cartStore.storeCredit && (index.h("tr", { class: "zonos--row zonos--cart-store-credit" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Store credit'))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("zonos-text", { textColor: "green-600", type: "semiBoldLabel" }, "-", renderCheckoutCurrency.renderCheckoutCurrency({
+            amount: cart.cartStore.storeCredit,
+            isForeign: true,
         }))))), index.h("tr", { class: "zonos--row zonos--cart-pay-total" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Order total'))), index.h("td", { class: "zonos--column zonos--cart-total-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, renderCheckoutCurrency.renderCheckoutCurrency({
             amount: total,
             isForeign: true,
@@ -730,6 +733,47 @@ const ZonosCheckoutFinish = class {
             paypal.paypalStoreReset();
             localization.storageStore.checkoutSessionId = null;
         };
+        this.checkStoreCreditOrderStatus = async () => {
+            // show success message right away when order id is already created
+            this.isLoading = false;
+            if (cart.storeCreditStore.orderIdCreated) {
+                const checkoutSessionId = localization.storageStore.checkoutSessionId;
+                submitGtag.submitGtag({
+                    event: 'zonos-checkout-success',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: checkoutSessionId || '',
+                    }),
+                });
+                submitGtag.submitGtag({
+                    event: 'purchase',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: checkoutSessionId || '',
+                    }),
+                });
+                void cart.trackConversionEvent({
+                    checkoutSessionId,
+                    eventName: 'checkout_orderCompleted',
+                });
+                this.notificationType = 'success';
+                this.notificationTitle = localization.translate("You're all set!");
+                this.notificationMessages =
+                    cart.stripeStoreMessageBasedOnStatus('succeeded').messages;
+                // override title if notification type is success
+                this.useOverrideSuccessNotification();
+                const successEvent = createCustomEvent.createCustomEvent('zonos-checkout-success', {
+                    message: 'Zonos Checkout successfully processed order',
+                });
+                document.dispatchEvent(successEvent);
+                // wait this to finish before resetting store and checkout session id
+                await this.handleSuccessBehavior();
+            }
+            // reset stores when checkout is finished
+            cart.stripeStoreResetPromoCode();
+            cart.stripeStoreReset();
+            paypal.paypalStoreReset();
+            cart.storeCreditStoreReset();
+            localization.storageStore.checkoutSessionId = null;
+        };
         this.closeClickHandler = () => {
             this.closeClick.emit();
         };
@@ -762,6 +806,9 @@ const ZonosCheckoutFinish = class {
         if (cart.cartStore.isStagingMode) {
             void this.checkStagingOrderStatus();
         }
+        else if (cart.storeCreditStore.orderIdCreated) {
+            void this.checkStoreCreditOrderStatus();
+        }
         else if (paypal.paypalStore.orderIdCreated) {
             void this.checkPaypalPaymentStatus();
         }
@@ -771,11 +818,11 @@ const ZonosCheckoutFinish = class {
     }
     render() {
         const isTestMode = handleFetch.getIsTestMode();
-        return (index.h(index.Host, { key: '80a543fca5dbc63dde41806702b2f6dd4fa849ab', class: "zonos--checkout-finish zonos--elements", style: {
+        return (index.h(index.Host, { key: 'c74f250bac797f8c000bac4892bc5ab56c0867bb', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (index.h("div", { key: '6cab293041902e156563f37db6f0e77caaeeaaf9', class: "zonos--finish-details" }, index.h("div", { key: '6bf32844fa9d38eae6e9f337e56b7918e49bf793', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: 'bf13e59b7bc2380609ffba879fa2b1d8c5d9a9e0', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: 'c246affb94a9799e0c556affb73b2ebfb69a9c7f', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (index.h("zonos-button", { key: '61fa4fa0e09c0ce2905281b2696f42172c7a2bcd',
+            } }, !this.isLoading && (index.h("div", { key: '5ee705381b0246f5035f512c9d19beba6dc33d4f', class: "zonos--finish-details" }, index.h("div", { key: '1d1a54d8f73535aaada32601c5e771c9fd381104', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: '68c898ee87166d08bd52702ae8f9bfe51c393076', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", { key: '98b6eaff782fe34a8dbd258e4c7d0c81c3577bcc', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (index.h("zonos-button", { key: 'ccc5e7973b2e962e22ac56dcad6e33b048621036',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -787,9 +834,9 @@ const ZonosCheckoutFinish = class {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, localization.translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (index.h("zonos-button", { key: '9227d7832ed477be556cb6d59c644a74c293c740', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (index.h("zonos-button", { key: 'cd30bc010f2a3e935d9b80e56389581a9150b021', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cart.cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (index.h("div", { key: '9107be1ef7895b0a5e3fe0a985036a11de7011d3', class: "zonos--finish-button-wrapper" }, index.h("zonos-button", { key: 'b0de8743bea8dd9ac7099bd5b77811f80d80a380', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), index.h("zonos-button", { key: 'f90749b9af4c17eac554efb6d3d12cc41ac6e3c8', onClick: () => {
+            this.notificationType === 'success' && (index.h("div", { key: '458809f316ac5129efbc7fe90d1549c042d477af', class: "zonos--finish-button-wrapper" }, index.h("zonos-button", { key: 'dcf0c595cb119a731c34c1aff09960db8a1fb251', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), index.h("zonos-button", { key: '76d55870370b4906970b3e2109617ba2230eee7e', onClick: () => {
                 const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
                 this.redirectToUrl(isZonosDashboard
                     ? '/orders/all'
@@ -908,7 +955,8 @@ const ZonosCheckoutPayment = class {
          */
         this.continueClickHandler = async ({ currencyCode, }) => {
             var _a, _b;
-            if (!this.handleValidate()) {
+            // Skip Stripe payment validation when store credit covers the full order
+            if (!cart.storeCreditStoreCoversFullAmount() && !this.handleValidate()) {
                 this.showErrorBanner = true;
                 // Attempt to submit the form so the missing input error will be shown in Stripe
                 void ((_a = cart.stripeStore.stripeElements) === null || _a === void 0 ? void 0 : _a.submit());
@@ -999,6 +1047,7 @@ const ZonosCheckoutPayment = class {
         const isTestMode = handleFetch.getIsTestMode();
         const isStagingMode = cart.cartStore.isStagingMode || handleFetch.getIsStagingMode();
         const isPaypalTabSelected = ((_a = cart.stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.value.type) === 'external_paypal';
+        const storeCreditCoversFullOrder = cart.storeCreditStoreCoversFullAmount();
         const renderPayment = () => {
             if (isStagingMode) {
                 const { colorPrimary } = zonosStore.zonosStore.appearance;
@@ -1014,7 +1063,9 @@ const ZonosCheckoutPayment = class {
                     variant: this.submitBtnType }, localization.translate('Place test order')))));
             }
             return (index.h(index.Fragment, null, this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, localization.translate('Missing required fields. Make sure all fields are completed.'))), this.hasStripePaymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, cart.stripeStore.customErrorMessage ||
-                localization.translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypal.paypalStore.paypalErrorMessage && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypal.paypalStore.paypalErrorMessage)), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (index.h(index.Fragment, null, index.h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, isDisabled: this.continueLoading &&
+                localization.translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypal.paypalStore.paypalErrorMessage && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypal.paypalStore.paypalErrorMessage)), cart.cartStore.customerAuthenticationToken &&
+                cart.storeCreditStore.availableBalance != null &&
+                cart.storeCreditStore.availableBalance > 0 && (index.h("zonos-store-credit", null)), storeCreditCoversFullOrder ? (index.h("zonos-banner", { intent: "info" }, localization.translate('Store credit covers your full order'))) : (index.h("zonos-payment", null)), index.h("div", { class: "zonos--group-btn" }, (!isPaypalTabSelected || storeCreditCoversFullOrder) && (index.h(index.Fragment, null, index.h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, isDisabled: this.continueLoading &&
                     cart.stripeStore.checkoutSettlementCurrency === 'USD', loading: this.continueLoading &&
                     cart.stripeStore.checkoutSettlementCurrency !== 'USD', onClick: async () => {
                     if (!cart.cartStore.checkoutSession) {
@@ -1027,22 +1078,25 @@ const ZonosCheckoutPayment = class {
                     });
                 }, size: "lg",
                 // use primary type when on mobile mode
-                variant: this.submitBtnType }, localization.translate('Pay [orderTotal]', {
-                orderTotal: renderCheckoutCurrency.renderCheckoutCurrency({
-                    amount: cart.cartStore.total,
-                    isForeign: true,
-                }),
-            })), cart.stripeStore.shouldRenderPayInUsdButton && (index.h("zonos-button", { class: "zonos--pay-in-base-currency-btn", isDisabled: this.continueLoading &&
+                variant: this.submitBtnType }, storeCreditCoversFullOrder
+                ? localization.translate('Place order')
+                : localization.translate('Pay [orderTotal]', {
+                    orderTotal: renderCheckoutCurrency.renderCheckoutCurrency({
+                        amount: cart.cartStore.total,
+                        isForeign: true,
+                    }),
+                })), !storeCreditCoversFullOrder &&
+                cart.stripeStore.shouldRenderPayInUsdButton && (index.h("zonos-button", { class: "zonos--pay-in-base-currency-btn", isDisabled: this.continueLoading &&
                     cart.stripeStore.checkoutSettlementCurrency !== 'USD', loading: this.continueLoading &&
                     cart.stripeStore.checkoutSettlementCurrency === 'USD', onClick: async () => {
                     await this.continueClickHandler({
                         currencyCode: 'USD',
                     });
-                }, size: "lg", variant: "subtle" }, localization.translate('Click to pay in USD'))))), index.h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+                }, size: "lg", variant: "subtle" }, localization.translate('Click to pay in USD'))))), !storeCreditCoversFullOrder && (index.h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
                     this.paypalSessionDone.emit(orderId);
                 }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
                     display: isPaypalTabSelected ? 'block' : 'none',
-                } })), isTestMode && (index.h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, index.h("zonos-v-stack", { spacing: 16 }, index.h("div", null, index.h("zonos-text", { type: "semiBoldLabel" }, localization.translate('Test cards')), index.h("zonos-text", { textColor: "gray-700" }, localization.translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), index.h("zonos-button", { icon: index.h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, localization.translate('Success'), " (****4242)"), index.h("zonos-button", { icon: index.h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, localization.translate('Failure'), " (****0002)")), index.h("zonos-notification", null)))));
+                } }))), isTestMode && (index.h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, index.h("zonos-v-stack", { spacing: 16 }, index.h("div", null, index.h("zonos-text", { type: "semiBoldLabel" }, localization.translate('Test cards')), index.h("zonos-text", { textColor: "gray-700" }, localization.translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), index.h("zonos-button", { icon: index.h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, localization.translate('Success'), " (****4242)"), index.h("zonos-button", { icon: index.h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, localization.translate('Failure'), " (****0002)")), index.h("zonos-notification", null)))));
         };
         return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Payment method')), renderPayment())));
     }

package/dist/cjs/zonos-checkbox_2.cjs.entry.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b1f95d96.js');
+const zonosStore = require('./zonosStore-f5a61112.js');
+const classes = require('./classes-b7918f56.js');
+const getBorderRadius = require('./getBorderRadius-27a74844.js');
+const isDarkColor = require('./isDarkColor-a68abf7a.js');
+require('./VarianceTest-bec00ea8.js');
+
+const colorPrefixes = [
+    'blue',
+    'cyan',
+    'green',
+    'orange',
+    'purple',
+    'red',
+    'gray',
+    'glass',
+];
+
+const zonosCheckboxCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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;cursor:pointer}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:8px;-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--zonos--size);width:var(--zonos--size);background-color:transparent;border:1.5px solid var(--zonos-elements-gray-400);position:relative;border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;width:calc(100% + 3px);-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--zonos--background-color);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
+const ZonosCheckboxStyle0 = zonosCheckboxCss;
+
+let inputId = 0;
+const ZonosCheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkboxSelected = index.createEvent(this, "checkboxSelected", 7);
+        this.inputId = `zonos--checkbox-${++inputId}`;
+        /**
+         * background color of the checkbox
+         */
+        this.backgroundColor = 'blue';
+        /**
+         * Whether or not the checkbox is checked
+         */
+        this.isChecked = false;
+        /**
+         * Whether or not the checkbox is disabled
+         */
+        this.isDisabled = false;
+        /**
+         * Size of the checkbox
+         */
+        this.size = 12;
+        /**
+         * Font size of the checkbox text
+         */
+        this.fontSize = 'base';
+    }
+    onClick() {
+        if (this.isDisabled) {
+            return;
+        }
+        this.checkboxSelected.emit(!this.isChecked);
+    }
+    render() {
+        const isBackgroundVariable = colorPrefixes.includes(this.backgroundColor);
+        const backgroundColor = isBackgroundVariable
+            ? `var(--zonos-elements-${this.backgroundColor}-600)`
+            : this.backgroundColor;
+        const checkmarkColor = isBackgroundVariable
+            ? // use lighter color if the color is amino variable
+                `var(--zonos-elements-${this.backgroundColor}-200)`
+            : // if it's not an amino variable, use white if the background is dark, and dark if the background is light
+                !isDarkColor.isDarkColor(backgroundColor)
+                    ? 'var(--zonos-elements-gray-800)'
+                    : 'var(--zonos-elements-gray-0)';
+        const borderStyle = getBorderRadius.getBorderRadius({
+            customRoundRadius: '4px',
+            overrideBorderStyle: this.borderStyle,
+        });
+        return (index.h(index.Host, { key: 'c2a9023becafd6d19ad769d449383924c85c641f', class: classes.classes(['zonos--elements zonos--checkbox']), style: {
+                '--zonos--background-color': backgroundColor,
+                '--zonos--border-radius': borderStyle,
+                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
+                '--zonos--size': `${this.size}px`,
+            } }, index.h("label", { key: '352e8bda93f1ac9a7a55ba7038e922626c3a9594', class: classes.classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, index.h("input", { key: '71d664f9d83345ad4c143f71209bdb0a2cb16745', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
+                this.checkboxSelected.emit(e.target.checked);
+            }, type: "checkbox" }), index.h("span", { key: 'c772c4e8dbbbef8035874616a0254fb4114a97c8', class: "checkmark-container" }, index.h("svg", { key: 'd497191975edeca268cc014431535f4befdd7b2c', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '15b26fdf72a058e81d4472d0c757a725c04e3f47', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (index.h("zonos-text", { key: '2d6015d16eda08dc39eff677f4858d2aed620891', size: this.fontSize }, this.label)))));
+    }
+};
+ZonosCheckbox.style = ZonosCheckboxStyle0;
+
+const zonosToggleCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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 .wrapper{position:relative;border-radius:6px;background-color:var(--zonos-elements-gray-50);display:-ms-flexbox;display:flex}:host .zonos--toggle-selected-slider{z-index:1;position:absolute;background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}:host .zonos--option{background:transparent;border:0;z-index:2;cursor:pointer;padding:4px 12px;border-radius:6px;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);font-size:var(--zonos-elements-font-size-base);font-weight:500;color:var(--zonos-elements-text-color-secondary)}:host .zonos--option:focus{outline:none}:host .zonos--option:hover:not(.selected){color:var(--zonos-elements-text-color)}:host .zonos--option.selected{color:var(--zonos-elements-text-color);background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}";
+const ZonosToggleStyle0 = zonosToggleCss;
+
+const ZonosToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggleChanged = index.createEvent(this, "toggleChanged", 7);
+        /**
+         * Options for the toggle
+         */
+        this.options = [];
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e6be1b38ea1fd978a231a1c3dc85a92c1d86a24b', class: classes.classes(['zonos--elements zonos--toggle']), style: {
+                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { key: 'e9ccac29c3f653e3e9d81d336089d6aaea6bbf6c', class: "wrapper" }, this.options.map(option => {
+            const selected = option.value === this.value;
+            return (index.h("button", { class: classes.classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
+                    this.toggleChanged.emit(option.value);
+                } }, option.label));
+        }))));
+    }
+};
+ZonosToggle.style = ZonosToggleStyle0;
+
+exports.zonos_checkbox = ZonosCheckbox;
+exports.zonos_toggle = ZonosToggle;