@zonos/elements 1.3.18-alpha.1 → 1.3.18-alpha.3

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

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

package/dist/components/zonos-icon.js

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

package/dist/components/zonos-icon2.js

@@ -1,55 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as zonosStoreFontFamily } from './zonosStore.js';
-import { i as isColorVariable } from './isColorVariable.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 = /*@__PURE__*/ proxyCustomElement(class ZonosIcon extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        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(--zonos-elements-${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 this; }
-    static get style() { return ZonosIconStyle0; }
-}, [1, "zonos-icon", {
-        "autoHeight": [4, "auto-height"],
-        "iconColor": [1, "icon-color"],
-        "content": [1],
-        "size": [2]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-icon":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosIcon);
-            }
-            break;
-    } });
-}
-
-export { ZonosIcon as Z, defineCustomElement as d };

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

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

package/dist/components/zonos-input.js

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

package/dist/components/zonos-input2.js

@@ -1,78 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as zonosStoreFontFamily } from './zonosStore.js';
-import { c as classes } from './classes.js';
-import { g as getBorderRadius } from './getBorderRadius.js';
-
-const zonosInputCss = ":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{margin:1px;}:host .zonos--label-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;width:100%;background:var(--zonos-elements-input-background);border-radius:var(--border-radius);border:var(--zonos-elements-border)}:host .zonos--label-wrapper:hover{border:1px solid var(--zonos-elements-gray-300)}:host .zonos--floated-input{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0 16px;outline:none;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);width:100%;border-radius:var(--border-radius);background:var(--zonos-elements-input-background);border:0;-ms-flex-order:2;order:2;font-weight:500}:host .zonos--floated-input :-internal-autofill-selected{border-radius:var(--zonos-elements-radius-6) 0 0 var(--zonos-elements-radius-6)}:host .zonos--floated-input :-internal-autofill-selected+label+div{background-color:#e8f0fe}:host .zonos--floated-input.has-label{padding:16px 4px 8px 16px}:host .zonos--floated-input.has-label.has-input-prefix{padding-left:0}:host .zonos--floated-input.has-label.has-input-prefix+.zonos--floated-label::before{margin-left:0}:host .zonos--floated-input:not(.has-label)::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label):-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input::-webkit-input-placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::-moz-placeholder{-moz-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input:-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input:focus{outline:none}:host .zonos--floated-input:focus+.zonos--floated-label::after{-webkit-box-shadow:var(--zonos-elements-glow-blue);box-shadow:var(--zonos-elements-glow-blue)}:host .zonos--floated-input.has-error+.zonos--floated-label::after{-webkit-box-shadow:var(--zonos-elements-glow-error);box-shadow:var(--zonos-elements-glow-error)}:host .zonos--floated-input.has-content::-webkit-input-placeholder,:host .zonos--floated-input:focus::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::-moz-placeholder,:host .zonos--floated-input:focus::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content:-ms-input-placeholder,:host .zonos--floated-input:focus:-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::-ms-input-placeholder,:host .zonos--floated-input:focus::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::placeholder,:host .zonos--floated-input:focus::placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content+.zonos--floated-label::before,:host .zonos--floated-input:focus+.zonos--floated-label::before{top:11px;-webkit-transform:scale(0.8);transform:scale(0.8)}:host .zonos--floated-input:-webkit-autofill,:host .zonos--floated-input:-moz-autofill{background-color:var(--zonos-elements-input-background);color:var(--zonos-elements-text-color)}:host .zonos--floated-label{display:block;max-height:0;pointer-events:none;-ms-flex-order:1;order:1}:host .zonos--floated-label::before{content:attr(data-label);color:var(--zonos-elements-gray-800);position:absolute;font-size:var(--zonos-elements-font-size-base);line-height:var(--zonos-elements-font-size-base);display:inline-block;-webkit-filter:blur(0);filter:blur(0);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);margin-left:16px;top:calc(50% - var(--zonos-elements-font-size-base) / 2);z-index:1}:host .zonos--floated-label::after{content:\"\";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:var(--border-radius)}:host .disabled .zonos--floated-label{pointer-events:inherit}:host .disabled .zonos--floated-label::after{cursor:not-allowed;z-index:1}:host(.sm){height:calc(var(--zonos-elements-size-sm) - 2px)}:host(.sm) .zonos--floated-input.has-label{padding-top:13px;padding-bottom:0}:host(.sm) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.sm) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:2px}:host(.md){height:calc(var(--zonos-elements-size-md) - 2px)}:host(.md) .zonos--floated-input.has-label{padding-top:20px}:host(.md) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.md) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:6px}:host(.lg){height:calc(var(--zonos-elements-size-lg) - 2px)}:host(.lg) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.lg) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:10px}:host(.xl){height:calc(var(--zonos-elements-size-xl) - 2px)}:host(.xl) .zonos--floated-input.has-label{padding-bottom:2px}";
-const ZonosInputStyle0 = zonosInputCss;
-
-const ZonosInput = /*@__PURE__*/ proxyCustomElement(class ZonosInput extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.inputChange = createEvent(this, "inputChange", 7);
-        this.inputValue = '';
-        this.inputLabel = undefined;
-        this.inputSize = 'md';
-        this.isDisabled = false;
-        this.isError = false;
-        this.inputPlaceholder = '';
-        this.value = this.inputValue;
-    }
-    onInputValueChange(newValue) {
-        this.value = newValue;
-        this.inputChange.emit(newValue);
-    }
-    render() {
-        return (h(Host, { key: '97f9a886695c81bf72ffa5cc4b7afc26e40a2694', class: classes([
-                'zonos--input zonos--elements',
-                this.inputSize,
-                this.isError && 'has-error',
-            ]), style: {
-                '--border-radius': getBorderRadius(),
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'ffc96e546684499a5272dd0f5b4b087b1f717353', class: classes([
-                'zonos--label-wrapper',
-                this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '162556990fe4c93fc9400f7cf947d8fdbeffd2f1', class: classes([
-                'zonos--floated-input',
-                !!this.inputLabel && 'has-label',
-                this.inputValue && 'has-content',
-                this.isError && 'has-error',
-            ]), disabled: this.isDisabled, onInput: e => {
-                const input = e.target;
-                this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '9b73d42d50090f1ac761ccf27bd606d474cd8d53', class: "zonos--floated-label", "data-label": this.inputLabel }))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "inputValue": ["onInputValueChange"]
-    }; }
-    static get style() { return ZonosInputStyle0; }
-}, [1, "zonos-input", {
-        "inputValue": [1, "input-value"],
-        "inputLabel": [1, "input-label"],
-        "inputSize": [1, "input-size"],
-        "isDisabled": [4, "is-disabled"],
-        "isError": [4, "is-error"],
-        "inputPlaceholder": [1, "input-placeholder"],
-        "value": [32]
-    }, undefined, {
-        "inputValue": ["onInputValueChange"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-input"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-input":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosInput);
-            }
-            break;
-    } });
-}
-
-export { ZonosInput as Z, defineCustomElement as d };

