@zonos/elements 1.3.218 → 1.3.220

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: '1db73e8a63f5eef955430c64e6f86d941619b9f6', 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: 'a580a08d71465c78699d40f7d65a423366262d6e', 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: 'f3285aaaeefbb16c79b656576dc49c73483fedd8', class: "zonos--tab-progress" }, h("div", { key: '74ee5173069a4269c35724a9121d9c343bd13950', 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: 'c63b825021f8aaf17727e37072c3701e4a55b992', 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: 'bc51b1a1318b0934c752ae74dfeae8d5f43f1a63' }, h("iframe", { key: '0bb69f8aaa5c095bc90f2210fab3770491867754', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '64fdc09e82d28f57fd081578ebd2a3523760c7c7' }))));
     }
     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: 'c9eabf497f7e23ae201e6310e5ecb9f0d7068294', 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: 'a9a525bfe764bf93e8725d9a00c069455de72ed6', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '072ab68e501618b640ffce6c6e8e96096966e09d', class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '3ab415f1cbc2bc36af01d67b279e732480de8685', 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: 'a1d99558318371c0e5ee95a9578a6de31a6fc27a', class: "wrapper" }, h("div", { key: '3fd7fbc90c430a3e1496e5b0347947c1929aa6ed', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '5584080e0f0a5a756b0cc2ac761e0e18c864afcd', class: "content" }, h("div", { key: '4a2070c137636193d05ded090fea26f05aada887', class: "title" }, h("zonos-text", { key: 'ab4c773f4af1271f5615a28f6a6193460330f16b', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '05a445dc37e754c99ea6727ae2bf861d42d5c2c4', class: "subtitle" }, h("zonos-text", { key: 'a7563f9fd3b405653487542e1b7a1f6aeab01893', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '812e9e43fdb6d10ed62da8138e344b0243ca5c34', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '07d7dc9d1a4bca9cb1ee420a4fed82e9fc513bd9', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: 'b607a5244dc39869b6d40cd361d9dee4686858a7', 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: '87e346925730bb4ce7a5a0da35bbffe9fa209e79', 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: '557543582175b50bcd5e9e0e9362ecc85f0b0ec0', class: "zonos--country-select" }, h("zonos-v-stack", { key: '3e03b4624abfc1b2239560a62dd33659c30c7d26', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '9664de32cbfb119eb0b3658b71f31039f4d0e064', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: 'c5f28d334194471298bacc218f36dd7d56f57c1e', 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: '9f623511c7a1576961e527071c10672f3b800359', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: '3c37b29f38ce48ea953df2faf0ab9e349a8e538c', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: 'ebab93c3379e93fcbde6cd634174f981c06bff42', 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: '77dcb275cd99e2c1618a58e35d7b6aba07cff289', 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: '61f205819558dd9eb5c9181b8510da6b5304f3e5', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'adc9891709eade8a8f8baf7cc3a840a0340dc834', class: "zonos--flex-message" }, h("zonos-icon", { key: 'f94f9d8e2717c36a12a5bd4bd3b1eb98b4c1d6a8', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'e1defbb16081a5873f98f6f251e6acf57ea5ec25', 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: '6e673f681a3111d8e33c8cf4e8ab0c8f27c75d48', 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: 'f245de30fb680fd673bd8531f3982b73ed506308', class: "zonos--backdrop" }), h("div", { key: 'ee75ecd48e28f38be08b5db9078c0b3b28b9bd9f', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'ce7d2273f358001b5899ba7a6ea8d5bd91ab55cb', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'e2cd0f877ed4f8b78b549a4aaedf1e67a234b0f7', class: "zonos--loading" }, h("zonos-spinner", { key: 'e0507e5fea599494979287fc4f13a7da08be758b', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '8d6cac393a445febf36cc6fb1811c00223518481', class: "zonos--header" }, this.headerText && (h("h3", { key: 'cb634d14db0a14144a370d66e3d5aa9147914038', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'd11ff8473046b201bad444c9b81a0566dd400829', 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: '356588fe85cce5298e4c2e862c31dab3018602a5', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'ede82b27d9e73f27ad0212203e0483a8294f72e5' })), h("slot", { key: '084c3a055462fbf8f25e336891e0dbb5faed7ed7', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: 'd525f4fab2449a219d42ccb45b4497076b5973c9' })), h("slot", { key: 'febb4e4ab0cb950b3a346052d60fa70ec8346be4', 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: '92689fdc45c9e980d61f9b96c378ca52ed37a608', style: {
+                '--spacing': `${this.spacing}px`,
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("slot", { key: 'b94e0bcd372d0194ba2a86b570914fe33af427cd' })));
+    }
+    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: '52acbcb39e71fb56029f7aa44b62b2189aa27fd7', 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: '9f4566c8f668d633ec5283319d67b8de93703524', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '75973f2c81e28a0007b047375ead0c5e6f055a14', class: classes([
+            ]) }, h("input", { key: '72de2d08535a007c0e77a037f9d236f0dc45f56e', 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: 'e4d54ac95efa67ce8c7e56b3a2625e99c417f04d', 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: '232674c6f35113c6ad3f1094e6e6d4128b4d4c02', 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: '014d1364e165e4ee4e9cf304791fc10fdfb6d87c', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '65b454467b033cd061ab08693e857eed75c76511', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '6ea8fca0b44ada24b9b2b84e22584ba1a7459dc4', 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: '7c6ecf4d61e7dfb56491e58814478c906423473b', class: "zonos--elements" }, h("a", { key: '05bc59fb4940fa48d37a10cfe9df3c495d60785f', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '07b51a0a95cd5a7b392bb5efef96c8e4dd4bb9b3' }))));
     }
     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: '1eb7313add29219032d8301abaf55ace726a3309', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: 'df9960e78817a9a98006fed7e87c5441f220f496', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '32795fe2c626add5d2f53032ea9b5b8d528bef38', 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: '0f0fe90d3ef58b5a7b934361567e92b03630b46a', 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: 'ec026a1a596d985aa50c18f8ebffc8683e62cc05', 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: '4dd1bf92f89b6433673643621d4d2e91c32dc9c0', 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: '1635b6b084c26f973405a863c898087f7805af4a', class: "zonos--restState-image" }, h("img", { key: '305262852c1bc4df2fae58e9d18fe9ef48108155', 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: 'b25da09d4d56ab01b5bcb1d219337a94208e8272', class: "content" }, h("zonos-text", { key: '1d0bfb2cd2473df240fb6f54eb1329a7aa34009f', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '7dd2da6e10a7e07649534673f7a5b630e1e98a91', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '1ccb01b392f0bca4687a3a1b0fe7a55e6fac69a2', class: "action" }, h("slot", { key: 'f8200baab65872d4c4c28e53c791f6fc406199e5' }))));
     }
     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: 'cc65559ef7867bbd8e7990556b50434faa0a905c', 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: '77c280b12744520b4a172193f88798aa53d33eb7', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'eaba9d1e50f71f23e330e989521d2156a617b22d', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'ddddc6b5bca87cf44cbc7428d402f44c67422cb6', type: "boldLabel" }, this.label), h("zonos-button", { key: '313e3955ba8bafc9a1b36b4c1c8f99e975fb8dd3', 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: '9af2821c22f3e37d52b6f03bf544fcaca1c0ed7b' }))));
     }
     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: '4ffa2b8c03f0c8d3bd08521d950903cba9685109', 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: '0bed90e63595e6036b9342e15c999bb7e7971240', 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: '00e5c3a220aaeee221c5cc104d2463f5468067cf', 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: '25459f6bc07647962676edd724630cd7726bb680' }, 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: '145634dac24ef37cd206847537bea2f641f3b5a0', class: "zonos--floated-label" }, h("label", { key: '70eabcab7a30e851086a2b79107968f9a999c67e', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: '55ab6d14b5e6c98c665f41a1c4c1dd70523ee91f', 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: 'ed5b02d0f617b0611ecba382cf8447570c3cee76', 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: '8644eb1a24b4a2cdf491a8176f70e2fa35389fa6', 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: '747109b80d3d02778ded01392d853a050f675114', 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: '399beecaead5791d81ffd1db679f5b235c056769', class: "zonos--input-group" }, h("div", { key: '599a287f610935762e3229577bf35cfaee8ffe7f', class: "zonos--select-wrapper" }, h("div", { key: 'a1402a12ffa599e4dd42523696121d0a1cec60b6', class: "zonos--country-select" }, h("div", { key: 'a798cf4e8f4f5cfef5554404c578076f507d0dd2', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '6a0313b6cd969a095002b18830fcbbd104e42570', class: "zonos--country-select-selected" }, h("div", { key: 'b6d2403854632f40dfd23d15b1eb8ef5625e1059', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '60397bbbbc9c6083064de1427cedeb148f36a35d', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'effc1b9bc5fa1cd832e686b6e87ccac87e41ffb8', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '8e5aa3603dc4a869ce7335c2903a15903d5e61d4', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '8b9ea89b5234a345d556d06649add11401baa184', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: '21514d3e3f66095b79eb53e47fff6a98fbf12fba', 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: '50421e7a8343203ee623a4e61f957abd115d0495' }, 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: '5025154c17fc9145b1b2bf2036ec7796287094ea', class: "zonos--floated-label" }, h("label", { key: '9af81cc3320de319ea84637bbb923c4b81a506d1', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '523df8b2d650663ac43516d8ae9954ffd208c5e8', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-phone-input"; }
     static get encapsulation() { return "scoped"; }