@zonos/elements 1.3.142 → 1.3.143

package/dist/cjs/zonos-notification_3.cjs.entry.js

@@ -6,9 +6,9 @@ const index = require('./index-b678ce0c.js');
 const zonosStore = require('./zonosStore-8971eb65.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-f97c99ad.js');
-const cart = require('./cart-199b0751.js');
+const cart = require('./cart-6ac8dc06.js');
 const handleFetch = require('./handleFetch-864d3c53.js');
-const paypal = require('./paypal-4f1ee604.js');
+const paypal = require('./paypal-ea8b4ca0.js');
 require('./isDarkColor-434d71dd.js');
 
 const zonosNotificationCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999999;bottom:24px;gap:8px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:8px;border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--zonos-elements-green-700)}:host .zonos--notification-item.error{background-color:var(--zonos-elements-red-700)}:host .zonos--notification-item.warning{background-color:var(--zonos-elements-orange-700)}";
@@ -111,7 +111,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: 'ee5ea97f737cce6dd2ad3d90797545e38a979820', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '5473d3bce1d842cba3a3e2c156fc31a70ee6b7f6', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '087268368f53116ce125b337eb2f99bf4cc7fa94', class: "zonos--payment-component" }), index.h("div", { key: '5987aa638084ac3635c522d3067b451b8a96a6e7', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: 'adcbeae4dadcaff59781ae47f779032e9fe43f5c', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: 'c83017ca67410a6715cacf6c0e524ed7b4304837', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '55c6d6dde8efaffec4411a838c62b7ede3efe30a', class: "zonos--payment-component" }), index.h("div", { key: 'd27b440253222daf94e4a6ad862c901efa54bfe5', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -165,7 +165,7 @@ const ZonosPaypalPayment = class {
         void this.loadPaypal();
     }
     render() {
-        return (index.h(index.Host, { key: '00f9e39b2a69f5da6799301b76571fe31ad2b3db', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: '4977e93ec49ab8deca29c69072ea5fa0fc1c145b', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: '7be3c38f702c8fb105c54e652774f69fbbcfd34c', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: '6845b53c2a5d1f2637f3ae9d867d2c6de48ab1b5', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/zonos-toggle.cjs.entry.js

@@ -17,9 +17,9 @@ const ZonosToggle = class {
         this.value = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '318787cdd63c418c3ff8c3090a56485c7746a225', class: classes.classes(['zonos--elements zonos--toggle']), style: {
+        return (index.h(index.Host, { key: '01958140c90fdadecbfca64fe65dbf1132af2cc1', class: classes.classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'f91f378b5f3b0114ccec5972fb93fd17093bb016', class: "wrapper" }, this.options.map(option => {
+            } }, index.h("div", { key: '5362589929c25b5ba897d23a308f6dd2759c4ac0', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (index.h("button", { class: classes.classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);

package/dist/cjs/zonos-tooltip.cjs.entry.js

@@ -16,10 +16,10 @@ const ZonosTooltip = class {
         this.showTooltip = false;
     }
     render() {
-        return (index.h(index.Host, { key: '7ddbd67ee8737db3bb449e4b0e3bb7aa201750e8', class: "zonos--elements" }, index.h("div", { key: 'd1389e596398fef4610e2682a06f9025bb3cb755', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '33cb09297417473b1c609258007dcdb600aba5ab' }), index.h("div", { key: 'dd02d87b040708d7998a3a5ca7be217c37a35625', class: classes.classes([
+        return (index.h(index.Host, { key: 'fa16c20a254958721bcc44dbe96f6588545e86f0', class: "zonos--elements" }, index.h("div", { key: '0e57607df02b12d5df9fb84b64c8345b40b2e823', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '9faf457a730046b789a5b822fb6ab89d88970d59' }), index.h("div", { key: 'f85dbf49e172f9a1c1b57443b1ea22d819b4099c', class: classes.classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, index.h("zonos-text", { key: '8252086536ddf4e91547c5c9c26042bfe5e2d7b2', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: 'b795a982ba2ea7f0388aa578168021cf32ef5f95', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, index.h("zonos-text", { key: '6e90bfe3f346cbe5d49aab4e03c868b3138aeca7', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '1c10f75f13ae427737fcf4ece41b9f7ba13fb76d', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
 };
 ZonosTooltip.style = ZonosTooltipStyle0;

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -15,9 +15,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: '4d2a0ea6c3c427e04bb9bca7ac0d035bd2c7143e', style: {
+        return (index.h(index.Host, { key: '32154740511a038c4ca04ad55bc7d77d96496654', style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '6ea72ff37210b0d719fd15506bd78810658d59ac', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'fa0abf999f3737852cb181b7678a89ce6b52a471' }))));
+            } }, index.h("div", { key: 'f80f8b0e51554a3db9efa960706ac9bb450155cb', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '711a207eb1b4c59672be4df8b19a3c7200d44f29' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/collection/collection-manifest.json

@@ -36,6 +36,7 @@
     "components/common/zonos-logo/zonos-logo.js",
     "components/common/zonos-rest-state/zonos-rest-state.js",
     "components/common/zonos-select-dialog-header/zonos-select-dialog-header.js",
+    "components/common/zonos-stripe-input/zonos-stripe-input.js",
     "components/common/zonos-text/zonos-text.js",
     "components/common/zonos-toggle/zonos-toggle.js",
     "components/common/zonos-tooltip/zonos-tooltip.js",

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.css

@@ -57,6 +57,9 @@
 :host .zonos--error-banner {
   margin-bottom: 16px;
 }
+:host .zonos--tax-id-input {
+  margin-bottom: 16px;
+}
 :host .zonos--group {
   margin-bottom: 20px;
   overflow: auto;

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js

@@ -5,6 +5,7 @@ import { getZonosStoreTheme, zonosStore, } from "../../../store/zonosStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
 import { containsNonLatinChars } from "../../../utils/containsNonLatinChars";
 import { submitGtag } from "../../../utils/submitGtag";
+import { countryRequireTaxId, shipToTaxIdLabels, } from "../../../../types/checkout/Tax";
 export class ZonosCustomerInfo {
     constructor() {
         /**
@@ -166,6 +167,26 @@ export class ZonosCustomerInfo {
         }
         return invalidList;
     }
+    isInTaxIdCountry(countryCode) {
+        return countryRequireTaxId.includes(countryCode);
+    }
+    /**
+     * Render tax id input based on ship to country code
+     */
+    renderTaxIdInput(countryCode) {
+        // Don't render tax id input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        const isCountryRequireTaxId = this.isInTaxIdCountry(countryCode);
+        if (!isCountryRequireTaxId) {
+            return null;
+        }
+        const taxIdInputInfo = shipToTaxIdLabels[countryCode];
+        return (h("div", { class: "zonos--tax-id-input" }, h("zonos-stripe-input", { inputLabel: translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: stripeStore.taxId || '', onInputChange: (event) => {
+                stripeStore.taxId = event.detail;
+            } })));
+    }
     render() {
         var _a, _b;
         if (!stripeStore.stripeElements) {
@@ -190,7 +211,7 @@ export class ZonosCustomerInfo {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: (_b = this.defaultAddress) === null || _b === void 0 ? void 0 : _b.email, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: (_b = this.defaultAddress) === null || _b === void 0 ? void 0 : _b.email, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), this.renderTaxIdInput(this.shippingCountry), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
             } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode

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

@@ -0,0 +1,162 @@
+: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 {
+  --zonos--background-color: #f1f1f1;
+  --zonos--local-glowing-color: 0 0 0 3px hsla(0, 0%, 100%, 25%),
+    0 0 0 1px var(--zonos--primary-color);
+  --zonos--border: 1px solid #e8e8e8;
+}
+
+:host(.dark) {
+  color-scheme: dark;
+  --zonos--background-color: #30313d;
+  --zonos--local-glowing-color: 0px 2px 4px rgba(0, 0, 0, 0.5),
+    0px 1px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px hsla(0, 0%, 100%, 25%),
+    0 1px 1px 0 rgba(255, 255, 255, 0.12);
+  --zonos--border: 1px solid var(--zonos--primary-color);
+}
+
+:host {
+  margin: 1px;
+  height: calc(var(--zonos-elements-size-xl) - 2px);
+  /**disabled state */
+}
+:host .zonos--label-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  background: var(--zonos--background-color);
+  border-radius: var(--zonos--border-radius);
+  border: var(--zonos--border);
+  outline-offset: 0;
+  outline-width: 2px;
+}
+:host .zonos--floated-input {
+  box-sizing: border-box;
+  position: relative;
+  padding: 0 16px;
+  outline: none;
+  transition: var(--zonos-elements-transition);
+  width: 100%;
+  border-radius: var(--zonos--border-radius);
+  background: var(--zonos--background-color);
+  border: var(--zonos--border);
+  order: 2;
+  font-weight: 400;
+  font-size: var(--zonos--font-size);
+}
+:host .zonos--floated-input :-internal-autofill-selected {
+  border-radius: var(--zonos-elements-radius-6) 0 0 var(--zonos-elements-radius-6);
+}
+:host .zonos--floated-input :-internal-autofill-selected + label + div {
+  background-color: #e8f0fe;
+}
+:host .zonos--floated-input.has-label {
+  padding: 24px 4px 2px 16px;
+}
+:host .zonos--floated-input.has-label.has-input-prefix {
+  padding-left: 0;
+}
+:host .zonos--floated-input.has-label.has-input-prefix + .zonos--floated-label label {
+  margin-left: 0;
+}
+:host .zonos--floated-input:not(.has-label)::placeholder {
+  opacity: var(--zonos-elements-opacity-disabled);
+}
+:host .zonos--floated-input::placeholder {
+  transition: var(--zonos-elements-transition);
+  opacity: 0;
+}
+:host .zonos--floated-input:focus {
+  outline: none;
+  border: var(--zonos--border);
+}
+:host .zonos--floated-input:focus + .zonos--floated-label::after {
+  box-shadow: var(--zonos--glowing-color, var(--zonos--local-glowing-color));
+}
+:host .zonos--floated-input.has-error + .zonos--floated-label::after {
+  box-shadow: 0 0 0 2px #df1b41;
+}
+:host .zonos--floated-input.has-content::placeholder, :host .zonos--floated-input:focus::placeholder {
+  opacity: var(--zonos-elements-opacity-disabled);
+}
+:host .zonos--floated-input.has-content + .zonos--floated-label label, :host .zonos--floated-input:focus + .zonos--floated-label label {
+  top: 11px;
+  transform: scale(0.8);
+}
+:host .zonos--floated-input:-webkit-autofill, :host .zonos--floated-input:-moz-autofill {
+  background-color: var(--zonos-elements-input-background);
+  color: var(--zonos-elements-text-color);
+}
+:host .zonos--floated-label {
+  display: block;
+  max-height: 0;
+  pointer-events: none;
+  order: 1;
+}
+:host .zonos--floated-label label {
+  color: var(--zonos-elements-gray-800);
+  position: absolute;
+  font-size: 16px;
+  line-height: 16px;
+  display: inline-block;
+  filter: blur(0);
+  transform-origin: left top;
+  transition: var(--zonos-elements-transition);
+  margin-left: 16px;
+  top: calc(50% - 8px);
+  z-index: 1;
+}
+:host .zonos--floated-label::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--zonos--border-radius);
+}
+:host .disabled .zonos--floated-label {
+  pointer-events: inherit;
+}
+:host .disabled .zonos--floated-label::after {
+  cursor: not-allowed;
+  z-index: 1;
+}
+
+:host(.dark) .zonos--label-wrapper {
+  background: #30313d;
+}

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

@@ -0,0 +1,220 @@
+import { h, Host, } from "@stencil/core";
+import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+import { isDarkColor } from "../../utils/isDarkColor";
+/**
+ * This component is input that has similar style to Stripe since we will use it with other Stripe elements when we don't want to use Link authentication element
+ */
+export class ZonosStripeInput {
+    constructor() {
+        this.inputValue = '';
+        this.inputLabel = undefined;
+        this.overridePrimaryColor = undefined;
+        this.overrideSecondaryColor = undefined;
+        this.isDisabled = false;
+        this.isError = false;
+        this.inputPlaceholder = '';
+        this.value = this.inputValue;
+    }
+    onInputValueChange(newValue) {
+        this.value = newValue;
+        this.inputChange.emit(newValue);
+    }
+    render() {
+        const primaryColor = this.overridePrimaryColor || zonosStore.appearance.colorPrimary;
+        const secondaryColor = this.overrideSecondaryColor || zonosStore.appearance.colorSecondary;
+        const isDark = primaryColor && isDarkColor(primaryColor);
+        const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
+        return (h(Host, { key: 'cc1e63bf6a09749b4310fd55bb6f728879e3c160', class: classes([
+                'zonos--input zonos--elements',
+                isDark && 'dark',
+                this.isError && 'has-error',
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: {
+                '--zonos--border-radius': getBorderRadius(),
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--font-size': `${fontSize}px`,
+                '--zonos--primary-color': secondaryColor,
+            } }, h("div", { key: '62294a559ba63fbf80cedbe16e3dca97540c8d4a', class: classes([
+                'zonos--label-wrapper',
+                this.isDisabled && 'disabled',
+            ]) }, h("input", { key: '7e7d2a9d16b34240945119356f1b801ff0e0d4ae', class: classes([
+                'zonos--floated-input',
+                !!this.inputLabel && 'has-label',
+                this.value && 'has-content',
+                this.isError && 'has-error',
+            ]), disabled: this.isDisabled, id: "zonos--input", onInput: e => {
+                const input = e.target;
+                this.inputChange.emit(input.value);
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("div", { key: 'e8340ce1583c0ce2d3659631a3400c2b72c81258', class: "zonos--floated-label" }, h("label", { key: 'daa8f068ebabfa9d77ed85d0e8070b45f7803f92', htmlFor: "zonos--input" }, this.inputLabel)))));
+    }
+    static get is() { return "zonos-stripe-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-stripe-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-stripe-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inputValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the stripeInput"
+                },
+                "attribute": "input-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "inputLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "attribute": "input-label",
+                "reflect": false
+            },
+            "overridePrimaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary color to override primary color from appearance primary color in setting."
+                },
+                "attribute": "override-primary-color",
+                "reflect": false
+            },
+            "overrideSecondaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary color to override secondary color from appearance secondary color in setting"
+                },
+                "attribute": "override-secondary-color",
+                "reflect": false
+            },
+            "isDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the input"
+                },
+                "attribute": "is-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error state of the input"
+                },
+                "attribute": "is-error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inputPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for the input"
+                },
+                "attribute": "input-placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "value": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputChange",
+                "name": "inputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when input value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "inputValue",
+                "methodName": "onInputValueChange"
+            }];
+    }
+}

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

@@ -7,9 +7,9 @@ export class ZonosToggle {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '318787cdd63c418c3ff8c3090a56485c7746a225', class: classes(['zonos--elements zonos--toggle']), style: {
+        return (h(Host, { key: '01958140c90fdadecbfca64fe65dbf1132af2cc1', class: classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'f91f378b5f3b0114ccec5972fb93fd17093bb016', class: "wrapper" }, this.options.map(option => {
+            } }, h("div", { key: '5362589929c25b5ba897d23a308f6dd2759c4ac0', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (h("button", { class: classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);

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

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '7ddbd67ee8737db3bb449e4b0e3bb7aa201750e8', class: "zonos--elements" }, h("div", { key: 'd1389e596398fef4610e2682a06f9025bb3cb755', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '33cb09297417473b1c609258007dcdb600aba5ab' }), h("div", { key: 'dd02d87b040708d7998a3a5ca7be217c37a35625', class: classes([
+        return (h(Host, { key: 'fa16c20a254958721bcc44dbe96f6588545e86f0', class: "zonos--elements" }, h("div", { key: '0e57607df02b12d5df9fb84b64c8345b40b2e823', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '9faf457a730046b789a5b822fb6ab89d88970d59' }), h("div", { key: 'f85dbf49e172f9a1c1b57443b1ea22d819b4099c', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '8252086536ddf4e91547c5c9c26042bfe5e2d7b2', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'b795a982ba2ea7f0388aa578168021cf32ef5f95', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '6e90bfe3f346cbe5d49aab4e03c868b3138aeca7', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '1c10f75f13ae427737fcf4ece41b9f7ba13fb76d', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '4d2a0ea6c3c427e04bb9bca7ac0d035bd2c7143e', style: {
+        return (h(Host, { key: '32154740511a038c4ca04ad55bc7d77d96496654', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '6ea72ff37210b0d719fd15506bd78810658d59ac', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'fa0abf999f3737852cb181b7678a89ce6b52a471' }))));
+            } }, h("div", { key: 'f80f8b0e51554a3db9efa960706ac9bb450155cb', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '711a207eb1b4c59672be4df8b19a3c7200d44f29' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.js

@@ -56,12 +56,12 @@ export class ZonosVirtualScroll {
                 } }, this.renderItem(i)));
             accHeight += itemHeight;
         }
-        return (h(Host, { key: 'c09f341c0436d53ad245f0dc4ed54d5ead9a0e39' }, h("div", { key: 'e7f9cbb0dd33d0fab1bffd01672e9f5a3bc11f04',
+        return (h(Host, { key: '0f132a5b60586fb22d1d5536aa7abef6199e0748' }, h("div", { key: 'a947229cd3d53b79312855cf8ddf8c9985035e1e',
             // to capture scroll action
             class: "scroller", style: {
                 height: `${this.totalHeight}px`,
                 width: `${W}px`,
-            } }), h("div", { key: '93071acbc731dda4e9a1f453aa76526cd1639191',
+            } }), h("div", { key: '63013fe7bc53d76152fda74e7b6ef054e7c3a9ef',
             // to display items
             class: "item-container", ref: el => (this.container = el), style: {
                 height: `${this.totalHeight}px`,

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '564c34a7a93a16b8e619a0e140f8d99fabc91c34' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '63b0c771133fd495f36e2c67601d64d6e56f5f2b' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js

@@ -18,9 +18,9 @@ export class ZonosHelloDialogFooter {
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
         const mainColor = primaryColor && isDarkColor(primaryColor) ? 'white' : 'black';
-        return (h(Host, { key: '458b65efb2fc1e6cf5f7c5588601add4af010de6', class: "zonos--elements" }, h("div", { key: 'ee8eb8cf4a3e0a5583f5fb15842a86adb443e421', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: 'f84d021e99271bd6a00da32edd35fdc5e0520c5a', class: "zonos--elements" }, h("div", { key: 'db35a5022b1ef1a70e3cace021fcc14d6e8ea987', class: "zonos--hello-dialog-footer", style: {
                 '--zonos--primary-color': primaryColor,
-            } }, h("a", { key: 'fa6ab85dae56620a30275dd25c10011bf129545e', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '413b1d69091e5bf4ba639ea66e4930acc0636074', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: 'be2881c022690d5a6bcb9c38a50287a427f4fc32', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '79480397f8c59a435b1f9a4604441500991741a3', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'c23ae8fa589d754ca93680006d6a45af2b440db6', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: 'bbbc50bf395e2658239e2a1a0342122b04e43a5f', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '3c80a7ba8dd9509d45bde7de20e7689f632aedc8', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: 'add64f376e48cc71f6b5672aafe7b1ef62ab2354', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'a0a5059ad4a48b2cc3ea05696aa79ffce33b4bf2', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '2608dba553f846c5016e8395dbce079beda0aa5a', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }