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

package/dist/components/zonos-address2.js

@@ -1,176 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore, l as logError, a as localizationStore } from './stripe.js';
-import { i as isCheckoutMobile } from './isCheckoutMobile.js';
-import { d as defineCustomElement$1 } from './zonos-text2.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:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
-const ZonosAddressStyle0 = zonosAddressCss;
-
-const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
-        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;
-        }
-    }
-    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 : [],
-            // 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();
-    }
-    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: '77cf6085adb67da95283000b857a9252215c71cd', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '30aff37f04ef04ce4c062d52c78286b362469894', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '599e73e5d3f88cba12a7fc72abc3e575eb3eb777', class: "zonos--address-component" })));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "stripe": ["watchInitStripe"]
-    }; }
-    static get style() { return ZonosAddressStyle0; }
-}, [2, "zonos-address", {
-        "type": [1],
-        "titleText": [1, "title-text"],
-        "defaultAddress": [16],
-        "stripe": [32],
-        "isDirtyAddress": [32]
-    }, undefined, {
-        "stripe": ["watchInitStripe"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-address", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-address":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosAddress);
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosAddress as Z, defineCustomElement as d };

package/dist/components/zonos-badge.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZonosBadge extends Components.ZonosBadge, HTMLElement {}
-export const ZonosBadge: {
-    prototype: ZonosBadge;
-    new (): ZonosBadge;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/zonos-badge.js

@@ -1,6 +0,0 @@
-import { Z as ZonosBadge$1, d as defineCustomElement$1 } from './zonos-badge2.js';
-
-const ZonosBadge = ZonosBadge$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosBadge, defineCustomElement };

package/dist/components/zonos-badge2.js

@@ -1,61 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as zonosStoreFontFamily } from './zonosStore.js';
-import { c as classes } from './classes.js';
-import { d as defineCustomElement$1 } from './zonos-text2.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:8px;font-size:var(--zonos-elements-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--zonos-elements-radius-6);background-color:var(--zonos-elements-gray-100);color:var(--zonos-elements-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(--zonos-elements-gray-600);color:var(--zonos-elements-gray-100)}:host .blue{background-color:var(--zonos-elements-blue-100);color:var(--zonos-elements-blue-800)}:host .blue.bold{background-color:var(--zonos-elements-blue-600);color:var(--zonos-elements-blue-100)}:host .green{background-color:var(--zonos-elements-green-100);color:var(--zonos-elements-green-800)}:host .green.bold{background-color:var(--zonos-elements-green-600);color:var(--zonos-elements-green-100)}:host .red{background-color:var(--zonos-elements-red-100);color:var(--zonos-elements-red-800)}:host .red.bold{background-color:var(--zonos-elements-red-600);color:var(--zonos-elements-red-100)}:host .orange{background-color:var(--zonos-elements-orange-100);color:var(--zonos-elements-orange-800)}:host .orange.bold{background-color:var(--zonos-elements-orange-600);color:var(--zonos-elements-orange-100)}:host .purple{background-color:var(--zonos-elements-purple-100);color:var(--zonos-elements-purple-800)}:host .purple.bold{background-color:var(--zonos-elements-purple-600);color:var(--zonos-elements-purple-100)}:host .cyan{background-color:var(--zonos-elements-cyan-100);color:var(--zonos-elements-cyan-800)}:host .cyan.bold{background-color:var(--zonos-elements-cyan-600);color:var(--zonos-elements-cyan-100)}";
-const ZonosBadgeStyle0 = zonosBadgeCss;
-
-const ZonosBadge = /*@__PURE__*/ proxyCustomElement(class ZonosBadge extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.bold = false;
-        this.badgeColor = 'gray';
-        this.icon = undefined;
-        this.iconRight = false;
-        this.size = 'default';
-        this.rounded = false;
-    }
-    render() {
-        return (h(Host, { key: 'c68ba6ef2bcb35c94ecf2b11379be748aa998198', class: classes(['zonos--elements zonos--badge']), style: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '7f200effb42296a21829c292101ef3300b041327', 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: '4358e95cb29ec6a82e32213b268612aadf8772c6' }, h("slot", { key: 'ab76831e3691a896179e06896d33ed771e4bbdf9' })))));
-    }
-    static get style() { return ZonosBadgeStyle0; }
-}, [1, "zonos-badge", {
-        "bold": [4],
-        "badgeColor": [1, "badge-color"],
-        "icon": [16],
-        "iconRight": [4, "icon-right"],
-        "size": [1],
-        "rounded": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-badge", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-badge":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosBadge);
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosBadge as Z, defineCustomElement as d };

package/dist/components/zonos-banner.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZonosBanner extends Components.ZonosBanner, HTMLElement {}
-export const ZonosBanner: {
-    prototype: ZonosBanner;
-    new (): ZonosBanner;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/zonos-banner.js

@@ -1,6 +0,0 @@
-import { Z as ZonosBanner$1, d as defineCustomElement$1 } from './zonos-banner2.js';
-
-const ZonosBanner = ZonosBanner$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosBanner, defineCustomElement };