package/dist/components/zonos-language-select.d.ts

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

package/dist/components/zonos-language-select.js

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

package/dist/components/zonos-language-select2.js

@@ -1,88 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { y as localizationStoreUpdateSelectedLocale, a as localizationStore } from './stripe.js';
-import { a as translate } from './translationStore.js';
-import { a as zonosStoreFontFamily } from './zonosStore.js';
-import { l as languages } from './ILanguage.js';
-import { d as defineCustomElement$6 } from './zonos-button2.js';
-import { d as defineCustomElement$5 } from './zonos-icon2.js';
-import { d as defineCustomElement$4 } from './zonos-select-dialog-header2.js';
-import { d as defineCustomElement$3 } from './zonos-spinner2.js';
-import { d as defineCustomElement$2 } from './zonos-text2.js';
-import { d as defineCustomElement$1 } from './zonos-v-stack2.js';
-
-const GreenCheckDuotoneIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.99996 2.6665C5.05444 2.6665 2.66663 5.05432 2.66663 7.99984C2.66663 10.9454 5.05444 13.3332 7.99996 13.3332C10.9455 13.3332 13.3333 10.9454 13.3333 7.99984C13.3333 5.05432 10.9455 2.6665 7.99996 2.6665Z" fill="#AFF8C3"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1403 6.10535C10.3582 6.27488 10.3975 6.58902 10.228 6.80699L8.01055 9.65797C7.76436 9.97449 7.29646 10.0036 7.01291 9.72008L5.81307 8.52024C5.61781 8.32498 5.61781 8.0084 5.81307 7.81314C6.00833 7.61787 6.32492 7.61787 6.52018 7.81314L7.45301 8.74597L9.43862 6.19305C9.60815 5.97508 9.92229 5.93581 10.1403 6.10535Z" fill="#246627"/>
-</svg>
-`;
-
-const zonosLanguageSelectCss = ":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--language-select{width:100%}:host .zonos--language-select .zonos--language-select-content{display:grid;grid-template-columns:repeat(3, minmax(-webkit-max-content, 1fr));grid-template-columns:repeat(3, minmax(max-content, 1fr));padding:16px;padding-top:0px}:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button{display:-ms-flexbox;display:flex;padding:8px;gap:4px;-ms-flex-align:center;align-items:center;border-radius:var(--zonos-elements-radius-4);cursor:pointer;width:100%;border:none;background:none}:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button:hover{background:var(--zonos-elements-gray-100)}@media (max-width: 400px){:host .zonos--language-select .zonos--language-select-content{grid-template-columns:1fr 1fr}}";
-const ZonosLanguageSelectStyle0 = zonosLanguageSelectCss;
-
-const ZonosLanguageSelect = /*@__PURE__*/ proxyCustomElement(class ZonosLanguageSelect extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.languageSelected = (languageCode) => {
-            // mutate the selected language code in store
-            void localizationStoreUpdateSelectedLocale(languageCode);
-            this.handleOnClose();
-        };
-        this.handleOnClose = () => { };
-    }
-    render() {
-        const { selectedLocale } = localizationStore;
-        return (h(Host, { key: 'e1943addb44b8e06d5b4534865f403a721175cdd', class: "zonos--elements", style: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '888a410d444424f4ffb06dd28e5151bca9269de2', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '59aa5ae5e685f65baa1c7b1a19c1000ab8cdac74', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '854c44fefe28f22fdd37b251d482ca6db46b0895', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
-    }
-    static get style() { return ZonosLanguageSelectStyle0; }
-}, [1, "zonos-language-select", {
-        "handleOnClose": [16]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-language-select", "zonos-button", "zonos-icon", "zonos-select-dialog-header", "zonos-spinner", "zonos-text", "zonos-v-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-language-select":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosLanguageSelect);
-            }
-            break;
-        case "zonos-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "zonos-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "zonos-select-dialog-header":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "zonos-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "zonos-v-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosLanguageSelect as Z, defineCustomElement as d };

package/dist/components/zonos-link-authentication.d.ts

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

package/dist/components/zonos-link-authentication.js

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

package/dist/components/zonos-link-authentication2.js

@@ -1,80 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore, l as logError } from './stripe.js';
-import { d as defineCustomElement$1 } from './zonos-text2.js';
-
-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:16px}";
-const ZonosLinkAuthenticationStyle0 = zonosLinkAuthenticationCss;
-
-const ZonosLinkAuthentication = /*@__PURE__*/ proxyCustomElement(class ZonosLinkAuthentication extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.titleText = undefined;
-        this.defaultEmail = null;
-        this.stripe = stripeStore.stripe;
-    }
-    watchInitStripe() {
-        if (!this.stripe || !stripeStore.stripeElements) {
-            return;
-        }
-        const defaultValues = this.defaultEmail
-            ? {
-                email: this.defaultEmail,
-            }
-            : undefined;
-        // Create and mount the Authentication Element in ${type} mode
-        const linkAuthenticationElement = stripeStore.stripeLinkElement ||
-            stripeStore.stripeElements.create('linkAuthentication', {
-                defaultValues: defaultValues || undefined,
-            });
-        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;
-        });
-        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: '4a7b9eb534e938f791f70e04756aa9fb1c39f2c7', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'cc4fe49ed6d4bd7cec502ef739b9e835e9e26584', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'f04a438d04e6ccd608d7ff61ac300fb09da4f0ce', class: "zonos--link-authentication-component" })));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "stripe": ["watchInitStripe"]
-    }; }
-    static get style() { return ZonosLinkAuthenticationStyle0; }
-}, [2, "zonos-link-authentication", {
-        "titleText": [1, "title-text"],
-        "defaultEmail": [1, "default-email"],
-        "stripe": [32]
-    }, undefined, {
-        "stripe": ["watchInitStripe"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-link-authentication", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-link-authentication":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosLinkAuthentication);
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosLinkAuthentication as Z, defineCustomElement as d };

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

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

package/dist/components/zonos-link.js

@@ -1,43 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const zonosLinkCss = ":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:inline-block}:host a{padding-bottom:2px;color:var(--zonos-elements-primary);-webkit-box-shadow:none;box-shadow:none;text-decoration:none;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word}:host a:link,:host a:visited{color:var(--zonos-elements-primary);-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}:host a:hover,:host a:active{color:var(--zonos-elements-primary);-webkit-box-shadow:0 1px 0 var(--zonos-elements-primary);box-shadow:0 1px 0 var(--zonos-elements-primary)}";
-const ZonosLinkStyle0 = zonosLinkCss;
-
-const ZonosLink$1 = /*@__PURE__*/ proxyCustomElement(class ZonosLink extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.href = '';
-        this.rel = undefined;
-        this.target = undefined;
-        this.linkTitle = undefined;
-    }
-    render() {
-        return (h(Host, { key: '595aa56bf6c9503434d265b62a85a5fcbf0e7bec', class: "zonos--elements" }, h("a", { key: '3e355af783529c0fa77ff2c351476c92ec128ec3', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '45607e8fa7448a96f6914270baaeab2f0d03944e' }))));
-    }
-    static get style() { return ZonosLinkStyle0; }
-}, [1, "zonos-link", {
-        "href": [1],
-        "rel": [1],
-        "target": [1],
-        "linkTitle": [1, "link-title"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-link"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosLink$1);
-            }
-            break;
-    } });
-}
-
-const ZonosLink = ZonosLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosLink, defineCustomElement };

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

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

package/dist/components/zonos-logo.js

@@ -1,49 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host, getAssetPath } from '@stencil/core/internal/client';
-import { a as zonosStoreFontFamily } from './zonosStore.js';
-import { c as classes } from './classes.js';
-
-const zonosLogoCss = ":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 img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
-const ZonosLogoStyle0 = zonosLogoCss;
-
-const ZonosLogo$1 = /*@__PURE__*/ proxyCustomElement(class ZonosLogo extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.theme = 'LIGHT';
-        this.width = 'auto';
-    }
-    render() {
-        const filterColor = this.theme === 'DARK'
-            ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
-            : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: 'c68b772cba1e8562b48a58bace45e0643bd18dcf', class: classes(['zonos--elements zonos--logo']), style: {
-                '--filter-color': filterColor,
-                '--font-family': zonosStoreFontFamily(),
-                '--width': this.width,
-            } }, h("img", { key: 'a3a48b9f4dc2401d543afe0d2334b5bd57aad4d6', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
-    }
-    static get assetsDirs() { return ["assets"]; }
-    static get style() { return ZonosLogoStyle0; }
-}, [1, "zonos-logo", {
-        "theme": [1],
-        "width": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-logo"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-logo":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosLogo$1);
-            }
-            break;
-    } });
-}
-
-const ZonosLogo = ZonosLogo$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosLogo, defineCustomElement };

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

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

package/dist/components/zonos-notification.js

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

package/dist/components/zonos-notification2.js

@@ -1,92 +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 zonosNotificationCss = ":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-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:24px;gap:8px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:8px;border-radius:var(--border-radius, var(--zonos-elements-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--zonos-elements-green-700)}:host .zonos--notification-item.error{background-color:var(--zonos-elements-red-700)}:host .zonos--notification-item.warning{background-color:var(--zonos-elements-orange-700)}";
-const ZonosNotificationStyle0 = zonosNotificationCss;
-
-const ZonosNotification = /*@__PURE__*/ proxyCustomElement(class ZonosNotification extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.notificationArray = [];
-    }
-    /**
-     * Show a notification
-     */
-    async showNotification(notification) {
-        // random generate id
-        const id = `id-${Math.random().toString(36).substring(2, 9)}`;
-        const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
-        this.notificationArray = [...this.notificationArray, notificationItem];
-        setTimeout(() => {
-            this.updateTransitionClass({
-                id,
-                transitionClass: 'show',
-            });
-        }, 50);
-        setTimeout(() => {
-            this.removeNotification(id);
-        }, notificationItem.timeout);
-    }
-    updateTransitionClass({ id, transitionClass, }) {
-        this.notificationArray = this.notificationArray.map(notification => {
-            if (notification.id === id) {
-                return Object.assign(Object.assign({}, notification), { transitionClass });
-            }
-            return notification;
-        });
-    }
-    /**
-     * Remove a notification
-     */
-    removeNotification(id) {
-        // add hide class before removing the item 100ms to trigger animation
-        this.updateTransitionClass({
-            id,
-            transitionClass: '',
-        });
-        setTimeout(() => {
-            this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
-        }, 300);
-    }
-    render() {
-        return (h(Host, { key: '17c08c90c6c1dfade4e43451c196127a0f53429e', class: classes(['zonos--elements zonos--notification']), style: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '6624419d86a5c7518539069dbc5c9d7c08262c75', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
-            return (h("div", { "aria-hidden": "true", class: classes([
-                    'zonos--notification-item',
-                    notification.type,
-                    notification.transitionClass,
-                ]), key: notification.id, onClick: () => {
-                    this.removeNotification(notification.id);
-                } }, h("zonos-text", { textColor: "gray-0" }, notification.message)));
-        }))));
-    }
-    static get style() { return ZonosNotificationStyle0; }
-}, [1, "zonos-notification", {
-        "notificationArray": [32],
-        "showNotification": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-notification", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-notification":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosNotification);
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosNotification as Z, defineCustomElement as d };

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

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