@zonos/elements 1.3.5 → 1.3.7-alpha.0

package/dist/esm/getBorderRadius-0c7dfcf0.js

@@ -0,0 +1,20 @@
+import { z as zonosStore } from './zonosStore-dec6bd7e.js';
+
+/**
+ * Get the border radius for the elements based on the style
+ * @param overrideBorderStyle
+ * @returns
+ */
+const getBorderRadius = (overrideBorderStyle, 
+/**
+ * This is the custom round radius for component that 10px is too much for them
+ */
+customRoundRadius = '10px') => {
+    if (overrideBorderStyle) {
+        // If the override is set, use that, otherwise use the default radius style
+        return overrideBorderStyle === 'SHARP' ? '0px' : customRoundRadius;
+    }
+    return zonosStore.appearance.style === 'SHARP' ? '0px' : customRoundRadius;
+};
+
+export { getBorderRadius as g };

package/dist/esm/index.js

@@ -1,6 +1 @@
-export { c as cartStore, a as cartStoreApplySubtotals, b as cartStoreGetShippingTransitInfo, d as cartStoreNextStep, e as cartStorePreviousStep, f as cartStoreReCalculateTotal, g as cartStoreReset, h as cartStoreUpdateItems, i as cartStoreUpdateSelectedShippingOption, j as cartStoreUpdateToErrorState } from './cart-7e7c7585.js';
-import './zonosStore-e59617f8.js';
-import './index-81a199ef.js';
-import './localization-5d83fde2.js';
-import './isDarkColor-8696cb70.js';
-import './getBorderRadius-9e4cb3b1.js';
+

package/dist/esm/{isDarkColor-8696cb70.js → isDarkColor-d0a57fd2.js}

@@ -1,4 +1,4 @@
-import { a as commonjsGlobal } from './zonosStore-e59617f8.js';
+import { a as commonjsGlobal } from './zonosStore-dec6bd7e.js';
 
 var tinycolor$1 = {exports: {}};
 

package/dist/esm/loader.js

@@ -1,9 +1,11 @@
-import { b as bootstrapLazy } from './index-81a199ef.js';
-export { s as setNonce } from './index-81a199ef.js';
+import { b as bootstrapLazy } from './index-b5be4dc3.js';
+export { s as setNonce } from './index-b5be4dc3.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
 