package/dist/components/zonos-banner2.js

@@ -1,95 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as zonosStoreFontFamily } from './zonosStore.js';
-import { c as classes } from './classes.js';
-import { d as defineCustomElement$1 } from './zonos-text2.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(--zonos-elements-radius-10);padding:16px;background:var(--zonos-elements-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:0px;grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:4px}:host(.info){background-color:var(--zonos-elements-blue-100);border:1px solid var(--zonos-elements-blue-200)}:host(.success){background-color:var(--zonos-elements-green-100);border:1px solid var(--zonos-elements-green-200)}:host(.error){background-color:var(--zonos-elements-red-100);border:1px solid var(--zonos-elements-red-200)}:host(.warning){background-color:var(--zonos-elements-orange-100);border:1px solid var(--zonos-elements-orange-200)}";
-const ZonosBannerStyle0 = zonosBannerCss;
-
-const ZonosBanner = /*@__PURE__*/ proxyCustomElement(class ZonosBanner extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Detect if the button has an content
-         */
-        this.handleSlotChange = () => {
-            this.hasContent = true;
-        };
-        this.bannerTitle = undefined;
-        this.intent = undefined;
-        this.hasContent = false;
-    }
-    render() {
-        const renderContent = ({ color }) => {
-            const primaryColor = `var(--zonos-elements-${color}-800)`;
-            const secondaryColor = `var(--zonos-elements-${color}-300)`;
-            const [header, content] = [
-                this.bannerTitle,
-                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", { 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.intent]);
-        const font = zonosStoreFontFamily();
-        switch (this.intent) {
-            case 'error':
-                return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
-                    } }, renderContent({
-                    color: 'red',
-                })));
-            case 'info':
-                return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
-                    } }, renderContent({
-                    color: 'blue',
-                })));
-            case 'success':
-                return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
-                    } }, renderContent({
-                    color: 'green',
-                })));
-            case 'warning':
-                return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
-                    } }, renderContent({
-                    color: 'orange',
-                })));
-            default:
-                return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
-                    } }, renderContent({
-                    color: 'gray',
-                })));
-        }
-    }
-    static get style() { return ZonosBannerStyle0; }
-}, [1, "zonos-banner", {
-        "bannerTitle": [1, "banner-title"],
-        "intent": [1],
-        "hasContent": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-banner", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-banner":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosBanner);
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosBanner as Z, defineCustomElement as d };

package/dist/components/zonos-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZonosButton extends Components.ZonosButton, HTMLElement {}
-export const ZonosButton: {
-    prototype: ZonosButton;
-    new (): ZonosButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/zonos-button.js

@@ -1,6 +0,0 @@
-import { Z as ZonosButton$1, d as defineCustomElement$1 } from './zonos-button2.js';
-
-const ZonosButton = ZonosButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosButton, defineCustomElement };

package/dist/components/zonos-button2.js

