@zonos/elements 1.3.15-alpha.2 → 1.3.15

package/dist/esm/sendErrorLog-8642e94a.js

@@ -1,26 +0,0 @@
-import { u as handleFetch } from './cart-10bcd2e0.js';
-
-const checkoutBreakpoint = 890;
-const isCheckoutMobile = (isMobile) => {
-    return isMobile || window.innerWidth < checkoutBreakpoint;
-};
-
-const sendErrorLog = async ({ endpoint, errors, metadata }) => {
-    const userAgentData = 'userAgentData' in window.navigator
-        ? // userAgentData is not yet supported in all browsers
-            window.navigator.userAgentData
-        : null;
-    const errorObject = {
-        endpoint,
-        errors,
-        metadata: Object.assign({ href: window.location.href, userAgent: userAgentData && userAgentData.brands.length > 0
-                ? userAgentData
-                : window.navigator.userAgent }, metadata),
-    };
-    void handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/log-error`, {
-        body: errorObject,
-        method: 'POST',
-    });
-};
-
-export { isCheckoutMobile as i, sendErrorLog as s };

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

@@ -1,381 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-0e31d804.js';
-import { k as stripeStore, d as logError, l as localizationStore, t as translate, o as stripeStorePrefetchLandedCost } from './cart-10bcd2e0.js';
-import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-f3eef64b.js';
-import { s as sendErrorLog, i as isCheckoutMobile } from './sendErrorLog-8642e94a.js';
-import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-8129b0cb.js';
-import { i as isDarkColor } from './isDarkColor-7a6d2d14.js';
-
-/**
- * Check if the given address object contains non-latin characters
- * @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
- */
-const containsNonLatinChars = (params) => {
-    const specialCharacters = /[ʼˮ՚ߴߵ']{1}/u;
-    /**
-     * This regex matches any character that is not a latin character, punctuation, symbol, number, separator, control, or mark
-     * I limited the character found to 1 in the regex, so that we can return early if we find any non-latin character
-     **/
-    const nonLatinRegex = /[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;
-    const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) &&
-        // allow special characters like web apostrophe and quotation mark
-        !specialCharacters.test(value)
-        ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
-    return nonLatinValueList;
-};
-
-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)}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:var(--amino-space-8)}";
-const ZonosAddressStyle0 = zonosAddressCss;
-
-const mappedFields = {
-    city: 'City',
-    country: 'Country',
-    line1: 'Address line 1',
-    line2: 'Address line 2',
-    name: 'Name',
-    postal_code: 'Postal code',
-    state: 'State',
-};
-const ZonosAddress = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
-        this.type = undefined;
-        this.titleText = undefined;
-        this.defaultAddress = null;
-        this.stripe = window.Zonos.stripe;
-        this.reportedInvalidCharacters = false;
-        this.invalidCharacterList = null;
-        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;
-        }
-        const invalidCharacterList = this.checkInvalidCharacters(event);
-        this.invalidCharacterList = invalidCharacterList;
-        this.invalidCharacters.emit(!!invalidCharacterList);
-    }
-    updateAddressElement({ stripeAddressElement, type, }) {
-        if (type === 'shipping') {
-            stripeStore.stripeAddressElement = stripeAddressElement;
-            return;
-        }
-        stripeStore.stripeBillingAddressElement = stripeAddressElement;
-    }
-    checkInvalidCharacters(address) {
-        // Do nothing if the allowed character sets is ALL or the address is incomplete
-        if (!address.complete ||
-            zonosStore.checkoutSettings.allowedCharacterSets === 'ALL') {
-            return null;
-        }
-        const { address: addressValue, firstName, lastName, name } = address.value;
-        const { city, country, line1, line2, postal_code, state } = addressValue;
-        const invalidList = containsNonLatinChars({
-            city,
-            country,
-            line1,
-            line2: line2 || '',
-            name: name || `${firstName} ${lastName}`,
-            postal_code,
-            state,
-        });
-        if (!Object.keys(invalidList).length) {
-            return null;
-        }
-        // send error event only once so we know what value is invalid
-        if (!this.reportedInvalidCharacters) {
-            this.reportedInvalidCharacters = true;
-            void sendErrorLog({
-                endpoint: 'NonLatinInput',
-                errors: Object.keys(invalidList).map(fieldName => {
-                    var _a;
-                    if (fieldName !== 'name') {
-                        // trim all number so we don't send sensitive information
-                        const trimmedAddress = (_a = addressValue[fieldName]) === null || _a === void 0 ? void 0 : _a.replace(/[\d\w]+/g, '');
-                        return `Invalid character found ${fieldName}: "${trimmedAddress}"`;
-                    }
-                    const customerName = name || `${firstName} ${lastName}`;
-                    const trimmedName = customerName.replace(/[\d\w]+/g, '');
-                    return `Invalid character found ${fieldName}: "${trimmedName}"`;
-                }),
-                metadata: {},
-            });
-        }
-        return invalidList;
-    }
-    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 : [],
-            // only show the default address if stripeAddressEventData is not provided
-            contacts: this.defaultAddress && !stripeAddressEventData
-                ? [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', value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ')[1] }) }),
-                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();
-        setTimeout(() => {
-            // check if the address contains invalid characters after address is loaded
-            const newStripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
-            if (newStripeAddressEventData) {
-                this.checkInvalidCharacters(newStripeAddressEventData);
-            }
-        }, 500);
-    }
-    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: 'd5100d824d84c5e5b238f4877d489ca1b3f7b886', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '0fd51ddf9b08b4f62aa75a5f2e919d40e52f6fc3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '3a53ec2a36e96639ec5437b928d4be4b84fb3aff', class: "zonos--address-component" }), this.invalidCharacterList && (h("zonos-banner", { key: '1141be407cff5b6741a40a06712a71e881d3a082', bannerTitle: translate('Please resolve the following errors:'), intent: "error" }, Object.keys(this.invalidCharacterList).map(fieldName => (h("zonos-text", null, `- ${translate(mappedFields[fieldName])}: ${translate('only supports Latin characters (A-Z, a-z)')}`)))))));
-    }
-    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;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(--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: '1383262a5cca00ede5154fbdf37bbabb8cbcd501', class: classes(['zonos--elements zonos--checkbox']), style: {
-                '--background-color': backgroundColor,
-                '--border-radius': borderStyle,
-                '--font-family': zonosStoreFontFamily(),
-                '--size': `${this.size}px`,
-            } }, h("label", { key: 'aa01d0b1eebb53587f8d2d344e3b1d01a6a7a683', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '166eef6010570137110f8548c9eb76f32e5616e9', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
-                this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: 'd98289266cd4e78dd1e5c9b89019d0dd4927e4d0', class: "checkmark-container" }, h("svg", { key: 'e179fe12a77e0c7f1f48bc943ff472d0a75e05d5', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '147acf112b6d28fa30af8e8c7fe8d7f998a507ab', "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", { key: 'b83bb5bb1881580be3d0ab3ed83157a0c0ce3f8e', 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;
-        this.iframe = null;
-    }
-    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;
-        this.iframe =
-            ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) || null;
-        (_c = (_b = this.iframe) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
-            if (!this.iframe) {
-                // this should never happen since it's inside of resize callback
-                return;
-            }
-            this.height = parseFloat(getComputedStyle(this.iframe).height);
-        });
-    }
-    render() {
-        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: 'ec163c2c73f38e479ba22bb3bea5dbe2f156170b', class: 'zonos--elements zonos--collapse', style: {
-                '--font-family': zonosStoreFontFamily(),
-                height: this.getElementHeight(),
-            } }, h("div", { key: 'ab8b73ff44968d8e2f3dcf75439b09da36fdfb22' }, h("iframe", { key: '0b6d3518382c4c17a6eacb07c1617e84c7301c39', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '752d9054dadf8905e22cfcca81bb966c2d3ce8d3' }))));
-    }
-    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) {
-            logError('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: '97c3c388d1a035e6a46ecdbd3bc66d80a589b19f', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'e799af821045b2c1792d2971843afa0c7d3ece5b', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'eaf9be27a11d279c13f261e1312ee8a46e4620f7', 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-button_2.entry.js

@@ -1,147 +0,0 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-0e31d804.js';
-import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-f3eef64b.js';
-import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-8129b0cb.js';
-import { i as isColorVariable } from './isColorVariable-fbf2d80d.js';
-import { i as isDarkColor } from './isDarkColor-7a6d2d14.js';
-
-/**
- * Get theme for button text based on background color
- */
-const getButtonTheme = (overrideBackground) => {
-    // use override background if it exists, otherwise use color from setting
-    const background = overrideBackground || zonosStore.appearance.colorSecondary;
-    const backgroundColor = background && isColorVariable(background)
-        ? `var(--amino-${background})`
-        : background;
-    // determine theme based on background color (to change button text color if needed)
-    const buttonTheme = backgroundColor && isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';
-    return buttonTheme;
-};
-
-/**
- * Filter out all of the undefined values from the object so we don't have undefined css variable values
- */
-const styles = (props) => {
-    // loop through the object and filter out all of the underfined values
-    return Object.entries(props).reduce((acc, [key, value]) => {
-        if (value) {
-            acc[key] = value;
-        }
-        return acc;
-    }, {});
-};
-
-const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));margin:1px;}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-500)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--amino-radius-4);width:24px}";
-const ZonosButtonStyle0 = zonosButtonCss;
-
-const ZonosButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /**
-         * Detect if the button has an content
-         */
-        this.handleSlotChange = () => {
-            this.hasContent = true;
-        };
-        this.buttonColor = undefined;
-        this.backgroundColor = undefined;
-        this.borderStyle = undefined;
-        this.isDisabled = false;
-        this.icon = null;
-        this.iconRight = false;
-        this.size = 'sm';
-        this.variant = 'standard';
-        this.noBackground = false;
-        this.noPaddingLeft = false;
-        this.noPaddingRight = false;
-        this.loading = false;
-        this.theme = undefined;
-        this.hasIcon = !!this.icon;
-        this.hasContent = false;
-    }
-    /**
-     * Detect if the icon changes and update the state accordingly
-     */
-    iconChangeHandler() {
-        this.hasIcon = !!this.icon;
-    }
-    clickHandler(event) {
-        if (this.loading || this.isDisabled) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    componentWillLoad() {
-        this.iconChangeHandler();
-    }
-    render() {
-        const disabled = this.loading || this.isDisabled;
-        /**
-         * If the parent component pass in the variant prop with `undefined` value, it would not re-assign the `undefined` value with the default value.
-         * So need to re-assign the variant prop with the default value if the value is `undefined` here.
-         */
-        const variant = this.variant || 'standard';
-        const color = this.buttonColor && isColorVariable(this.buttonColor)
-            ? `var(--amino-${this.buttonColor})`
-            : this.buttonColor;
-        // use override background if it exists, otherwise use color from setting
-        const overrideBackground = this.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(this.borderStyle);
-        const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
-            ? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
-            : overrideBackground;
-        const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
-            ? 'white'
-            : 'black';
-        return (h(Host, { key: '105badc02dbdcd9c782942e2b71719cd0ae7444e', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
-                '--background-color': overrideBackground,
-                '--border-radius': borderStyle,
-                '--color': color,
-                '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'c817b0eec6a0649e48155f284965412beb89a5f6', 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',
-                variant,
-                this.size,
-                // only override background if variant is set to standard
-                overrideBackground &&
-                    variant === 'standard' &&
-                    'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: '85d6175e728b87276b95e831560530a3f7424a7c', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'c65d771ca5182ac27da1769884dd8a4060037a1b', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e3c6b155c4eb0f22aa9378586563face84ef8c2d', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
-    }
-    get ele() { return getElement(this); }
-    static get watchers() { return {
-        "icon": ["iconChangeHandler"]
-    }; }
-};
-ZonosButton.style = ZonosButtonStyle0;
-
-const zonosSpinnerCss = ":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{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}:host(.black) circle{stroke:var(--amino-spinner-stroke-black)}:host(.black) circle.track{stroke:var(--amino-spinner-track-black)}:host(.white) circle{stroke:var(--amino-spinner-stroke-white)}:host(.white) circle.track{stroke:var(--amino-spinner-track-white)}:host(.info) circle{stroke:var(--amino-blue-600)}:host(.info) circle.track{stroke:var(--amino-blue-100)}:host(.success) circle{stroke:var(--amino-green-600)}:host(.success) circle.track{stroke:var(--amino-green-100)}:host(.danger) circle{stroke:var(--amino-red-600)}:host(.danger) circle.track{stroke:var(--amino-red-100)}:host(.warning) circle{stroke:var(--amino-orange-600)}:host(.warning) circle.track{stroke:var(--amino-orange-100)}";
-const ZonosSpinnerStyle0 = zonosSpinnerCss;
-
-const ZonosSpinner = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.size = 32;
-        this.spinnerColor = undefined;
-    }
-    render() {
-        if (!this.el.shadowRoot) {
-            return null;
-        }
-        return (h(Host, { class: classes(['zonos--elements', this.spinnerColor]), style: {
-                '--size': `${this.size}px`,
-            } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
-    }
-    get el() { return getElement(this); }
-};
-ZonosSpinner.style = ZonosSpinnerStyle0;
-
-export { ZonosButton as zonos_button, ZonosSpinner as zonos_spinner };

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

@@ -1,35 +0,0 @@
-import { r as registerInstance, h, d as getElement, H as Host } from './index-0e31d804.js';
-import { d as zonosStoreFontFamily } from './zonosStore-f3eef64b.js';
-import { i as isColorVariable } from './isColorVariable-fbf2d80d.js';
-
-const zonosIconCss = ":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 svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";
-const ZonosIconStyle0 = zonosIconCss;
-
-const ZonosIcon = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.autoHeight = false;
-        this.iconColor = 'gray-1200';
-        this.content = undefined;
-        this.size = 24;
-    }
-    render() {
-        if (!this.content || !this.el.shadowRoot) {
-            return null;
-        }
-        const iconColor = isColorVariable(this.iconColor)
-            ? `var(--amino-${this.iconColor})`
-            : this.iconColor;
-        this.el.shadowRoot.innerHTML = this.content;
-        return (h(Host, { class: "zonos--elements", style: {
-                '--color': iconColor,
-                '--font-family': zonosStoreFontFamily(),
-                '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
-                '--width': `${this.size}px`,
-            } }));
-    }
-    get el() { return getElement(this); }
-};
-ZonosIcon.style = ZonosIconStyle0;
-
-export { ZonosIcon as zonos_icon };