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

package/dist/components/zonos-address-display.d.ts

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

package/dist/components/zonos-address-display.js

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

package/dist/components/zonos-address-display2.js

@@ -1,64 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as localizationStore } from './stripe.js';
-import { a as translate } from './translationStore.js';
-import { i as isTextContainsNonLatinChars } from './containsNonLatinChars.js';
-import { d as defineCustomElement$2 } from './zonos-country-flag2.js';
-import { d as defineCustomElement$1 } from './zonos-text2.js';
-
-const zonosAddressDisplayCss = ":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--title{margin-bottom:12px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:4px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-line{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .zonos--address-line zonos-text+zonos-text::before{content:\", \";color:var(--zonos-elements-gray-1200);margin-right:4px}:host .zonos--country-flag{width:20px;height:14px;border-radius:2px;margin:1px;position:relative;overflow:hidden;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);margin-right:8px;z-index:10;justify-self:center}";
-const ZonosAddressDisplayStyle0 = zonosAddressDisplayCss;
-
-const ZonosAddressDisplay = /*@__PURE__*/ proxyCustomElement(class ZonosAddressDisplay extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.currentAddress = undefined;
-        this.addressType = undefined;
-    }
-    render() {
-        var _a;
-        const { city, country, email, line1, line2, name, phone, postal_code, state, } = this.currentAddress;
-        const shippingZoneCountry = (_a = localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[country];
-        const renderEnteredInfoText = ({ bold, content, }) => {
-            const textColor = isTextContainsNonLatinChars(content)
-                ? 'red-600'
-                : 'gray-1200';
-            return (h("zonos-text", { textColor: textColor, type: bold ? 'boldLabel' : 'body' }, content));
-        };
-        return (h(Host, { class: "zonos--address-form zonos--elements" }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
-            ? translate('Shipping')
-            : translate('Billing'))), h("div", { class: "zonos--address-group" }, name && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), shippingZoneCountry && (h("div", { class: "zonos--address-line" }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: shippingZoneCountry.code }), ' ', renderEnteredInfoText({
-            content: shippingZoneCountry.displayName,
-        }))))));
-    }
-    static get style() { return ZonosAddressDisplayStyle0; }
-}, [1, "zonos-address-display", {
-        "currentAddress": [16],
-        "addressType": [1, "address-type"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-address-display", "zonos-country-flag", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-address-display":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosAddressDisplay);
-            }
-            break;
-        case "zonos-country-flag":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosAddressDisplay as Z, defineCustomElement as d };

package/dist/components/zonos-address-form.d.ts

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

package/dist/components/zonos-address-form.js

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

package/dist/components/zonos-address-form2.js