@@ -1,186 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { z as zonosStore, a as zonosStoreFontFamily } from './zonosStore.js';
-import { c as classes } from './classes.js';
-import { g as getBorderRadius } from './getBorderRadius.js';
-import { i as isColorVariable } from './isColorVariable.js';
-import { i as isDarkColor } from './isDarkColor.js';
-import { d as defineCustomElement$1 } from './zonos-spinner2.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(--zonos-elements-${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(--zonos-elements-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(--zonos-elements-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--zonos-elements-radius-10);gap:8px}: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(--zonos-elements-surface-color);border:none;outline:1px solid var(--zonos-elements-surface-color);border-radius:var(--border-radius, var(--zonos-elements-radius-10));-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-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:8px 24px;color:var(--color, var(--zonos-elements-gray-1200));margin:1px;}:host button:not([disabled]):hover{background-image:var(--zonos-elements-button-standard-hover)}:host button:not([disabled]):active{background:var(--zonos-elements-gray-700)}:host button:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button.with-box-shadow{-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard)}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}: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(--zonos-elements-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--zonos-elements-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--zonos-elements-size-sm);line-height:var(--zonos-elements-size-sm);padding:4px 8px}:host button.sm:not(.has-content).has-icon{padding:0 4px}:host button.md{height:var(--zonos-elements-size-md);line-height:var(--zonos-elements-size-md);padding:8px 16px}:host button.md:not(.has-content).has-icon{padding:0 8px}:host button.lg{height:var(--zonos-elements-size-lg);line-height:var(--zonos-elements-size-lg);padding:12px 24px}:host button.lg:not(.has-content).has-icon{padding:0 16px}:host button:not(.only-icon).has-icon{gap:8px}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--zonos-elements-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--zonos-elements-gray-0));color:var(--color, var(--zonos-elements-gray-1200));outline:1px solid var(--background-color, var(--zonos-elements-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(--zonos-elements-blue-600);outline:1px solid var(--zonos-elements-blue-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--zonos-elements-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--zonos-elements-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--zonos-elements-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--zonos-elements-blue-600)}:host button:not(.override-background).success{background:var(--zonos-elements-green-600);outline:1px solid var(--zonos-elements-green-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--zonos-elements-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--zonos-elements-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--zonos-elements-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-green-400)}:host button:not(.override-background).danger{background:var(--zonos-elements-red-600);outline:1px solid var(--zonos-elements-red-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--zonos-elements-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--zonos-elements-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--zonos-elements-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-red-400)}:host button:not(.override-background).warning{background:var(--zonos-elements-orange-600);outline:1px solid var(--zonos-elements-orange-600);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--zonos-elements-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--zonos-elements-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--zonos-elements-focus-button);box-shadow:var(--zonos-elements-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--zonos-elements-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--zonos-elements-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(--zonos-elements-gray-500);color:var(--zonos-elements-gray-0)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--zonos-elements-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--zonos-elements-button-focus-ring);box-shadow:var(--zonos-elements-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(--zonos-elements-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--zonos-elements-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--zonos-elements-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--zonos-elements-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--zonos-elements-radius-4);width:24px}";
-const ZonosButtonStyle0 = zonosButtonCss;
-
-const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Detect if the button has an content
-         */
-        this.handleSlotChange = () => {
-            this.hasContent = true;
-        };
-        this.getColorVarProperty = (color) => color.replace('var(', '').replace(')', '');
-        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.withBoxShadow = 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';
-        // use the variable if it's a color variable, otherwise use the color
-        const backgroundColor = this.backgroundColor && isColorVariable(this.backgroundColor)
-            ? `var(--zonos-elements-${this.backgroundColor})`
-            : this.backgroundColor;
-        // use override background if it exists, otherwise use color from setting
-        const overrideBackground = backgroundColor || zonosStore.appearance.colorSecondary;
-        // only set theme for button to change text color if variant is standard and override background is set
-        const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
-        const borderStyle = getBorderRadius({
-            overrideBorderStyle: this.borderStyle,
-        });
-        const backgroundActualColor = overrideBackground &&
-            isColorVariable(this.getColorVarProperty(overrideBackground))
-            ? window
-                .getComputedStyle(this.ele)
-                .getPropertyValue(this.getColorVarProperty(overrideBackground))
-            : overrideBackground;
-        // use the variable if it's a color variable, otherwise use the color
-        const color = this.buttonColor && isColorVariable(this.buttonColor)
-            ? `var(--zonos-elements-${this.buttonColor})`
-            : this.buttonColor;
-        // set contrast color if background color is dark for all variants except subtle
-        const contrastColor = this.variant !== 'subtle' &&
-            backgroundActualColor &&
-            isDarkColor(backgroundActualColor)
-            ? 'white'
-            : color;
-        const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
-            ? 'white'
-            : 'black';
-        return (h(Host, { key: '6e361b1a80fd43a72a99a8201ca5d7cb86404656', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
-                '--background-color': overrideBackground,
-                '--border-radius': borderStyle,
-                '--color': contrastColor,
-                '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'fd4335b2d9bfe74b509f1355fa620dc4c53f58c6', class: classes([
-                this.hasIcon && 'has-icon',
-                this.hasContent && 'has-content',
-                this.noBackground && 'no-background',
-                this.noPaddingLeft && 'no-padding-left',
-                this.noPaddingRight && 'no-padding-right',
-                this.iconRight && 'icon-right',
-                this.withBoxShadow && 'with-box-shadow',
-                variant,
-                this.size,
-                // only override background if variant is set to standard
-                overrideBackground &&
-                    variant === 'standard' &&
-                    'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: '7b37a1d30604de0d9e1f5d07bf6034724dcd8875', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'e4e3cbda9ae02c2ac9a7c17767bda93076ea67ad', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e9b7287f2c4d9143f04103fe43d3f4dfd669341e', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
-    }
-    static get delegatesFocus() { return true; }
-    get ele() { return this; }
-    static get watchers() { return {
-        "icon": ["iconChangeHandler"]
-    }; }
-    static get style() { return ZonosButtonStyle0; }
-}, [17, "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"],
-        "withBoxShadow": [4, "with-box-shadow"],
-        "noPaddingLeft": [4, "no-padding-left"],
-        "noPaddingRight": [4, "no-padding-right"],
-        "loading": [4],
-        "theme": [1],
-        "hasIcon": [32],
-        "hasContent": [32]
-    }, [[2, "click", "clickHandler"]], {
-        "icon": ["iconChangeHandler"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-button", "zonos-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosButton);
-            }
-            break;
-        case "zonos-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosButton as Z, defineCustomElement as d };

package/dist/components/zonos-card.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZonosCard extends Components.ZonosCard, HTMLElement {}
-export const ZonosCard: {
-    prototype: ZonosCard;
-    new (): ZonosCard;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/zonos-card.js

@@ -1,6 +0,0 @@
-import { Z as ZonosCard$1, d as defineCustomElement$1 } from './zonos-card2.js';
-
-const ZonosCard = ZonosCard$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosCard, defineCustomElement };