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

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

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

package/dist/components/zonos-collapse.js

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

package/dist/components/zonos-collapse2.js

@@ -1,78 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as zonosStoreFontFamily } from './zonosStore.js';
-
-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 = /*@__PURE__*/ proxyCustomElement(class ZonosCollapse extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.collapsed = false;
-        this.collapseSize = 0;
-        this.height = this.el.scrollHeight;
-        this.iframe = null;
-    }
-    getElementHeight() {
-        const fullHeight = `${this.height}px`;
-        const collapsedHeight = `${this.collapseSize}px`;
-        return this.collapsed ? collapsedHeight : fullHeight;
-    }
-    componentDidLoad() {
-        this.height = this.el.scrollHeight;
-    }
-    componentDidRender() {
-        var _a, _b, _c;
-        this.iframe =
-            ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) || null;
-        (_c = (_b = this.iframe) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
-            if (!this.iframe) {
-                // this should never happen since it's inside of resize callback
-                return;
-            }
-            this.height = parseFloat(getComputedStyle(this.iframe).height);
-        });
-    }
-    render() {
-        if (!this.collapsed) {
-            // wait for the collapse animation to finish, then set overflow to visible
-            setTimeout(() => {
-                // if the element collapsed state is still not changed, set overflow to visible
-                if (!this.collapsed) {
-                    this.el.style.overflow = 'visible';
-                }
-            }, 300);
-        }
-        else {
-            // set overflow to hidden to prevent content from showing when collapsed
-            this.el.style.overflow = 'hidden';
-        }
-        return (h(Host, { key: '514e75d41d29d70b4ca60230288ae183200b1e12', class: 'zonos--elements zonos--collapse', style: {
-                '--font-family': zonosStoreFontFamily(),
-                height: this.getElementHeight(),
-            } }, h("div", { key: '068aee1d13bde4c83ea8582b34844da7452c907c' }, h("iframe", { key: 'b22fd8ad898a098c244cb817dc6951854505efca', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'b54783376005085e379c7b8d43218ead1bf8e8ac' }))));
-    }
-    get el() { return this; }
-    static get style() { return ZonosCollapseStyle0; }
-}, [1, "zonos-collapse", {
-        "collapsed": [4],
-        "collapseSize": [2, "collapse-size"],
-        "height": [32],
-        "iframe": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-collapse"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-collapse":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosCollapse);
-            }
-            break;
-    } });
-}
-
-export { ZonosCollapse as Z, defineCustomElement as d };

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

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

package/dist/components/zonos-component.js

@@ -1,48 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-function format(first, middle, last) {
-    return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
-}
-
-const zonosComponentCss = ":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}div{color:red;font-size:large}";
-const ZonosComponentStyle0 = zonosComponentCss;
-
-const ZonosComponent$1 = /*@__PURE__*/ proxyCustomElement(class ZonosComponent extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.first = '';
-        this.middle = '';
-        this.last = '';
-    }
-    getText() {
-        return format(this.first, this.middle, this.last);
-    }
-    render() {
-        return h("div", { key: 'b51f2edddb50f8f6a868da28c73218fe6955d2e5' }, "Hello, World! I'm ", this.getText());
-    }
-    static get style() { return ZonosComponentStyle0; }
-}, [1, "zonos-component", {
-        "first": [1],
-        "middle": [1],
-        "last": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-component"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-component":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosComponent$1);
-            }
-            break;
-    } });
-}
-
-const ZonosComponent = ZonosComponent$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosComponent, defineCustomElement };

package/dist/components/zonos-confirm-dialog.d.ts

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

package/dist/components/zonos-confirm-dialog.js

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

package/dist/components/zonos-confirm-dialog2.js

