@zonos/elements 1.2.3 → 1.2.4-alpha.10

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as localizationStoreUpdateSelectedCountryCode, t as translate, b as localizationStore } from './localization.js';
+import { d as zonosStoreFontFamily } from './zonosStore.js';
 import { d as defineCustomElement$6 } from './zonos-button2.js';
 import { d as defineCustomElement$5 } from './zonos-country-flag2.js';
 import { d as defineCustomElement$4 } from './zonos-icon2.js';
@@ -1788,89 +1789,91 @@ Fuse.config = Config;
 
 const ArrowLeftBlue = `<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg" color="var(--amino-blue-600)"><path clip-rule="evenodd" d="M9.707 16.707a1 1 0 0 1-1.414 0l-3.647-3.646a1.5 1.5 0 0 1 0-2.122l3.647-3.646a1 1 0 0 1 1.414 1.414L7.414 11H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
-const zonosCountrySelectCss = ":host{font-family:Inter;display:block}: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--country-select{max-height:60vh}:host .zonos--country-select .zonos--country-select-header{position:relative;text-align:center}:host .zonos--country-select .zonos--country-select-header .zonos--country-select-back{position:absolute;top:-3px;left:0px}:host .zonos--country-select .zonos--country-select-input{padding:var(--amino-space-8);border-radius:var(--amino-radius-4);border:var(--amino-border)}:host .zonos--country-select .zonos--country-select-country{display:-ms-flexbox;display:flex;gap:var(--amino-space-16);padding:var(--amino-space-8);-ms-flex-align:center;align-items:center;border-radius:var(--amino-radius-4);cursor:pointer;width:100%;border:none;background:none}:host .zonos--country-select .zonos--country-select-country:hover{background:var(--amino-gray-100)}:host .zonos--country-select .zonos--country-select-country .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:24px;height:18px;position:relative;overflow:hidden;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center}@media (max-width: 768px){:host .zonos--country-select .zonos--country-select-country .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:24px}}";
+const zonosCountrySelectCss = ":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--country-select{max-height:60vh}:host .zonos--country-select .zonos--country-select-header{position:relative;text-align:center}:host .zonos--country-select .zonos--country-select-header .zonos--country-select-back{position:absolute;top:-3px;left:0px}:host .zonos--country-select .zonos--country-select-input{padding:var(--amino-space-8);border-radius:var(--amino-radius-4);border:var(--amino-border)}:host .zonos--country-select .zonos--country-select-country{display:-ms-flexbox;display:flex;gap:var(--amino-space-16);padding:var(--amino-space-8);-ms-flex-align:center;align-items:center;border-radius:var(--amino-radius-4);cursor:pointer;width:100%;border:none;background:none}:host .zonos--country-select .zonos--country-select-country:hover{background:var(--amino-gray-100)}:host .zonos--country-select .zonos--country-select-country .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:24px;height:18px;position:relative;overflow:hidden;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center}@media (max-width: 768px){:host .zonos--country-select .zonos--country-select-country .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:24px}}";
 
 const ZonosCountrySelect = /*@__PURE__*/ proxyCustomElement(class ZonosCountrySelect extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.countrySelected = (countryCode) => {
-      // mutate the selected country code in store
-      void localizationStoreUpdateSelectedCountryCode(countryCode);
-      this.closeCountrySelect();
-    };
-    this.handleInputChange = (event) => {
-      const input = event.target;
-      this.inputValue = input.value;
-    };
-    this.closeCountrySelect = () => { };
-    this.inputValue = '';
-  }
-  render() {
-    var _a;
-    const { selectedCountryCode, shippingZoneCountries } = localizationStore;
-    const countries = shippingZoneCountries
-      ? Object.values(shippingZoneCountries)
-      : [];
-    const fuse = new Fuse(countries, {
-      keys: ['displayName'],
-    });
-    const fuseObject = fuse.search(this.inputValue.toLowerCase());
-    const filteredCountries = this.inputValue
-      ? fuseObject.map(country => country.item)
-      : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-    return (h(Host, { class: "zonos--elements" }, h("div", { class: "zonos--country-select" }, h("zonos-v-stack", null, h("div", { class: "zonos--country-select-header" }, h("zonos-button", { class: "zonos--country-select-back", color: "blue-600", icon: h("zonos-icon", { color: "blue-600", content: ArrowLeftBlue, size: 18 }), onClick: () => this.closeCountrySelect(), variant: "subtle" }, translate('Back')), h("zonos-text", null, shippingZoneCountries &&
-      selectedCountryCode &&
-      ((_a = shippingZoneCountries[selectedCountryCode]) === null || _a === void 0 ? void 0 : _a.displayName))), h("zonos-v-stack", { spacing: 8 }, h("input", { class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Enter country", value: this.inputValue }), h("div", null, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: country.code }), h("zonos-text", { color: "gray-800" }, country.displayName))))))))));
-  }
-  static get style() { return zonosCountrySelectCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.countrySelected = (countryCode) => {
+            // mutate the selected country code in store
+            void localizationStoreUpdateSelectedCountryCode(countryCode);
+            this.closeCountrySelect();
+        };
+        this.handleInputChange = (event) => {
+            const input = event.target;
+            this.inputValue = input.value;
+        };
+        this.closeCountrySelect = () => { };
+        this.inputValue = '';
+    }
+    render() {
+        var _a;
+        const { selectedCountryCode, shippingZoneCountries } = localizationStore;
+        const countries = shippingZoneCountries
+            ? Object.values(shippingZoneCountries)
+            : [];
+        const fuse = new Fuse(countries, {
+            keys: ['displayName'],
+        });
+        const fuseObject = fuse.search(this.inputValue.toLowerCase());
+        const filteredCountries = this.inputValue
+            ? fuseObject.map(country => country.item)
+            : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
+        return (h(Host, { class: "zonos--elements", style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { class: "zonos--country-select" }, h("zonos-v-stack", null, h("div", { class: "zonos--country-select-header" }, h("zonos-button", { class: "zonos--country-select-back", color: "blue-600", icon: h("zonos-icon", { color: "blue-600", content: ArrowLeftBlue, size: 18 }), onClick: () => this.closeCountrySelect(), variant: "subtle" }, translate('Back')), h("zonos-text", null, shippingZoneCountries &&
+            selectedCountryCode &&
+            ((_a = shippingZoneCountries[selectedCountryCode]) === null || _a === void 0 ? void 0 : _a.displayName))), h("zonos-v-stack", { spacing: 8 }, h("input", { class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Enter country", value: this.inputValue }), h("div", null, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: country.code }), h("zonos-text", { color: "gray-800" }, country.displayName))))))))));
+    }
+    static get style() { return zonosCountrySelectCss; }
 }, [1, "zonos-country-select", {
-    "closeCountrySelect": [16],
-    "inputValue": [32]
-  }]);
+        "closeCountrySelect": [16],
+        "inputValue": [32]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-country-select", "zonos-button", "zonos-country-flag", "zonos-icon", "zonos-spinner", "zonos-text", "zonos-v-stack"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-country-select":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCountrySelect);
-      }
-      break;
-    case "zonos-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "zonos-country-flag":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "zonos-icon":
-      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;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-country-select", "zonos-button", "zonos-country-flag", "zonos-icon", "zonos-spinner", "zonos-text", "zonos-v-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-country-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCountrySelect);
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "zonos-country-flag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "zonos-icon":
+            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 { ZonosCountrySelect as Z, defineCustomElement as d };

package/dist/components/zonos-custom-message.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosCustomMessage extends Components.ZonosCustomMessage, HTMLElement {}
 export const ZonosCustomMessage: {
-  prototype: ZonosCustomMessage;
-  new (): ZonosCustomMessage;
+    prototype: ZonosCustomMessage;
+    new (): ZonosCustomMessage;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-custom-message2.js

@@ -1,53 +1,56 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as zonosStoreFontFamily } from './zonosStore.js';
 import { d as defineCustomElement$3 } from './zonos-card2.js';
 import { d as defineCustomElement$2 } from './zonos-icon2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-const zonosCustomMessageCss = ":host{font-family:Inter;display:block}: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--custom-message{background:var(--amino-gray-50);border-radius:var(--amino-radius-6)}:host .zonos--custom-message .zonos--flex-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}";
+const zonosCustomMessageCss = ":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--custom-message{background:var(--amino-gray-50);border-radius:var(--amino-radius-6)}:host .zonos--custom-message .zonos--flex-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}";
 
 const ZonosCustomMessage = /*@__PURE__*/ proxyCustomElement(class ZonosCustomMessage extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.icon = '';
-    this.message = '';
-  }
-  render() {
-    return (h(Host, { class: "zonos--elements" }, h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: this.icon }), h("zonos-text", null, this.message)))));
-  }
-  static get style() { return zonosCustomMessageCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.icon = '';
+        this.message = '';
+    }
+    render() {
+        return (h(Host, { class: "zonos--elements", style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: this.icon }), h("zonos-text", null, this.message)))));
+    }
+    static get style() { return zonosCustomMessageCss; }
 }, [1, "zonos-custom-message", {
-    "icon": [1],
-    "message": [1]
-  }]);
+        "icon": [1],
+        "message": [1]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-custom-message", "zonos-card", "zonos-icon", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-custom-message":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCustomMessage);
-      }
-      break;
-    case "zonos-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "zonos-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-custom-message", "zonos-card", "zonos-icon", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-custom-message":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCustomMessage);
+            }
+            break;
+        case "zonos-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosCustomMessage as Z, defineCustomElement as d };

package/dist/components/zonos-customer-info.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosCustomerInfo extends Components.ZonosCustomerInfo, HTMLElement {}
 export const ZonosCustomerInfo: {
-  prototype: ZonosCustomerInfo;
-  new (): ZonosCustomerInfo;
+    prototype: ZonosCustomerInfo;
+    new (): ZonosCustomerInfo;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-customer-info2.js

@@ -8,94 +8,94 @@ import { d as defineCustomElement$3 } from './zonos-link-authentication2.js';
 import { d as defineCustomElement$2 } from './zonos-spinner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:Inter;display:block}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:calc(100% - 10px)}";
+const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:calc(100% - 10px)}";
 
 const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerInfo extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.continueClicked = createEvent(this, "continueClicked", 7);
-    /**
-     * handler for continue button click
-     */
-    this.continueClickHandler = () => {
-      this.continueClicked.emit();
-    };
-    this.continueLoading = false;
-    this.submitBtnType = undefined;
-    this.submitBtnColor = undefined;
-    this.defaultAddress = null;
-    this.disabled = true;
-  }
-  watchFormComplete() {
-    if (!this.disabled) {
-      // submit google tag when the form is complete
-      submitGtag('zonos-checkout-customer-info');
+    constructor() {
+        super();
+        this.__registerHost();
+        this.continueClicked = createEvent(this, "continueClicked", 7);
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = () => {
+            this.continueClicked.emit();
+        };
+        this.continueLoading = false;
+        this.submitBtnType = undefined;
+        this.submitBtnColor = undefined;
+        this.defaultAddress = null;
+        this.disabled = true;
     }
-  }
-  render() {
-    var _a, _b;
-    if (!stripeStore.stripeElements) {
-      return null;
+    watchFormComplete() {
+        if (!this.disabled) {
+            // submit google tag when the form is complete
+            submitGtag('zonos-checkout-customer-info');
+        }
     }
-    // make sure data is valid
-    this.disabled =
-      !((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) ||
-        !((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
-    return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
-      // use primary type when on mobile mode
-      variant: this.submitBtnType }, translate('Continue to shipping')))));
-  }
-  static get watchers() { return {
-    "disabled": ["watchFormComplete"]
-  }; }
-  static get style() { return zonosCustomerInfoCss; }
+    render() {
+        var _a, _b;
+        if (!stripeStore.stripeElements) {
+            return null;
+        }
+        // make sure data is valid
+        this.disabled =
+            !((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) ||
+                !((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
+        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            // use primary type when on mobile mode
+            variant: this.submitBtnType }, translate('Continue to shipping')))));
+    }
+    static get watchers() { return {
+        "disabled": ["watchFormComplete"]
+    }; }
+    static get style() { return zonosCustomerInfoCss; }
 }, [2, "zonos-customer-info", {
-    "continueLoading": [4, "continue-loading"],
-    "submitBtnType": [1, "submit-btn-type"],
-    "submitBtnColor": [1, "submit-btn-color"],
-    "defaultAddress": [16],
-    "disabled": [32]
-  }, undefined, {
-    "disabled": ["watchFormComplete"]
-  }]);
+        "continueLoading": [4, "continue-loading"],
+        "submitBtnType": [1, "submit-btn-type"],
+        "submitBtnColor": [1, "submit-btn-color"],
+        "defaultAddress": [16],
+        "disabled": [32]
+    }, undefined, {
+        "disabled": ["watchFormComplete"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-customer-info", "zonos-address", "zonos-button", "zonos-link-authentication", "zonos-spinner", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-customer-info":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCustomerInfo);
-      }
-      break;
-    case "zonos-address":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "zonos-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "zonos-link-authentication":
-      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;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-customer-info", "zonos-address", "zonos-button", "zonos-link-authentication", "zonos-spinner", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-customer-info":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCustomerInfo);
+            }
+            break;
+        case "zonos-address":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-link-authentication":
+            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 { ZonosCustomerInfo as Z, defineCustomElement as d };

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

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosDialog extends Components.ZonosDialog, HTMLElement {}
 export const ZonosDialog: {
-  prototype: ZonosDialog;
-  new (): ZonosDialog;
+    prototype: ZonosDialog;
+    new (): ZonosDialog;
 };
 /**
  * Used to define this component and all nested components recursively.