@@ -1,84 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as translate } from './translationStore.js';
-import { i as isTextContainsNonLatinChars } from './containsNonLatinChars.js';
-import { d as defineCustomElement$2 } from './zonos-input2.js';
-import { d as defineCustomElement$1 } from './zonos-text2.js';
-
-const zonosAddressFormCss = ":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--title{margin-bottom:20px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:20px;-ms-flex-direction:column;flex-direction:column;margin:1px}:host .zonos--contact{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-row{display:-ms-flexbox;display:flex;gap:8px}:host .zonos--address-row>*{-ms-flex:1;flex:1}:host .zonos--address{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}";
-const ZonosAddressFormStyle0 = zonosAddressFormCss;
-
-const ZonosAddressForm = /*@__PURE__*/ proxyCustomElement(class ZonosAddressForm extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.addressChange = createEvent(this, "addressChange", 7);
-        this.onInputChange = ({ key, value, }) => {
-            this.addressChange.emit(Object.assign(Object.assign({}, this.localAddress), { [key]: value }));
-        };
-        this.currentAddress = undefined;
-        this.translatedAddress = undefined;
-        this.addressType = undefined;
-        this.localAddress = this.currentAddress;
-    }
-    watchCurrentAddress() {
-        var _a, _b, _c, _d, _e, _f;
-        const { city, line1, line2, name, postal_code, state } = this.currentAddress;
-        // Update the local address when the current address changes
-        // If translated address is available, use that instead
-        this.localAddress = Object.assign(Object.assign({}, this.currentAddress), { city: ((_a = this.translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city, line1: ((_b = this.translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1, line2: ((_c = this.translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2]) || line2, name: ((_d = this.translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name, postal_code: ((_e = this.translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code, state: ((_f = this.translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state });
-    }
-    componentWillLoad() {
-        this.watchCurrentAddress();
-    }
-    render() {
-        const { city, country, line1, line2, name, phone, postal_code, state } = this.localAddress;
-        const firstName = name.split(' ')[0] || '';
-        const lastName = name.split(' ')[1] || '';
-        return (h(Host, { key: '9c1ee87200d1f90e9dfac58c49aabba1777373a9', class: "zonos--address-form zonos--elements" }, h("div", { key: 'eec3416268ff2324fd751408552705086905423d', class: "zonos--title" }, h("zonos-text", { key: 'a4c254f78420dcfc712e1a83b20dd3ac9e64c460', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
-            ? translate('Shipping')
-            : translate('Billing'))), h("div", { key: 'b8109545d282fb8c06a2e791c30088018d6ffec0', class: "zonos--address-group" }, h("div", { key: '833a395984cd75242e5d97697fd6566f11932d1b', class: "zonos--contact" }, h("zonos-text", { key: 'e60f574e95162aabf6465b878fc9b16c708e8029', type: "label" }, translate('Contact')), h("zonos-input", { key: '24cd24a362a1bbc76d0c91718c48ae32baa20ae6', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: '84e64ef44eb3b39ac7ab542e07d7a52a95377cae', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: '26621aca0d57a7fee743874b8d11af5f58c91b69', class: "zonos--form-first-name", inputLabel: translate('First name'), inputValue: firstName, isError: isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
-                key: 'name',
-                value: `${e.detail} ${lastName}`,
-            }) }), h("zonos-input", { key: '01e3e5038b4a4311dd5874a1213f936451dc300d', class: "zonos--form-last-name", inputLabel: translate('Last name'), inputValue: lastName, isError: isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
-                key: 'name',
-                value: `${firstName} ${e.detail}`,
-            }) }))), h("div", { key: 'eb42dece28082ff16a453110b3208de5b44b9fdb', class: "zonos--address" }, h("zonos-text", { key: '3557122c716533be7b36a8bd395ea616a7061665', type: "label" }, translate('Address')), h("zonos-input", { key: 'bcc7d84d530f2f3a10537117eb6ef143df7cc8e2', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: '6ce78e25151a129b69b501cf768604134a395e85', class: "zonos--form-line1", inputLabel: translate('Address line 1'), inputValue: line1, isError: isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), h("zonos-input", { key: '6f7a18010e2d8131327154a31ba58544df56768c', class: "zonos--form-line2", inputLabel: translate('Address line 2'), inputValue: line2, isError: isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), h("div", { key: '48afbf7a3cbd26fddfea4f2799005a51b1c3d3c6', class: "zonos--address-row" }, h("zonos-input", { key: '6decf8c430d8d25b2c555b110009da74e0ac9e5f', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), h("zonos-input", { key: '065e1be213d3cfec7749ab32890f96b0b484a25a', class: "zonos--form-state", inputLabel: translate('State/Province'), inputValue: state, isError: isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), h("zonos-input", { key: 'a69244bf84c9fd007c9ad4aad2b6cc6d44420775', class: "zonos--form-postal-code", inputLabel: translate('Postal code'), inputValue: postal_code, isError: isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), h("zonos-input", { key: '0bcc89de1ecc4aae8a69d74eff42dfd117ada40b', class: "zonos--form-phone", inputLabel: translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
-    }
-    static get watchers() { return {
-        "translatedAddress": ["watchCurrentAddress"]
-    }; }
-    static get style() { return ZonosAddressFormStyle0; }
-}, [1, "zonos-address-form", {
-        "currentAddress": [16],
-        "translatedAddress": [16],
-        "addressType": [1, "address-type"],
-        "localAddress": [32]
-    }, undefined, {
-        "translatedAddress": ["watchCurrentAddress"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-address-form", "zonos-input", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-address-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosAddressForm);
-            }
-            break;
-        case "zonos-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosAddressForm as Z, defineCustomElement as d };

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

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

package/dist/components/zonos-address-update-dialog.js

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

package/dist/components/zonos-address-update-dialog2.js

@@ -1,264 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as translate } from './translationStore.js';
-import { z as zonosStore } from './zonosStore.js';
-import { c as classes } from './classes.js';
-import { c as containsNonLatinChars } from './containsNonLatinChars.js';
-import { d as defineCustomElement$9 } from './zonos-address-display2.js';
-import { d as defineCustomElement$8 } from './zonos-address-form2.js';
-import { d as defineCustomElement$7 } from './zonos-button2.js';
-import { d as defineCustomElement$6 } from './zonos-country-flag2.js';
-import { d as defineCustomElement$5 } from './zonos-dialog2.js';
-import { d as defineCustomElement$4 } from './zonos-icon2.js';
-import { d as defineCustomElement$3 } from './zonos-input2.js';
-import { d as defineCustomElement$2 } from './zonos-spinner2.js';
-import { d as defineCustomElement$1 } from './zonos-text2.js';
-
-const RemoveIcon = `<svg color="var(--zonos-elements-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--zonos-elements-gray-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
-
-const zonosAddressUpdateDialogCss = ":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--body{padding:0 24px;position:relative}:host .zonos--dialog-header{margin-bottom:32px;position:-webkit-sticky;position:sticky;padding-top:24px;top:0;z-index:11;background:var(--zonos-elements-gray-0)}:host .zonos--dialog-title{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:12px}:host .zonos--group{overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:8px}:host .zonos--group::-webkit-scrollbar{width:10px}:host .zonos--group::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}:host .zonos--group::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}:host .zonos--group::-webkit-scrollbar-thumb:hover{background:#d6d6d6}:host .zonos--address-display-group{display:-ms-flexbox;display:flex;gap:8px;margin-bottom:20px}:host .zonos--address-display-group zonos-address-display{-ms-flex:1;flex:1}:host .zonos--what-you-entered{margin-bottom:8px}:host .zonos--address-form-section{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}:host .zonos--group-btn{position:-webkit-sticky;position:sticky;padding:24px 0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:end;background:var(--zonos-elements-gray-0);z-index:11}:host .zonos--group-btn .zonos--button-wrapper{display:-ms-flexbox;display:flex;gap:8px}:host(.mobile) .zonos--button-wrapper{-ms-flex-direction:column;flex-direction:column;width:100%}:host(.mobile) .zonos--button-wrapper zonos-button{width:100%}:host(.mobile) .zonos--button-wrapper .zonos--cancel-btn{-ms-flex-order:2;order:2}:host(.mobile) .zonos--button-wrapper .zonos--update-btn{-ms-flex-order:1;order:1}";
-const ZonosAddressUpdateDialogStyle0 = zonosAddressUpdateDialogCss;
-
-const ZonosAddressUpdateDialog = /*@__PURE__*/ proxyCustomElement(class ZonosAddressUpdateDialog extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.closeDialog = createEvent(this, "closeDialog", 7);
-        this.continueClicked = createEvent(this, "continueClicked", 7);
-        /**
-         * handler for close button click
-         */
-        this.closeDialogHandler = () => {
-            this.closeDialog.emit();
-        };
-        /**
-         * Extract value from translated object
-         */
-        this.getTranslatedAddress = ({ currentAddress, translatedAddress, }) => {
-            var _a, _b, _c, _d, _e, _f;
-            const { city, line1, line2, name, postal_code, state } = currentAddress;
-            return {
-                city: ((_a = translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city,
-                line1: ((_b = translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1,
-                line2: ((_c = translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2]) || line2,
-                name: ((_d = translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name,
-                postal_code: ((_e = translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code,
-                state: ((_f = translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state,
-            };
-        };
-        /**
-         * handler for continue button click
-         */
-        this.continueClickHandler = async () => {
-            var _a, _b, _c;
-            // set spinner for the continue button
-            this.continueLoading = true;
-            const translatedBillingAddress = this.billingAddress
-                ? this.getTranslatedAddress({
-                    currentAddress: this.billingAddress,
-                    translatedAddress: this.translatedBillingAddressState,
-                })
-                : null;
-            const translatedShippingAddress = this.getTranslatedAddress({
-                currentAddress: this.shippingAddress,
-                translatedAddress: this.translatedShippingAddressState,
-            });
-            // check to see if there are still non-latin characters in the translated address
-            const shippingNonlatinChars = containsNonLatinChars(Object.assign(Object.assign({}, translatedShippingAddress), { country: this.shippingAddress.country }));
-            // get list of non-latin characters field in the billing address
-            const billingNonLatinChars = translatedBillingAddress &&
-                this.billingAddress &&
-                containsNonLatinChars(Object.assign(Object.assign({}, translatedBillingAddress), { country: this.billingAddress.country }));
-            const shippingHasNonLatinChars = !!Object.keys(shippingNonlatinChars)
-                .length;
-            const billingHasNonLatinChars = !!billingNonLatinChars && !!Object.keys(billingNonLatinChars).length;
-            // if there are non-latin characters in the translated address, scroll to the error input so user can see and fix it
-            if (shippingHasNonLatinChars || billingHasNonLatinChars) {
-                // get scroll top of the first input has "has-error" class
-                const addressForms = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('zonos-address-form');
-                const shippingAddressForm = addressForms === null || addressForms === void 0 ? void 0 : addressForms[0];
-                const billingAddressForm = addressForms === null || addressForms === void 0 ? void 0 : addressForms[1];
-                const errorInput = ((_b = shippingAddressForm === null || shippingAddressForm === void 0 ? void 0 : shippingAddressForm.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.has-error')) ||
-                    ((_c = billingAddressForm === null || billingAddressForm === void 0 ? void 0 : billingAddressForm.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.has-error'));
-                // scroll to the first error input
-                if (errorInput) {
-                    errorInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                }
-                this.continueLoading = false;
-                return;
-            }
-            // Submit the translated address to the parent component
-            this.continueClicked.emit({
-                billingAddress: translatedBillingAddress,
-                shippingAddress: translatedShippingAddress,
-            });
-        };
-        /**
-         * This function builds a state object for a translated address.
-         * It takes the current and translated address as input and returns an object where each field is an object itself.
-         * The key of each field's object is the current address's field value and the value is the corresponding translated address's field value.
-         *
-         * @param {Object} params - The parameters for the function.
-         * @param {EnteredInfo} params.currentAddress - The current address information.
-         * @param {EnteredInfo} params.translatedAddress - The translated address information.
-         *
-         */
-        this.buildTranslateAddressState = ({ currentAddress, translatedAddress, }) => {
-            const { city, line1, line2, name, postal_code, state } = currentAddress;
-            return {
-                city: {
-                    [city]: translatedAddress.city,
-                },
-                line1: {
-                    [line1]: translatedAddress.line1,
-                },
-                line2: {
-                    [line2]: translatedAddress.line2,
-                },
-                name: {
-                    [name]: translatedAddress.name,
-                },
-                postal_code: {
-                    [postal_code]: translatedAddress.postal_code,
-                },
-                state: {
-                    [state]: translatedAddress.state,
-                },
-            };
-        };
-        this.continueLoading = false;
-        this.dialogLoading = undefined;
-        this.dialogOpen = false;
-        this.submitBtnType = undefined;
-        this.submitBtnColor = undefined;
-        this.isMobile = false;
-        this.shippingAddress = undefined;
-        this.billingAddress = undefined;
-        this.translatedShippingAddress = undefined;
-        this.translatedBillingAddress = undefined;
-        this.showErrorBanner = false;
-        this.translatedShippingAddressState = {};
-        this.translatedBillingAddressState = {};
-    }
-    watchTranslatedShippingAddress() {
-        this.translatedShippingAddressState = this.translatedShippingAddress;
-    }
-    watchTranslatedBillingAddress() {
-        this.translatedBillingAddressState = this.translatedBillingAddress;
-    }
-    componentWillLoad() {
-        // update the state with the initial props
-        this.watchTranslatedBillingAddress();
-        this.watchTranslatedShippingAddress();
-    }
-    render() {
-        // dialog background white, so when the button background is also white, we need to change the button type to outline so it's visible
-        const submitBtnColor = this.submitBtnColor || zonosStore.appearance.colorSecondary;
-        const submitBtnType = submitBtnColor === '#ffffff'
-            ? 'outline'
-            : this.submitBtnType || 'standard';
-        const billing = this.billingAddress;
-        const shipping = this.shippingAddress;
-        return (h(Host, { key: '03535edacb348258592641baa349e9dcf14bf78c', class: classes([
-                'zonos--address-update-dialog zonos--elements',
-                this.isMobile && 'mobile',
-            ]) }, h("zonos-dialog", { key: 'c16871425dffe955d422ffa5b9aee1ece0da2890', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: 'e4fad501f7cfedc5783774d8b1bf785d6947d3c8', class: "zonos--body" }, h("div", { key: '973e7a8097b8c8f60e47e6ad9d8311a64a5a6ff0', class: "zonos--dialog-header" }, h("div", { key: '89c82b6ff3723056d161560da22bd16a992afee7', class: "zonos--dialog-title" }, h("zonos-text", { key: 'bf92ef0b40ea67a492164fedb95dd68b7d023e85', type: "title" }, translate('Update your address')), h("zonos-button", { key: '4e7a1905c976cec396db5c34f633b383bba0d55a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("zonos-text", { key: '47b42d8cc14c4757e3fc9f2f43eafbd8d9e9df38' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '28d9804f0a18f143ce541c2c511cbfa21a2a416f', class: "zonos--group" }, h("zonos-text", { key: '43ec5a9fc8594d065b256952ca8e9392fba03839', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: 'b7eb7781ce6aefe20f89b4d5fba190f0102eb5d1', class: "zonos--address-display-group" }, h("zonos-address-display", { key: '152c53176a46575677723ca47386e484c659927a', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: '6c7ac2b49d121c26ce45f09a1eac9ef456d45910', addressType: "billing", currentAddress: billing }))), h("div", { key: '2bda98bb0ac9bafcb009ff36fb97a9fc62ce7e2d', class: "zonos--address-form-section" }, h("zonos-text", { key: '87d3380072a049ccde71ba1b752aedd36830348b', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: '2cb36251c6549da05e272183b2c37478b4166fea', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
-                const address = e.detail;
-                this.translatedShippingAddressState =
-                    this.buildTranslateAddressState({
-                        currentAddress: shipping,
-                        translatedAddress: address,
-                    });
-            }, translatedAddress: this.translatedShippingAddressState }), billing && (h("zonos-address-form", { key: '9bf5ebd6fb08851716a72c855451bfeb3ee0ed68', addressType: "billing", class: "zonos--billing-address-form", currentAddress: billing, onAddressChange: e => {
-                const address = e.detail;
-                this.translatedBillingAddressState =
-                    this.buildTranslateAddressState({
-                        currentAddress: billing,
-                        translatedAddress: address,
-                    });
-            }, translatedAddress: this.translatedBillingAddressState })))), h("div", { key: '621df9c8919973b37c62aca5727bde3635086a6b', class: "zonos--group-btn" }, h("div", { key: '95e9fd31418abc8e89ceef24af7cc251ee45ac93', class: "zonos--button-wrapper" }, h("zonos-button", { key: 'bef31fc81e7cc0f2b3f7ab875a29978b07865b6a', class: "zonos--cancel-btn", onClick: () => this.closeDialogHandler(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: '9d183153541766b421c3420681c1159ffa599682', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, translate('Update address'))))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "translatedShippingAddress": ["watchTranslatedShippingAddress"],
-        "translatedBillingAddress": ["watchTranslatedBillingAddress"]
-    }; }
-    static get style() { return ZonosAddressUpdateDialogStyle0; }
-}, [1, "zonos-address-update-dialog", {
-        "continueLoading": [4, "continue-loading"],
-        "dialogLoading": [4, "dialog-loading"],
-        "dialogOpen": [4, "dialog-open"],
-        "submitBtnType": [1, "submit-btn-type"],
-        "submitBtnColor": [1, "submit-btn-color"],
-        "isMobile": [4, "is-mobile"],
-        "shippingAddress": [16],
-        "billingAddress": [16],
-        "translatedShippingAddress": [16],
-        "translatedBillingAddress": [16],
-        "showErrorBanner": [32],
-        "translatedShippingAddressState": [32],
-        "translatedBillingAddressState": [32]
-    }, undefined, {
-        "translatedShippingAddress": ["watchTranslatedShippingAddress"],
-        "translatedBillingAddress": ["watchTranslatedBillingAddress"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-address-update-dialog", "zonos-address-display", "zonos-address-form", "zonos-button", "zonos-country-flag", "zonos-dialog", "zonos-icon", "zonos-input", "zonos-spinner", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-address-update-dialog":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosAddressUpdateDialog);
-            }
-            break;
-        case "zonos-address-display":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "zonos-address-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "zonos-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "zonos-country-flag":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "zonos-dialog":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "zonos-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "zonos-input":
-            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 { RemoveIcon as R, ZonosAddressUpdateDialog as Z, defineCustomElement as d };

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

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

package/dist/components/zonos-address.js

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