@@ -1,161 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as translate } from './translationStore.js';
-import { g as getZonosStoreTheme, a as zonosStoreFontFamily, z as zonosStore } from './zonosStore.js';
-import { c as classes } from './classes.js';
-import { g as getBorderRadius } from './getBorderRadius.js';
-import { d as defineCustomElement$4 } from './zonos-button2.js';
-import { d as defineCustomElement$3 } from './zonos-icon2.js';
-import { d as defineCustomElement$2 } from './zonos-spinner2.js';
-import { d as defineCustomElement$1 } from './zonos-text2.js';
-
-const ExclamationMarkDuotoneIcon = `<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
-  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-400)"></path>
-  <path d="M12.75 9a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V9Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
-</svg>`;
-
-const HelpDuotoneIcon = `<svg color="var(--zonos-elements-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
-  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-blue-400)"></path>
-  <path d="M10.25 10.25a1.75 1.75 0 1 1 2.431 1.613c-.616.26-1.431.885-1.431 1.887a.75.75 0 0 0 1.5 0c0-.053.02-.128.108-.228.092-.104.236-.205.408-.278A3.25 3.25 0 1 0 8.75 10.25a.75.75 0 0 0 1.5 0Zm2.5 5.75a.75.75 0 0 0-1.5 0v.25a.75.75 0 0 0 1.5 0V16Z" fill="currentColor"></path>
-</svg>`;
-
-const WarningDuotoneIcon = `<svg color="var(--zonos-elements-orange-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
-  <path d="M14.46 5.492c-1.014-2.027-3.906-2.027-4.92 0L4.276 16.02c-.914 1.83.416 3.98 2.46 3.98h10.528c2.044 0 3.374-2.151 2.46-3.98L14.46 5.492Z" data-is-secondary-color="true" fill="var(--zonos-elements-orange-400)"></path>
-  <path d="M12.75 10a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V10Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
-</svg>`;
-
-const zonosConfirmDialogCss = ":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--backdrop,:host .zonos--confirm-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:opacity 0.3s, visibility 0.3s;transition:opacity 0.3s, visibility 0.3s}:host .zonos--backdrop{width:100vw;height:100vh;left:0;top:0;background:var(--zonos-elements-backdrop-color);position:fixed}:host .zonos--confirm-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--zonos-elements-text-color)}:host .zonos--confirm-dialog{position:relative;background:var(--zonos-elements-gray-0);max-width:90vw;max-height:90vh;width:350px;border-radius:var(--border-radius, 10px);outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;gap:24px}:host .icon-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:40px;width:40px;border-radius:50%;background:var(--zonos-elements-blue-100)}:host .warn .icon-wrapper{background:var(--zonos-elements-orange-100)}:host .danger .icon-wrapper{background:var(--zonos-elements-red-100)}:host .footer{display:-ms-flexbox;display:flex;width:100%;gap:8px}:host .footer zonos-button{-ms-flex:1;flex:1}:host .content{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}:host .content zonos-text{text-align:center}:host(.open) .zonos--confirm-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:10003;opacity:0.65}:host(.open) .zonos--confirm-layout{opacity:1;z-index:10004;-webkit-transform:scale(1);transform:scale(1)}";
-const ZonosConfirmDialogStyle0 = zonosConfirmDialogCss;
-
-const ZonosConfirmDialog = /*@__PURE__*/ proxyCustomElement(class ZonosConfirmDialog extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.confirmClicked = createEvent(this, "confirmClicked", 7);
-        this.cancelClicked = createEvent(this, "cancelClicked", 7);
-        this.clickOutsideDialogHandler = (event) => {
-            if (event.target === event.currentTarget && !this.noClickOutside) {
-                this.closeDialogHandler();
-            }
-        };
-        this.dialogTitle = translate('Are you sure?');
-        this.dialogIntent = 'info';
-        this.dialogSubtitle = '';
-        this.submitBtnColor = undefined;
-        this.dialogConfirmBtnText = undefined;
-        this.dialogCancelBtnText = undefined;
-        this.isMobile = false;
-        this.dialogOpen = false;
-        this.noClickOutside = false;
-    }
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            this.closeDialogHandler();
-        }
-    }
-    focusDialog() {
-        if (this.dialogOpen) {
-            setTimeout(() => {
-                var _a, _b;
-                // Focus on a non tabable element (tabIndex=-1), so we will be able to tab to other tabable elements
-                (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--backdrop')) === null || _b === void 0 ? void 0 : _b.focus();
-            }, 100);
-        }
-    }
-    confirmDialogHandler() {
-        // Only do the action if the dialog is open
-        if (!this.dialogOpen) {
-            return;
-        }
-        // Emit confirm event
-        this.confirmClicked.emit();
-    }
-    closeDialogHandler() {
-        // Only do the action if the dialog is open
-        if (!this.dialogOpen) {
-            return;
-        }
-        // Emit cancel event
-        this.cancelClicked.emit();
-    }
-    renderIcon() {
-        switch (this.dialogIntent) {
-            case 'info':
-                return (h("zonos-icon", { content: HelpDuotoneIcon, iconColor: 'blue-800' }));
-            case 'danger':
-                return (h("zonos-icon", { content: ExclamationMarkDuotoneIcon, iconColor: 'red-800' }));
-            case 'warn':
-                return (h("zonos-icon", { content: WarningDuotoneIcon, iconColor: 'orange-800' }));
-        }
-    }
-    getButtonConfirmVariant() {
-        switch (this.dialogIntent) {
-            case 'warn':
-                return 'warning';
-            case 'danger':
-                return 'danger';
-            default:
-                return 'primary';
-        }
-    }
-    render() {
-        this.focusDialog();
-        const borderStyle = getBorderRadius();
-        // Get theme for the update dialog, inherit from the theme, no from this component theme
-        const theme = getZonosStoreTheme(zonosStore.appearance.theme);
-        return (h(Host, { key: '9adab1c77e8087cfbb92a52e66d12f1b1917bf7e', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-theme": theme, style: {
-                '--border-radius': borderStyle,
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'c5b40120ff7b3c4684eb65fb5ef6f8ffa157f98f', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: 'c7cf4d2839cb42a064b4303bdefdfe4fed116b2a', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '30256495401f4967371e923055dfe9efed8cb6b7', class: "zonos--confirm-dialog", onBlur: () => {
-                this.focusDialog();
-            } }, h("div", { key: '6121ab29b80d233f9ca47aaf66725fe91ae6827c', class: "wrapper" }, h("div", { key: '8fbb75eca3ee163b57c60159d5c5374382f3fa33', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '56376add713778af1df087c0f9f4b8d90065caa2', class: "content" }, h("div", { key: '4f31ad7d42127c5350a64b86ae12fde42a350422', class: "title" }, h("zonos-text", { key: '7a5dc82d3f2250c1b3a3403e116736cedcf63f51', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '87b04af2b1984a8cf205b6fa0acf0320f56342e7', class: "subtitle" }, h("zonos-text", { key: '53d0157655b1d8193a0f698e41442b676d9e0ca6', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '4b410f4a4079a25549bef228c3b9a81a64fe20e2', class: "footer" }, h("zonos-button", { key: '5a8ffb99756bd142605c564df381bfb9e72d5d78', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText), h("zonos-button", { key: '61c2b8272202f316ec09441ab64428c557073c9d', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return this; }
-    static get style() { return ZonosConfirmDialogStyle0; }
-}, [1, "zonos-confirm-dialog", {
-        "dialogTitle": [1, "dialog-title"],
-        "dialogIntent": [1, "dialog-intent"],
-        "dialogSubtitle": [1, "dialog-subtitle"],
-        "submitBtnColor": [1, "submit-btn-color"],
-        "dialogConfirmBtnText": [1, "dialog-confirm-btn-text"],
-        "dialogCancelBtnText": [1, "dialog-cancel-btn-text"],
-        "isMobile": [4, "is-mobile"],
-        "dialogOpen": [4, "dialog-open"],
-        "noClickOutside": [4, "no-click-outside"]
-    }, [[4, "keydown", "handleKeyDown"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-confirm-dialog", "zonos-button", "zonos-icon", "zonos-spinner", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-confirm-dialog":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosConfirmDialog);
-            }
-            break;
-        case "zonos-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "zonos-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "zonos-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosConfirmDialog as Z, defineCustomElement as d };

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

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

package/dist/components/zonos-controller.js

@@ -1,309 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { v as handleFetch, l as logError, B as isValidSelector, d as log, s as stripeStore, C as initLocalizationStore, f as localizationStoreUpdateSelectedCountryCode } from './stripe.js';
-import { z as zonosStore, d as zonosStoreInitSetting, a as zonosStoreFontFamily } from './zonosStore.js';
-import { d as defineCustomElement$3 } from './zonos-notification2.js';
-import { d as defineCustomElement$2 } from './zonos-text2.js';
-
-const getZonosSettings = async () => {
-    const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/zonos-settings`;
-    const { errors, json } = await handleFetch(url);
-    if (errors.length) {
-        logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);
-        return { errors, json: null };
-    }
-    return { errors: [], json };
-};
-
-const injectCheckoutElement = () => {
-    // append checkout component if doesn't exist
-    const checkoutElement = document.querySelector('zonos-checkout');
-    if (!checkoutElement) {
-        const newCheckoutElement = document.createElement('zonos-checkout');
-        document.body.appendChild(newCheckoutElement);
-    }
-};
-const initCheckout = (config) => {
-    if (!config.placeOrderButtonSelector) {
-        // do nothing if checkout button anchor is not set
-        return;
-    }
-    // check if checkout button anchor selector user pass in is valid
-    if (!isValidSelector(config.placeOrderButtonSelector)) {
-        logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
-        return;
-    }
-    injectCheckoutElement();
-};
-
-const injectHelloComponent = (anchorElementSelector) => {
-    const triggerAnchorElement = document.querySelector(anchorElementSelector);
-    // append checkout component if doesn't exist
-    const helloElement = document.querySelector('zonos-hello');
-    if (!helloElement && triggerAnchorElement) {
-        const newHelloElement = document.createElement('zonos-hello');
-        triggerAnchorElement.appendChild(newHelloElement);
-        return true;
-    }
-    return false;
-};
-/**
- * Injects the hello mobile wrapper to the DOM and returns the anchor element selector
- * @returns anchor element selector
- */
-const injectHelloMobileWrapper = ({ position = 'bottom-right', }) => {
-    const mobileAnchorSelector = '.zonos--hello-mobile-wrapper';
-    const helloMobileWrapper = document.querySelector(mobileAnchorSelector);
-    if (helloMobileWrapper) {
-        return mobileAnchorSelector;
-    }
-    const newHelloMobileWrapper = document.createElement('div');
-    newHelloMobileWrapper.className = 'zonos--hello-mobile-wrapper';
-    newHelloMobileWrapper.style.position = 'fixed';
-    if (position === 'top-right') {
-        newHelloMobileWrapper.style.top = '72px';
-        newHelloMobileWrapper.style.right = '24px';
-    }
-    if (position === 'top-left') {
-        newHelloMobileWrapper.style.top = '72px';
-        newHelloMobileWrapper.style.left = '24px';
-    }
-    if (position === 'bottom-right') {
-        newHelloMobileWrapper.style.bottom = '72px';
-        newHelloMobileWrapper.style.right = '24px';
-    }
-    if (position === 'bottom-left') {
-        newHelloMobileWrapper.style.bottom = '72px';
-        newHelloMobileWrapper.style.left = '24px';
-    }
-    newHelloMobileWrapper.style.zIndex = '2147483007';
-    document.body.appendChild(newHelloMobileWrapper);
-    return mobileAnchorSelector;
-};
-const initHello = async (helloSettings) => {
-    const { anchorElementSelector } = helloSettings;
-    const mobileHelloAnchor = injectHelloMobileWrapper({
-        position: 'bottom-right',
-    });
-    // default to mobile anchor if anchorElementSelector is not provided, so for bigcommerce, we don't need to manually add a anchor every time we onboard a new store
-    const helloAnchor = anchorElementSelector || mobileHelloAnchor;
-    // check if checkout button anchor selector user pass in is valid to setup hello
-    if (!helloAnchor || !isValidSelector(helloAnchor)) {
-        logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
-        return;
-    }
-    log('Hello init complete');
-    const isHelloInjected = injectHelloComponent(helloAnchor);
-    // keep watching for the anchor element to be added to the DOM, then inject hello component
-    if (!isHelloInjected) {
-        const observer = new MutationObserver(() => {
-            const injected = injectHelloComponent(helloAnchor);
-            if (injected) {
-                // disconnect observer if hello is successfully injected
-                observer.disconnect();
-            }
-        });
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
-        // kill observer after 5 seconds if the hello still not injected, if the hello still not injected after 10 seconds, it's likely that the selector the user doesn't want to use hello
-        setTimeout(() => {
-            observer.disconnect();
-        }, 5000);
-    }
-};
-
-const zonosControllerCss = ":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{visibility:hidden;opacity:0;height:0}";
-const ZonosControllerStyle0 = zonosControllerCss;
-
-const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.stripeInitEvent = createEvent(this, "stripeInitEvent", 7);
-        this.config = undefined;
-        this.zonosApiKey = undefined;
-    }
-    /**
-     * Method to initialize checkout element
-     */
-    async initCheckoutElement(stripe) {
-        if (!stripe) {
-            log('Stripe is not loaded yet - cannot init checkout element', 'warn');
-            return;
-        }
-        stripeStore.stripe = stripe;
-        void initCheckout(zonosStore.checkoutSettings);
-        log('init checkout element');
-    }
-    /**
-     * Init zonos notification
-     */
-    initZonosNotification() {
-        const existingNotification = document.querySelector('zonos-notification');
-        if (existingNotification) {
-            return;
-        }
-        const zonosNotification = document.createElement('zonos-notification');
-        document.body.appendChild(zonosNotification);
-    }
-    /**
-     * Setup google font
-     */
-    async setupGoogleFont(overrideFont) {
-        var _a, _b;
-        // use override font if it exists, otherwise use font from setting
-        const fontSelected = overrideFont || zonosStoreFontFamily();
-        if (fontSelected === 'Inter') {
-            if (!overrideFont) {
-                // Do nothing if font is Inter, since we already inject it on start
-                return;
-            }
-            log(`[FONT] Just applied Inter , but no need to inject since we already inject Inter on start`, 'warn');
-            zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.appearance), { fontFamily: overrideFont });
-        }
-        const routeUrl = "https://v1.route.js.zonos.com";
-        const { errors, json } = await handleFetch(`${routeUrl}/api/zonos-elements/get-font-detail?family=${fontSelected}`);
-        if (errors.length > 0 || !json) {
-            log(`Failed to load font ${fontSelected}`, 'warn');
-            return;
-        }
-        const fontUrl = json.fontUrl;
-        (_b = (_a = window.Zonos).injectSupportGoogleFont) === null || _b === void 0 ? void 0 : _b.call(_a, fontUrl);
-        if (!overrideFont) {
-            return;
-        }
-        // apply override font
-        log(`[FONT] ${overrideFont} font override applied`);
-        zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.appearance), { fontFamily: overrideFont });
-    }
-    async componentWillLoad() {
-        zonosStore.zonosApiKey = this.zonosApiKey;
-        // running with scope async function to avoid blocking the main thread
-        (async () => {
-            var _a, _b;
-            const { errors, json } = await getZonosSettings();
-            if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
-                log('Failed to load zonos settings. This domain may not have access', 'warn');
-                return;
-            }
-            // init zonos notification
-            this.initZonosNotification();
-            // load default setting if fail to load user setting
-            zonosStoreInitSetting({
-                overrideSettings: this.config,
-                zonosSettings: json,
-            });
-            // setup google font after store loaded
-            void this.setupGoogleFont();
-            if (zonosStore.helloSettings) {
-                void initHello(zonosStore.helloSettings);
-            }
-            // init localization store
-            await initLocalizationStore();
-            // checkout init
-            const publishableKey = ((_b = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _b === void 0 ? void 0 : _b.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
-            if (!publishableKey || !this.stripeInitEvent) {
-                log('Checkout failed to load -- missing publishable key', 'warn');
-                return;
-            }
-            if (zonosStore.checkoutSettings.subscriptionStatus === 'INACTIVE') {
-                log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
-                log('zonos controller loaded');
-                return;
-            }
-            if (zonosStore.checkoutSettings.visibilityStatus === 'DISABLED') {
-                log('=== Checkout is disabled by store owner ===', 'warn');
-                log('zonos controller loaded');
-                return;
-            }
-            // send publishable key out to load stripe
-            this.stripeInitEvent.emit({
-                publishableKey: publishableKey.token,
-            });
-            log('zonos controller loaded');
-        })();
-    }
-    /**
-     * Show notification
-     */
-    async showNotification(notification) {
-        const notificationElement = document.querySelector('zonos-notification');
-        if (!notificationElement) {
-            log('Failed to show notification - zonos-notification not found', 'warn');
-            return;
-        }
-        void notificationElement.showNotification(notification);
-    }
-    /**
-     * Override the setting
-     * @param config config that need to override the default setting
-     */
-    async overrideConfig(config) {
-        zonosStoreInitSetting({
-            overrideSettings: config,
-            zonosSettings: null,
-        });
-    }
-    /**
-     * Override country code for storybook
-     */
-    async overrideCountry(countryCode) {
-        void localizationStoreUpdateSelectedCountryCode(countryCode);
-    }
-    /**
-     * Get appearance from setting
-     */
-    async getAppearanceSetting() {
-        return zonosStore.appearance;
-    }
-    /**
-     * Update the organizationName
-     */
-    async updateOrganizationName(organizationName) {
-        zonosStore.organizationName = organizationName;
-    }
-    render() {
-        return h(Host, { key: '129317aa410d96319846670a1aaae29490993b19', class: "zonos--elements" });
-    }
-    static get style() { return ZonosControllerStyle0; }
-}, [1, "zonos-controller", {
-        "config": [16],
-        "zonosApiKey": [1, "zonos-api-key"],
-        "initCheckoutElement": [64],
-        "setupGoogleFont": [64],
-        "showNotification": [64],
-        "overrideConfig": [64],
-        "overrideCountry": [64],
-        "getAppearanceSetting": [64],
-        "updateOrganizationName": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-controller", "zonos-notification", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-controller":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosController$1);
-            }
-            break;
-        case "zonos-notification":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZonosController = ZonosController$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZonosController, defineCustomElement };