@zonos/elements 1.3.5-alpha.0 → 1.3.6

package/dist/esm/{submitGtag-a7d07aec.js → submitGtag-bebe2cb0.js}

@@ -1,10 +1,5 @@
-import { z as zonosStore } from './zonosStore-e59617f8.js';
-import { l as log } from './localization-5d83fde2.js';
-
-const checkoutBreakpoint = 890;
-const isCheckoutMobile = (isMobile) => {
-    return isMobile || window.innerWidth < checkoutBreakpoint;
-};
+import { z as zonosStore } from './zonosStore-e6c7be3a.js';
+import { a as log } from './localization-d8f6453b.js';
 
 /**
  * Submit a gtag event if the gtag function is available.
@@ -21,4 +16,4 @@ const submitGtag = (event) => {
     }
 };
 
-export { isCheckoutMobile as i, submitGtag as s };
+export { submitGtag as s };

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

@@ -0,0 +1,282 @@
+import { r as registerInstance, h, H as Host, d as getElement, c as createEvent } from './index-b5be4dc3.js';
+import { s as stripeStore, f as stripeStorePrefetchLandedCost } from './cart-bc3bb22e.js';
+import { b as logError, l as localizationStore } from './localization-d8f6453b.js';
+import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
+import { d as zonosStoreFontFamily } from './zonosStore-e6c7be3a.js';
+import { c as classes } from './classes-0d95c529.js';
+import { g as getBorderRadius } from './getBorderRadius-e9736f7e.js';
+import { i as isDarkColor } from './isDarkColor-e982fa09.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;
+        return (h(Host, { key: '372c80d0d5b8d2c693b2c74bd6652430c8e4a5bb', class: 'zonos--elements zonos--collapse', style: {
+                '--font-family': zonosStoreFontFamily(),
+                height: this.getElementHeight(),
+            } }, h("div", { key: 'babd12279d1ac54092a1cff83e8e5b8ed5e81008' }, h("iframe", { key: '6d3a7845d560ba587829ba68033cd92ec8d2af5b', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'f295e17fd3178eb44dc7c0c51f87a80694fd04d7' }))));
+    }
+    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-e6c7be3a.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-e6c7be3a.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':

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

@@ -0,0 +1,155 @@
+import { r as registerInstance, h, H as Host, d as getElement } from './index-b5be4dc3.js';
+import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-e6c7be3a.js';
+import { c as classes } from './classes-0d95c529.js';
+import { g as getBorderRadius } from './getBorderRadius-e9736f7e.js';
+import { i as isColorVariable } from './isColorVariable-91c33804.js';
+import { i as isDarkColor } from './isDarkColor-e982fa09.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;
+};
+
+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}: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));}: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-100)}: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 spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
+        return (h(Host, { key: '817142c1d229333aee0b38864788346d2749d3d1', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+                '--background-color': overrideBackground,
+                '--border-radius': borderStyle,
+                '--color': color,
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("button", { key: '04bff1f932154f54b4af51b2fac053d40efc354f', 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", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'fd9bd0e9f89c3c9ab6dc9d0ac7a123542a1f5023', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+    }
+    static get watchers() { return {
+        "icon": ["iconChangeHandler"]
+    }; }
+};
+ZonosButton.style = ZonosButtonStyle0;
+
+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;
+        }
+        this.el.shadowRoot.innerHTML = this.content;
+        return (h(Host, { class: "zonos--elements", style: {
+                '--color': `var(--amino-${this.iconColor})`,
+                '--font-family': zonosStoreFontFamily(),
+                '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
+                '--width': `${this.size}px`,
+            } }));
+    }
+    get el() { return getElement(this); }
+};
+ZonosIcon.style = ZonosIconStyle0;
+
+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, ZonosIcon as zonos_icon, ZonosSpinner as zonos_spinner };