@zonos/elements 1.3.217 → 1.3.219

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -77,17 +77,17 @@ export class ZonosCheckoutProgressTabs {
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: '592fe18f902f828c4dcdcab28221617ba63ea358', class: "zonos--elements", style: {
+        return (h(Host, { key: 'bf2f6ea302aafa40c5b1a763b89bffc47389b7ac', class: "zonos--elements", style: {
                 '--zonos--color': contrastLabelColor,
                 '--zonos--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'd173893ab0da684a189127ab511db90ba3a0985c', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: '043adfc8805b027604880284a99148c9ea06e67b', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
             const isSelected = tab.value === selectedStep;
             return (h("button", { "aria-label": `Tab ${tab.label}`, class: classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => this.setTabSelected(tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1000', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1000' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1000', type: "label" }, translate(tab.label))));
-        })), h("div", { key: 'e424eda69e8338599446f71f407c76617d2b79cf', class: "zonos--tab-progress" }, h("div", { key: 'acccc44ce950da71c8c0ee0798dc2086d9656ed2', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: '991d64c7d79e4e4207e395ec8a3b9b2096e51c6a', class: "zonos--tab-progress" }, h("div", { key: '22471019b9e920af6d35976dd71b0954cc785b62', class: "zonos--progress-bar-fill" }))));
     }
     static get is() { return "zonos-checkout-progress-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-collapse/zonos-collapse.js

@@ -48,10 +48,10 @@ export class ZonosCollapse {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: 'f27608bd02d0800dda8273909aa3041311dda3eb', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '617e4c1a39bae3c5765ba05c6c7d3585c1822aea', class: 'zonos--elements zonos--collapse', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '7901ab34757169767c99b46523e8cc353874a606' }, h("iframe", { key: '1d1e735c535df07e209878f6d66089ab30b943a3', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '213bb5f472be8dfcd026207d706f8a0a3227f5cb' }))));
+            } }, h("div", { key: 'a4ef3763a3b2d802faacd4cc12dc84cfe9ad55a5' }, h("iframe", { key: 'f44ea760cb5c088241a737bd9b82ae0eac22f426', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'c01b886c941c6c50753d50cec244701c9854e589' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

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

@@ -108,13 +108,13 @@ export class ZonosConfirmDialog {
         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: '3d4920dacf3c4b1ae796b10a3d68dc875cbe4267', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+        return (h(Host, { key: 'db5aa58306b17fe38ca876d5602779fe5611d7e2', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
                 '--zonos--border-radius': borderStyle,
                 '--zonos--dialog-width': `${this.dialogWidth}px`,
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'e2b1358dedfb3e5a3dc42099330be1d3bb6845e5', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: 'f4cf0ddf4ee1695bef503809a810710902c2e810', class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'a8910f985165f18399e628b05b5075d04487007b', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, h("div", { key: '58b0efe6933c8e333ccfd885adc275dbc5a094de', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: 'ced1b81db49b1a50d772a037b7cd071be61e27eb', class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '9fc184e5f575e8a7480ab4905f343330ad9b8822', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: '723b4753614273bafe03488cdc5eb7a2a14cfb2c', class: "wrapper" }, h("div", { key: '53faf2cbdcec3acdff25f8471a37afdfb4298ef3', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '8e6ee33eb8ee48acb99066ce964b52e81086176f', class: "content" }, h("div", { key: '6c800bbc27a2e62756b20068b97e5777ebf5fbb2', class: "title" }, h("zonos-text", { key: '7bcad323167f954ae83c9afd7c4473efc5e32c37', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '85ffc3c1492dd432953bc645103590bacd9a3912', class: "subtitle" }, h("zonos-text", { key: 'f7e859f0c8256ead95db3d74b78b50fe6ea84700', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'c35405667155231fb6037147ac35d0c1f5ed0dd0', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '082731ae55230c6fe05307871ef5e6a124616e33', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '4873b0e88c691197104b95658fc00940d97d44b9', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: '965bd556625eedbb0dafc10db8f444cfe4c3ba01', class: "wrapper" }, h("div", { key: '1709fff88c6d3cd08b5144c33db1a5399104291b', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '6daa8cb3f9fcd60d97484c6b4a49a520c8803ded', class: "content" }, h("div", { key: '6dbe0c7487614aaacd471c883258a75a07b3cfde', class: "title" }, h("zonos-text", { key: 'ca32852be94af7c099f15c629663ad560fcc88ea', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '41956c52c59eefe0ca4fb31d37a7aa4de0f032cc', class: "subtitle" }, h("zonos-text", { key: 'ddae90c765fb5b5999b1d5c8e0642ba12a54d369', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'e390a8bb1b3e5ec38ae86a71ab8ad1394c89af72', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '85b0a4a9d5906f7efabde7b0642f575ad35b37cf', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '5b832e2490acb87a99ec31ae4c1a534f765a3b92', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
     }
     static get is() { return "zonos-confirm-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-country-select/zonos-country-select.js

@@ -48,13 +48,13 @@ export class ZonosCountrySelect {
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
         const isEmpty = !filteredCountries.length;
-        return (h(Host, { key: '83c9005b99e1dc8d3b4a4d50e6edbed0f17ce6e0', class: "zonos--elements", style: {
+        return (h(Host, { key: '26efaff6ae3360dc9a362aede455688a2000d411', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '173d6c9d1808e80cdcb808b6418a9e3928e6a971', class: "zonos--country-select" }, h("zonos-v-stack", { key: '47118836d03e8505f9bd87e795387ea19cf67843', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'c5be83953dd01e47dbe814cbe83a114d700de830', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: '2afe5eed1f156b8923a10564cf2b96d2cd6eb9bb', autoComplete: "off", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), ref: el => {
+            } }, h("div", { key: '5935d836049a5bbd539b8a547ac18bd99719b40d', class: "zonos--country-select" }, h("zonos-v-stack", { key: '8fb631ab82e83f1e52c7b1724a3125832e63858d', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'c7a492780bcdba265a57e2b71d7a4e58b6e4075b', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: '31048a054eedaae432a1960b9a8563314c4c2a04', autoComplete: "off", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), ref: el => {
                 if (el) {
                     this.inputRef = el;
                 }
-            }, type: "text", value: this.inputValue }))), h("div", { key: '4d64a4d3c08292ae1f574973c09aa9ec42b48c37', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: 'dc30685daa60063cb9e6c6e7730f54cc5a25249b', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '69f6d39cf40abd951857542d734424623cbd7031', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
+            }, type: "text", value: this.inputValue }))), h("div", { key: 'fef8c16dddf9b9d89e5a6367bf17aeb80286d371', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: '53fe2d70dee8724d5c653a852fa124d8687b481c', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '826ee8d9a6efba02e02de28e9bce79ad5ef00df5', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
                 const country = filteredCountries[index];
                 if (!country) {
                     return null;

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -14,9 +14,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: '9707f415aa509f2a6fbb4f3b190d964d29d6ccd6', class: "zonos--elements", style: {
+        return (h(Host, { key: '952cc3c91fdc1be6653b1e7f9263e3a47903eb27', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: '49b45d654775da75a127775864fdaa4057ad76e0', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'ab666eccf3651d7172ce6de34e6a8c2024d7eb8d', class: "zonos--flex-message" }, h("zonos-icon", { key: '41dae8c063389efa2e319885ef0ee8e03d173d1c', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'c9d9463656c010a9b28568ae61cf0cb09dcda38b', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: '16e893a807ff3443006a91ce9c20816a944e2372', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '58a4fc0eb021c4858b3abd319a73490d38849d99', class: "zonos--flex-message" }, h("zonos-icon", { key: 'c3658bf90139835d37091e4004a0e99c85018401', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: '2a746fd3975699615d82ffcda4b4c446f7d0f32a', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-dialog/zonos-dialog.js

@@ -86,7 +86,7 @@ export class ZonosDialog {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'a9932187bccf8e7fa505c7e07175d03541d66852', class: classes([
+        return (h(Host, { key: 'ba80fedf4f3e98c4de3d81a36104de00366cbb1a', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -98,10 +98,10 @@ export class ZonosDialog {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, h("div", { key: '0298cf365a50e3544656a6d27ae59e922b9e3aed', class: "zonos--backdrop" }), h("div", { key: '9fce580a07147d51f17c898a22204c3d9ce6ac7b', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'b168439cd985cc5c0166a653db206688504cf7dd', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'e0b6215f3c7bc939721669069bc294e08558d8b5', class: "zonos--loading" }, h("zonos-spinner", { key: '687bcd6d2695933de828484c34aff1230bf71d49', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '04a57a4add896e3d96faca8b77321bba5f00b889', class: "zonos--header" }, this.headerText && (h("h3", { key: 'd084cb3aedcb7e5bb8fd82012b57f441d7dce4a2', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'c62701d002586d92f80d1d30644ae3948afc18f6', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: 'a8aa531565e52672573785a613ab87a970189616', class: classes([
+            } }, h("div", { key: '7e61114b6ceb1b39a4f0bb1a0719851d4035bfd3', class: "zonos--backdrop" }), h("div", { key: '459a309060ff4ef98cc0eb2a80363394218f07b7', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '3c4299b298ed8eb163ac5a70153347741032726f', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '0cfd40a79ed8916a47eaaa914ef1ccdd623e8efc', class: "zonos--loading" }, h("zonos-spinner", { key: 'ca3aeb6aa6586a01763b6170814e30a325428508', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '61824114fbb326d323ea2dda14ed28209567d4d6', class: "zonos--header" }, this.headerText && (h("h3", { key: '9c4916f1787d0157f130aeb0ca29e2e871d1dfc6', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'e80895fa1d8ea6d945cebb97392c5fb4b6df7c7b', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: '5cfd70cd4c22b44494c4e62ed6c7af0f3a81f955', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'ede82b27d9e73f27ad0212203e0483a8294f72e5' })), h("slot", { key: '084c3a055462fbf8f25e336891e0dbb5faed7ed7', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: 'c5e818b28959cd89c466cc355cba40e56b49be7f' })), h("slot", { key: '4ded95d727eea855fa7af8a1c34fb0de9dfb7fca', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-h-stack/zonos-h-stack.css

@@ -0,0 +1,38 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing, 24px);
+}

package/dist/collection/components/common/zonos-h-stack/zonos-h-stack.js

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+import { Host } from "@stencil/core/internal";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
+export class HStack {
+    constructor() {
+        /**
+         * The spacing between elements in the stack
+         * @default 24
+         */
+        this.spacing = 24;
+    }
+    render() {
+        return (h(Host, { key: 'e78dcb23a7c91df7f7a2533dc65412f27dd6e969', style: {
+                '--spacing': `${this.spacing}px`,
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("slot", { key: 'cd668b443c01aea20c589fd4ef30636fb4178d3b' })));
+    }
+    static get is() { return "zonos-h-stack"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-h-stack.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-h-stack.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "spacing": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "GridSpacing",
+                    "resolved": "0 | 12 | 16 | 20 | 24 | 32 | 4 | 40 | 8",
+                    "references": {
+                        "GridSpacing": {
+                            "location": "import",
+                            "path": "src/types/styles/GridSpacing",
+                            "id": "src/types/styles/GridSpacing.ts::GridSpacing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "24"
+                        }],
+                    "text": "The spacing between elements in the stack"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "spacing",
+                "reflect": false,
+                "defaultValue": "24"
+            }
+        };
+    }
+}

package/dist/collection/components/common/zonos-input/zonos-input.js

@@ -31,17 +31,17 @@ export class ZonosInput {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (h(Host, { key: '87c0f3819db82f5b731ec02f1dda30888131989a', class: classes([
+        return (h(Host, { key: 'a239adc57fc0cd31bff05447fe10d0ad1e825007', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--zonos--border-radius': getBorderRadius(),
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '0eb35699b27eb262797a599441877b5600d989f0', class: classes([
+            } }, h("div", { key: 'd2f1086b2139b9c7af5ae2882e0dfb0db65028dc', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '75973f2c81e28a0007b047375ead0c5e6f055a14', class: classes([
+            ]) }, h("input", { key: '8e48977b401aed6b36079f732adbc6493bb05804', class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -49,7 +49,7 @@ export class ZonosInput {
             ]), disabled: this.isDisabled, onInput: e => {
                 const input = e.target;
                 this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '23ee9731bfef0417522714dc48a97949eecad145', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '23ece9b49c1d718340a6f0bb59b93ad2dfe34828', class: "zonos--floated-label", "data-label": this.inputLabel }))));
     }
     static get is() { return "zonos-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,9 +20,9 @@ export class ZonosLanguageSelect {
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: 'cc711dba7371852eab6e20994389ae3b95bb3be7', class: "zonos--elements", style: {
+        return (h(Host, { key: '74b0315ab257fff13cf23057f485c0dcfb7edd1b', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '47135e2b7363a3179139a7b8e23cb22435ce3299', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '3bf830e585fa6478f560c57dfa978721af47ad19', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'f693b231755087ec849f5a759b2dc43e2695b24f', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, h("div", { key: 'cc220539afcb6b883eec939edfb6933bf9fb08a0', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '297b34a17100fb10b2fd95b44bc5c9cadad960ab', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '2b85c2aeba8ddcb5a7725089daaf9b0cea025d76', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
     static get is() { return "zonos-language-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-link/zonos-link.js

@@ -7,7 +7,7 @@ export class ZonosLink {
         this.href = '';
     }
     render() {
-        return (h(Host, { key: '41f0a757a334338631250764599ac99e28c41ed2', class: "zonos--elements" }, h("a", { key: 'b6e84f40141e8de85d005c05426f885f242ffc53', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'dd5ed33f163d7958fb7806992e003d2279ee1f5b' }))));
+        return (h(Host, { key: 'd39155a476f2043e12e6869abdec2bde6872951a', class: "zonos--elements" }, h("a", { key: '8fe2d59047850181984a00747ddc341ef88cb302', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '4eef2f735b77fce6f254e44ca0d4aded68863468' }))));
     }
     static get is() { return "zonos-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-loading-overlay/zonos-loading-overlay.js

@@ -13,7 +13,7 @@ export class ZonosLoadingOverlay {
         this.size = 40;
     }
     render() {
-        return (h(Host, { key: 'eff20c3fe4c4a998748ac07567cc5449efc398cd', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: '1b37bfc1a150720e0f4f84075ac661e5395aee3b', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '42ac91e723802b23897b6e5cd99e0aea7d964da5', size: this.size, spinnerColor: this.spinnerColor }))));
+        return (h(Host, { key: 'da6d878d0f96774f287dafd3538c09fdf45eb314', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: '607ee229bf8494fab6ec453d5f664e7a1084bb5c', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: 'f3021c39258f61d5767889ea9f83f1097d7f5688', size: this.size, spinnerColor: this.spinnerColor }))));
     }
     static get is() { return "zonos-loading-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-logo/zonos-logo.js

@@ -16,11 +16,11 @@ export class ZonosLogo {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: 'c41a277084d4880e1f452a1f7ca097ad3507059f', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: '0b8e78167613096d36d1f500e21284194246974e', class: classes(['zonos--elements zonos--logo']), style: {
                 '--zonos--filter-color': filterColor,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--width': this.width,
-            } }, h("img", { key: '01361446c08074a8f8b4cac206a999e381d5d903', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: 'd657a31c178c580a90e268ebc4b06fb4d0e15eae', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-rest-state/zonos-rest-state.js

@@ -14,11 +14,11 @@ export class ZonosRestState {
     }
     render() {
         const imageUrl = this.getImageRestState();
-        return (h(Host, { key: '754bdcff113a9ec5351d1053ddaea5e542111bbc', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: '1259c56e28646e85893b129c22402e9d7cfe18f8', class: classes(['zonos--elements zonos--restState']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '3037acffd2d7da9bac11ada7cd4e06e2ae976f72', class: "zonos--restState-image" }, h("img", { key: 'd462d07f452caaaf87af20e1b2aad6ac45b43107', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: '3cba2e86f4952f5d2a171017ad1f6eaa62aacc6a', class: "zonos--restState-image" }, h("img", { key: '8f656c89ef030c1eddec8cd95d6a15df889c6ed2', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: '9acf78ef8358ad75df01bbbb1ed52b680f896255', class: "content" }, h("zonos-text", { key: '8310474f006a1fc1dcf96bac09c770572b20590a', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '623dc98d57eaae5fb1059c658391300aa41a13fb', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'f69613147698a147447a0aac330ad1c67739fed0', class: "action" }, h("slot", { key: '823ff6075ecac4598299c29ab2e44a6d5fb6a5d8' }))));
+            }, src: imageUrl })), h("div", { key: '963cf06ac769d8b3bfeb7b36824cb1b6821b5498', class: "content" }, h("zonos-text", { key: 'dacc2d0c125d41e5a72c57a5b611789bb005fc46', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '32db4bc138b4cc6c5fab3fd6aa14b51c31ffaf80', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '28f933f06737ac076d2da9dcc1530f01ddb93575', class: "action" }, h("slot", { key: 'd974a157a01c4e2305255fc4032868e86af162b5' }))));
     }
     static get is() { return "zonos-rest-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-select-dialog-header/zonos-select-dialog-header.js

@@ -15,9 +15,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: '184508c2af24eedda1e4a59db89f787cd71a345f', class: "zonos--elements", style: {
+        return (h(Host, { key: '999f6edfe39142a7539164d2c046aa44945ff23f', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '28bd290a2307c13e93036ee988f71bba87e76b19', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '49c2a1c0c44d9950907f47d90c9a34a83e5158da', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '244ef10f5ee38d4a056ad6c076185d42ca3cd174', type: "boldLabel" }, this.label), h("zonos-button", { key: 'dab99b609f1a3250f73e2f25b837c9300a964090', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: 'b2fdb25cdc7c6382ec8d171aa14f1f4b7f33a4e8' }))));
+            } }, h("zonos-v-stack", { key: '1213364336cd7f809f4f2539835f86b2b6b30273', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'af342994ec6e54a08ccee92443977c06e5e6bd65', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '81c1a17bb93b0e4ba7a9874d34f6ce2fdcf3321e', type: "boldLabel" }, this.label), h("zonos-button", { key: 'e321c6d3a6020d4c3ccdac84bbf1025e5ef490c1', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: 'f3583feb7eba033767769e1b06c24961d2e4f56a' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-skeleton/assets/RemoveLineIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8282 5.17184C11.0235 5.3671 11.0235 5.68368 10.8282 5.87894L8.70688 8.00026L10.8282 10.1216C11.0235 10.3168 11.0235 10.6334 10.8282 10.8287C10.6329 11.024 10.3164 11.024 10.1211 10.8287L7.99978 8.70737L5.87846 10.8287C5.68319 11.024 5.36661 11.024 5.17135 10.8287C4.97609 10.6334 4.97609 10.3168 5.17135 10.1216L7.29267 8.00026L5.17135 5.87894C4.97609 5.68368 4.97609 5.3671 5.17135 5.17184C5.36661 4.97658 5.68319 4.97658 5.87846 5.17184L7.99978 7.29316L10.1211 5.17184C10.3164 4.97658 10.6329 4.97658 10.8282 5.17184Z" fill="var(--zonos-elements-gray-800)"/>
+</svg>

package/dist/collection/components/common/zonos-skeleton/zonos-skeleton.css

@@ -0,0 +1,40 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: inline-block;
+  background: var(--zonos-elements-gray-200);
+  border-radius: var(--zonos-elements-radius-12);
+  width: var(--zonos--skeleton-width);
+  height: var(--zonos--skeleton-height);
+}

package/dist/collection/components/common/zonos-skeleton/zonos-skeleton.js

@@ -0,0 +1,102 @@
+import { h, Host } from "@stencil/core";
+import { classes } from "../../utils/classes";
+import { styles } from "../../utils/styles";
+export class ZonosSkeleton {
+    constructor() {
+        /**
+         * The width of the skeleton
+         * @default '100%'
+         */
+        this.skeletonWidth = '100%';
+        /**
+         * The height of the skeleton
+         * @default '14px'
+         */
+        this.skeletonHeight = '14px';
+    }
+    render() {
+        return (h(Host, { key: 'e6a000d9ef38aa8ee1c08743830d0b2b0230b4f1', class: classes(['zonos--elements zonos--skeleton']), style: styles({
+                '--zonos--skeleton-height': this.skeletonHeight,
+                '--zonos--skeleton-width': this.skeletonWidth,
+            }) }));
+    }
+    static get is() { return "zonos-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-skeleton.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "skeletonWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'100%'"
+                        }],
+                    "text": "The width of the skeleton"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "skeleton-width",
+                "reflect": false,
+                "defaultValue": "'100%'"
+            },
+            "skeletonHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'14px'"
+                        }],
+                    "text": "The height of the skeleton"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "skeleton-height",
+                "reflect": false,
+                "defaultValue": "'14px'"
+            },
+            "dismissHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "(() => void) | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback for when the skeleton is dismissed. Also determines if dismiss icon shown."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}

package/dist/collection/components/common/zonos-stripe-input/zonos-stripe-input.js

@@ -64,9 +64,12 @@ export class ZonosStripeInput {
     render() {
         const primaryColor = this.overridePrimaryColor || zonosStore.appearance.colorPrimary;
         const secondaryColor = this.overrideSecondaryColor || zonosStore.appearance.colorSecondary;
-        const isDark = primaryColor && isDarkColor(primaryColor);
+        // Always use theme from appearance settings if it's collect
+        const isDark = window.Zonos.isCollect
+            ? zonosStore.appearance.theme === 'DARK'
+            : primaryColor && isDarkColor(primaryColor);
         const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
-        return (h(Host, { key: 'ce50e8c3f41abc7f7605a4423dc21c5fce755c9a', class: classes([
+        return (h(Host, { key: '351f86f2aa5ab9ee9fcb2b1919443a8b3d57a4c2', class: classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
                 (this.isError || !!this.error) && 'has-error',
@@ -75,10 +78,10 @@ export class ZonosStripeInput {
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--font-size': `${fontSize}px`,
                 '--zonos--primary-color': secondaryColor,
-            } }, h("div", { key: '8953c4cf31d9de771ef8f6351476d5db9de5655a', class: classes([
+            } }, h("div", { key: 'fb0b3e3d5feb11a458a6d4f3509ff812600b5935', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", Object.assign({ key: 'c66c0e5787191ab6bb804755da7477e222b3ff40' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("input", Object.assign({ key: '499164e3c30a1a72032dd815899c380f328cc431' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.internalValue && 'has-content',
@@ -88,7 +91,7 @@ export class ZonosStripeInput {
                 this.inputChange.emit(input.value);
                 this.el.inputValue = input.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), h("div", { key: '17c7fa7ef87bf765203cadb3ff24ead25ac45332', class: "zonos--floated-label" }, h("label", { key: '4d7c8e503bd0dc0081b13a36c2a1c5f976ee93e3', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: '1352d1d09b05a25ced56d31b16cf1f203b0eaaec', textColor: "red-600", type: "caption" }, this.error))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), h("div", { key: '27b56860180c0758d51b6f73e0336bdecf4d85e6', class: "zonos--floated-label" }, h("label", { key: '8119e9b68b052f9eaea762da61007a6eb4c29bd4', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: 'c141d6887bdfc3ac6fa580fcc47de25a9b99853b', textColor: "red-600", type: "caption" }, this.error))));
     }
     static get is() { return "zonos-stripe-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/common/zonos-stripe-phone-input/zonos-stripe-phone-input.js

@@ -201,24 +201,24 @@ export class ZonosStripePhoneInput {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: '0d4501947787cbafe38acb60fb5ee7519b6d1c73', class: classes([
+        return (h(Host, { key: 'f357f000b98bfd0e23731df7d253ffc47f404c30', class: classes([
                 'zonos--phone-input zonos--elements',
                 isDark && 'dark',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: 'c3e0f9655a39a5bb3d838634754be2af60a24a10', class: classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: 'cd201f36c0dddac8669ec8272f0fe7ee49b5b0a2', class: classes([
                 'zonos--label-wrapper',
                 this.disabled && 'disabled',
                 this.isFocused && 'focused',
                 hasContent && 'has-content',
                 this.error && 'has-error',
                 this.inputLabel && 'has-label',
-            ]) }, h("select", { key: '1a58471117f6748d511498e016814bd907e8775f', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, h("select", { key: '4ce5b03c7d4ac4736af7b11f1823d48c53556558', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
             var _a;
             return (h("option", { key: option.countryCode, selected: option.countryCode === ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode), value: option.countryCode }, option.displayName, " (+", option.phoneCode, ")"));
-        })), h("div", { key: '9c785521e095aae0cfc8af3ea90e4924c97202ac', class: "zonos--input-group" }, h("div", { key: 'b7fdd9db255ce33f3b6d3a982162c8286963324c', class: "zonos--select-wrapper" }, h("div", { key: '5d378436580df53793b1508af5e34bd43ba33ddf', class: "zonos--country-select" }, h("div", { key: '94628459db88e355b1c62b74cfcb48ec03022d4e', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '96b332ed9c62413887f96f38ce26cb05b81a3132', class: "zonos--country-select-selected" }, h("div", { key: 'b9e5bda55328f57e15afd349789233e3c28d2bf9', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'fc595df21c09553dc8ffb7fe79c3043831e65298', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '6c792c383acf3ccac02be6b954a7eb18bcdda817', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '970b9f6e18152e04375a248669fd7314088bcd2e', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '1da5919014eee0e34b60d1df08e83d44ad20d5c2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: '7f0c215ddfb59c8e3c4413e44941a477a8adc6d6', class: classes([
+        })), h("div", { key: 'efca78810bebc70a51f49c6f1720168717253b74', class: "zonos--input-group" }, h("div", { key: 'c785838e12d00237cb9a0fff97e1c2b0e2faf692', class: "zonos--select-wrapper" }, h("div", { key: '30d97ae277344d381a2fdf3fedf1f006ce66f801', class: "zonos--country-select" }, h("div", { key: '44d4488d45067e11acb2d8279cdb12eeffddd5c0', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: 'bbeadca415fb4aab84b8fddf92e143df70700444', class: "zonos--country-select-selected" }, h("div", { key: '2aed839d75ebde1c9423e9075ed84e005e8697c3', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'c1117e4b9d58cb1010b95c0aeb8b7fe102b13a2c', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '63609f20f44a7d8171ece2afc9995c21b1eda697', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'e0c46b926f5cda986793d8e60f49625219a21354', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '3e2ceaf3df3e6767ad25551ae090dcc9288000c2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: '10751ee273ad5d6531afc7fb700718605e32cbcd', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, h("input", Object.assign({ key: 'e3ce0b598baf78452eddaab38c80bb4f0c548a5a' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: 'a108f2796571f9d8a4201d1906b2381b89d14bc2', class: "zonos--floated-label" }, h("label", { key: '50d308311270bbd8635bb7848495ee4aaa2a0cac', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '27b0233f9241ce68348b2efd1c1b525d083363e5', textColor: "red-600" }, this.error))));
+            ]) }, h("input", Object.assign({ key: '506609e5191068451bc47968a232846df4c17724' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: '35f9894f905c8617564d3fc11f78cd3fbfef7a3c', class: "zonos--floated-label" }, h("label", { key: '9c768de7833455c630803f1ef1b4d7babc4f3cae', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: 'dd78d93a0ca2ae1384059cb08b839a1573a03e29', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-phone-input"; }
     static get encapsulation() { return "scoped"; }