-const defineCustomElements = (win, options) => {
+const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return bootstrapLazy([["zonos-text",[[1,"zonos-text",{"class":[1],"color":[1],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["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],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged"],"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]},[[9,"resize","handleResize"]]]]],["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]}]]],["zonos-component",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-country-flag_4",[[1,"zonos-country-select",{"closeCountrySelect":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}],[1,"zonos-country-flag",{"class":[1],"countryCode":[1,"country-code"],"size":[2]}]]],["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]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification",[[1,"zonos-notification",{"class":[1],"notificationArray":[32],"showNotification":[64]}]]],["zonos-badge",[[1,"zonos-badge",{"bold":[4],"color":[1],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4],"class":[1]}]]],["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],"selectedItem":[32]}]]],["zonos-address_2",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}]]],["zonos-banner",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"class":[1],"hasContent":[32]}]]],["zonos-card_2",[[1,"zonos-card",{"actions":[16],"class":[1],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}],[1,"zonos-v-stack",{"spacing":[2],"class":[1]}]]],["zonos-icon",[[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"color":[1],"content":[1],"size":[2]}]]],["zonos-button_2",[[1,"zonos-button",{"class":[1],"color":[1],"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"],"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],"color":[1]}]]],["zonos-cart-items_10",[[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[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-cart-subtotal"],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"footerRightAction":[16],"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"]]],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32]}],[1,"zonos-logo",{"theme":[1],"width":[1],"class":[1]}]]]], 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],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged"],"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]},[[9,"resize","handleResize"]]]]],["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]}]]],["zonos-component",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-logo",[[1,"zonos-logo",{"theme":[1],"width":[1]}]]],["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],"selectedItem":[32]}]]],["zonos-country-flag",[[1,"zonos-country-flag",{"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-text",[[1,"zonos-text",{"textColor":[1,"text-color"],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-button_3",[[1,"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"],"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-icon",{"autoHeight":[4,"auto-height"],"iconColor":[1,"icon-color"],"content":[1],"size":[2]}],[1,"zonos-spinner",{"size":[2],"spinnerColor":[1,"spinner-color"]}]]],["zonos-select-dialog-header_2",[[1,"zonos-select-dialog-header",{"handleOnClose":[16],"label":[1]}],[1,"zonos-v-stack",{"spacing":[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-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-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-banner",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"hasContent":[32]}]]],["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-address_4",[[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"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32]}]]],["zonos-cart-items_9",[[1,"zonos-checkout-footer",{"showDialog":[32]},[[4,"click","handleGlobalClick"]]],[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[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-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"footerRightAction":[16],"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"]]],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/{submitGtag-776c5e10.js → submitGtag-a38aed23.js}

@@ -1,5 +1,5 @@
-import { z as zonosStore } from './zonosStore-e59617f8.js';
-import { l as log } from './localization-5d83fde2.js';
+import { z as zonosStore } from './zonosStore-dec6bd7e.js';
+import { a as log } from './cart-2a0a6871.js';
 
 /**
  * Submit a gtag event if the gtag function is available.

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

@@ -0,0 +1,294 @@
+import { r as registerInstance, h, H as Host, d as getElement, c as createEvent } from './index-b5be4dc3.js';
+import { s as stripeStore, g as stripeStorePrefetchLandedCost, o as logError, l as localizationStore } from './cart-2a0a6871.js';
+import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
+import { d as zonosStoreFontFamily } from './zonosStore-dec6bd7e.js';
+import { c as classes } from './classes-0d95c529.js';
+import { g as getBorderRadius } from './getBorderRadius-0c7dfcf0.js';
+import { i as isDarkColor } from './isDarkColor-d0a57fd2.js';
+
+const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
+const ZonosAddressStyle0 = zonosAddressCss;
+
+const ZonosAddress = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.type = undefined;
+        this.titleText = undefined;
+        this.defaultAddress = null;
+        this.stripe = window.Zonos.stripe;
+        this.isDirtyAddress = false;
+    }
+    getStripeAddressInstance() {
+        if (this.type === 'billing') {
+            return {
+                stripeAddressElement: stripeStore.stripeBillingAddressElement,
+                stripeAddressEventData: stripeStore.stripeBillingAddressEventData,
+                stripeElements: stripeStore.stripeElementsForBillingAddress,
+            };
+        }
+        return {
+            stripeAddressElement: stripeStore.stripeAddressElement,
+            stripeAddressEventData: stripeStore.stripeAddressEventData,
+            stripeElements: stripeStore.stripeElements,
+        };
+    }
+    updateAddressEventData({ event, type, }) {
+        switch (type) {
+            case 'billing':
+                stripeStore.stripeBillingAddressEventData = event;
+                break;
+            default:
+                stripeStore.stripeAddressEventData = event;
+                break;
+        }
+        // only prefetch if the address type is shipping
+        void stripeStorePrefetchLandedCost();
+    }
+    updateAddressElement({ stripeAddressElement, type, }) {
+        if (type === 'shipping') {
+            stripeStore.stripeAddressElement = stripeAddressElement;
+            return;
+        }
+        stripeStore.stripeBillingAddressElement = stripeAddressElement;
+    }
+    async watchInitStripe() {
+        var _a, _b;
+        this.stripe = window.Zonos.stripe;
+        const { stripeAddressEventData, stripeElements } = this.getStripeAddressInstance();
+        if (!this.stripe || !stripeElements) {
+            logError("Stripe is not initialized. Couldn't load stripe element.");
+            return;
+        }
+        const phone = (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.phone;
+        if (!phone) {
+            // remove phone from default address if it's not provided, stripe
+            // will throw error if key phone exist and its value is empty or 'undefined'.
+            (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
+        }
+        const shippableCountries = localizationStore.shippingZoneCountries;
+        const shippingZone = shippableCountries
+            ? Object.values(shippableCountries).map(country => country.code)
+            : [];
+        const addressElement = stripeElements.create('address', {
+            allowedCountries: this.type === 'shipping' ? shippingZone : [],
+            contacts: this.defaultAddress ? [this.defaultAddress] : [],
+            defaultValues: {
+                address: Object.assign(Object.assign({}, stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address), { country: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
+                        localizationStore.selectedCountryCode ||
+                        'AL' }),
+                firstName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName,
+                lastName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName,
+                phone: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone,
+            },
+            display: {
+                name: 'split',
+            },
+            fields: {
+                phone: 'always',
+            },
+            mode: this.type,
+            validation: {
+                phone: {
+                    required: 'always',
+                },
+            },
+        });
+        addressElement.mount(this.el.querySelector('.zonos--address-component'));
+        addressElement.on('change', event => {
+            const eventValue = event.value;
+            if (!this.isDirtyAddress && eventValue.address.line1.length >= 3) {
+                this.isDirtyAddress = true;
+                // stripe element started with just address line 1, so scroll bar is not yet available. Wait for a moment before scrolling
+                setTimeout(() => {
+                    // scroll directly into view if it's mobile
+                    if (isCheckoutMobile()) {
+                        this.el.scrollIntoView({ behavior: 'smooth', block: 'end' });
+                    }
+                    else {
+                        // scroll into the end of the page so the address placeholder won't be hidden
+                        const yOffset = this.type === 'shipping' ? 100 : 600;
+                        const parentWrapper = this.el.closest('.zonos--group');
+                        const y = this.el.getBoundingClientRect().top + yOffset;
+                        parentWrapper === null || parentWrapper === void 0 ? void 0 : parentWrapper.scrollTo({ behavior: 'smooth', top: y });
+                    }
+                }, 600);
+            }
+            this.updateAddressEventData({
+                event: Object.assign(Object.assign({}, event), { elementMode: this.type, elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) }),
+                type: this.type,
+            });
+        });
+        this.updateAddressElement({
+            stripeAddressElement: addressElement,
+            type: this.type,
+        });
+    }
+    disconnectedCallback() {
+        // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
+        const stripeElement = this.getStripeAddressInstance().stripeAddressElement;
+        stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.destroy();
+    }
+    componentDidLoad() {
+        const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
+        this.isDirtyAddress =
+            !!stripeAddressEventData &&
+                stripeAddressEventData.value.address.line1.length > 0;
+        // @Watch doesn't get trigger on initial load
+        void this.watchInitStripe();
+    }
+    render() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { key: 'b2aa1ee3f16ae4ebcce83b599c97aa80f09dc9d3', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'e37392d0add0ab8541f78131abdf9082fd2455b4', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd28d1908ee2f525455b0680e25cff3040093ad74', class: "zonos--address-component" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "stripe": ["watchInitStripe"]
+    }; }
+};
+ZonosAddress.style = ZonosAddressStyle0;
+
+const colorPrefixes = [
+    'blue',
+    'cyan',
+    'green',
+    'orange',
+    'purple',
+    'red',
+    'gray',
+    'glass',
+];
+
+const zonosCheckboxCss = ":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 label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:var(--amino-space-8);-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(--size);width:var(--size);background-color:transparent;border:1.5px solid var(--amino-gray-400);position:relative;border-radius:var(--border-radius, var(--amino-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;-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(--background-color);border-radius:var(--border-radius, var(--amino-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
+const ZonosCheckboxStyle0 = zonosCheckboxCss;
+
+const ZonosCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.checkboxSelected = createEvent(this, "checkboxSelected", 7);
+        this.backgroundColor = 'blue';
+        this.label = undefined;
+        this.isChecked = false;
+        this.isDisabled = false;
+        this.size = 12;
+        this.fontSize = 'base';
+        this.borderStyle = undefined;
+    }
+    render() {
+        const isBackgroundVariable = colorPrefixes.includes(this.backgroundColor);
+        const backgroundColor = isBackgroundVariable
+            ? `var(--amino-${this.backgroundColor}-600)`
+            : this.backgroundColor;
+        const checkmarkColor = isBackgroundVariable
+            ? // use lighter color if the color is amino variable
+                `var(--amino-${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(backgroundColor)
+                    ? 'var(--amino-gray-800)'
+                    : 'var(--amino-gray-0)';
+        const borderStyle = getBorderRadius(this.borderStyle, '4px');
+        return (h(Host, { key: '86ab50028bec3f6a230b3a9492d06c1b2ce250fe', class: classes(['zonos--elements zonos--checkbox']), style: {
+                '--background-color': backgroundColor,
+                '--border-radius': borderStyle,
+                '--font-family': zonosStoreFontFamily(),
+                '--size': `${this.size}px`,
+            } }, h("label", { key: '88e87bb45739707a4e3da6d378ba491899dad76c', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c877ba4a2bd43aa67c394136ef4b3c71096e75aa', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+                this.checkboxSelected.emit(e.target.checked);
+            }, type: "checkbox" }), h("span", { key: '0f40603a3cf90c38f37b05d7bfd8ed54623b07f4', class: "checkmark-container" }, h("svg", { key: '67945bb82cc05997bb40aeef14c5c0fd452a68af', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac2d1db7ba5c1578dbe59f4ca9755a409ab24546', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { size: this.fontSize }, this.label)))));
+    }
+};
+ZonosCheckbox.style = ZonosCheckboxStyle0;
+
+const zonosCollapseCss = ":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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
+const ZonosCollapseStyle0 = zonosCollapseCss;
+
+const ZonosCollapse = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.collapsed = false;
+        this.collapseSize = 0;
+        this.height = this.el.scrollHeight;
+    }
+    getElementHeight() {
+        const fullHeight = `${this.height}px`;
+        const collapsedHeight = `${this.collapseSize}px`;
+        return this.collapsed ? collapsedHeight : fullHeight;
+    }
+    componentDidLoad() {
+        this.height = this.el.scrollHeight;
+    }
+    componentDidRender() {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
+            this.height = this.el.scrollHeight;
+        });
+    }
+    render() {
+        this.height = this.el.scrollHeight;
+        if (!this.collapsed) {
+            // wait for the collapse animation to finish, then set overflow to visible
+            setTimeout(() => {
+                // if the element collapsed state is still not changed, set overflow to visible
+                if (!this.collapsed) {
+                    this.el.style.overflow = 'visible';
+                }
+            }, 300);
+        }
+        else {
+            // set overflow to hidden to prevent content from showing when collapsed
+            this.el.style.overflow = 'hidden';
+        }
+        return (h(Host, { key: 'cbec79617b603172a6c3c41d29ee093f61eead92', class: 'zonos--elements zonos--collapse', style: {
+                '--font-family': zonosStoreFontFamily(),
+                height: this.getElementHeight(),
+            } }, h("div", { key: '6e72b98c155ee436bbaabce3d7b58294bb6ccc7a' }, h("iframe", { key: 'ef3306219530d635fa320099727a3574d5800285', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'a66b3d6d08a12f0c184a5c4294afdb2c340fe95d' }))));
+    }
+    get el() { return getElement(this); }
+};
+ZonosCollapse.style = ZonosCollapseStyle0;
+
+const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";
+const ZonosLinkAuthenticationStyle0 = zonosLinkAuthenticationCss;
+
+const ZonosLinkAuthentication = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.titleText = undefined;
+        this.stripe = stripeStore.stripe;
+    }
+    watchInitStripe() {
+        if (!this.stripe || !stripeStore.stripeElements) {
+            return;
+        }
+        // Create and mount the Authentication Element in ${type} mode
+        const linkAuthenticationElement = stripeStore.stripeLinkElement ||
+            stripeStore.stripeElements.create('linkAuthentication');
+        const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
+        if (!linkAuthenticationElementContainer) {
+            // eslint-disable-next-line no-console
+            console.error('Cannot find container element for linkAuthenticationElement');
+            return;
+        }
+        linkAuthenticationElement.mount(linkAuthenticationElementContainer);
+        linkAuthenticationElement.on('change', event => {
+            stripeStore.stripeLinkEventData = event;
+            // run prefetch landed cost when address is changed
+            void stripeStorePrefetchLandedCost();
+        });
+        stripeStore.stripeLinkElement = linkAuthenticationElement;
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        this.watchInitStripe();
+    }
+    render() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { key: 'aec893e026a60bcbf81e93a3c63a842f97437dcc', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '93c2c462d3a108364d2dfbc4aeab058f87bcc7b3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '0098e20d87cce7547fc1abf26859c0d3765407cd', class: "zonos--link-authentication-component" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "stripe": ["watchInitStripe"]
+    }; }
+};
+ZonosLinkAuthentication.style = ZonosLinkAuthenticationStyle0;
+
+export { ZonosAddress as zonos_address, ZonosCheckbox as zonos_checkbox, ZonosCollapse as zonos_collapse, ZonosLinkAuthentication as zonos_link_authentication };

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

@@ -0,0 +1,52 @@
+import { r as registerInstance, h, H as Host } from './index-b5be4dc3.js';
+import { d as zonosStoreFontFamily } from './zonosStore-dec6bd7e.js';
+import { c as classes } from './classes-0d95c529.js';
+
+const zonosBadgeCss = ":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 .zonos--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";
+const ZonosBadgeStyle0 = zonosBadgeCss;
+
+const ZonosBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bold = false;
+        this.badgeColor = 'gray';
+        this.icon = undefined;
+        this.iconRight = false;
+        this.size = 'default';
+        this.rounded = false;
+    }
+    render() {
+        return (h(Host, { key: '0f502b63322730f508fd7c92f231573b1dfbfd6b', class: classes(['zonos--elements zonos--badge']), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '4ee3f0b623067625ddd79336a1854f5ab796b3b1', class: classes([
+                'zonos--badge-content',
+                this.badgeColor,
+                this.rounded && 'rounded',
+                this.iconRight && 'icon-right',
+                this.size,
+                this.bold && 'bold',
+            ]) }, this.icon, h("zonos-text", { key: 'e5bdf974408416811f7666fc453ca47db58fa43f' }, h("slot", { key: 'd953b60fefe2c25aea529b9de41938cfd96a285b' })))));
+    }
+};
+ZonosBadge.style = ZonosBadgeStyle0;
+
+const zonosTooltipCss = ":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--tooltip{position:relative}:host .zonos--tooltip .zonos--tooltip-content{position:absolute;bottom:100%;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:var(--amino-space-12);background-color:var(--amino-gray-1200);opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--amino-radius-4);z-index:100;-webkit-box-shadow:var(--amino-v3-shadow-large);box-shadow:var(--amino-v3-shadow-large)}:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
+const ZonosTooltipStyle0 = zonosTooltipCss;
+
+const ZonosTooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.label = '';
+        this.subtitle = '';
+        this.showTooltip = false;
+    }
+    render() {
+        return (h(Host, { key: '684561bebf9385c7e6bcca7de37e7ee5084c9692', class: "zonos--elements" }, h("div", { key: 'c116738f39d25b856b268ece410a33f91046c739', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '4073ed0766b4efaa0c25fa7febdbad4c42714dca' }), h("div", { key: '8c6b180577830aaaceb629819535dd930fc49e02', class: classes([
+                this.showTooltip && 'zonos--show-tooltip',
+                'zonos--tooltip-content',
+            ]) }, h("zonos-text", { key: '7c018a9d5a7db939b59624dcc77029a5a8d621af', color: "gray-0", size: "s", type: "boldLabel" }, this.label), h("zonos-text", { key: 'c1f09eaf9cb1084ecf47334903b9ca8b944502b7', color: "gray-0", size: "xs" }, this.subtitle)))));
+    }
+};
+ZonosTooltip.style = ZonosTooltipStyle0;
+
+export { ZonosBadge as zonos_badge, ZonosTooltip as zonos_tooltip };

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-81a199ef.js';
-import { d as zonosStoreFontFamily } from './zonosStore-e59617f8.js';
+import { r as registerInstance, h, H as Host } from './index-b5be4dc3.js';
+import { d as zonosStoreFontFamily } from './zonosStore-dec6bd7e.js';
 import { c as classes } from './classes-0d95c529.js';
 
 const zonosBannerCss = ":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{border-radius:var(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:var(--amino-space-0);grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:var(--amino-space-4)}:host(.info){background-color:var(--amino-blue-100);border:1px solid var(--amino-blue-200)}:host(.success){background-color:var(--amino-green-100);border:1px solid var(--amino-green-200)}:host(.error){background-color:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host(.warning){background-color:var(--amino-orange-100);border:1px solid var(--amino-orange-200)}";
@@ -16,7 +16,6 @@ const ZonosBanner = class {
         };
         this.bannerTitle = undefined;
         this.intent = undefined;
-        this.class = '';
         this.hasContent = false;
     }
     render() {
@@ -28,13 +27,9 @@ const ZonosBanner = class {
                 h("slot", { onSlotchange: this.handleSlotChange }),
             ].filter(Boolean);
             const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
-            return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { color: textColor }, content)))));
+            return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { textColor: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { textColor: textColor }, content)))));
         };
-        const baseClass = classes([
-            'zonos--elements zonos--banner',
-            this.class,
-            this.intent,
-        ]);
+        const baseClass = classes(['zonos--elements zonos--banner', this.intent]);
         const font = zonosStoreFontFamily();
         switch (this.intent) {
             case 'error':