@zonos/elements 1.3.141 → 1.3.143

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-293bb3ba.js');
+const index = require('./index-b678ce0c.js');
+const zonosStore = require('./zonosStore-8971eb65.js');
 const classes = require('./classes-b7918f56.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 const styles = require('./styles-d1e64fb9.js');

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-293bb3ba.js');
+const index = require('./index-b678ce0c.js');
+const zonosStore = require('./zonosStore-8971eb65.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosToggleCss = ":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-inline-flexbox;display:inline-flex}:host .wrapper{position:relative;border-radius:6px;background-color:var(--zonos-elements-gray-50);display:-ms-flexbox;display:flex}:host .zonos--toggle-selected-slider{z-index:1;position:absolute;background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}:host .zonos--option{background:transparent;border:0;z-index:2;cursor:pointer;padding:4px 12px;border-radius:6px;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);font-size:var(--zonos-elements-font-size-base);font-weight:500;color:var(--zonos-elements-text-color-secondary)}:host .zonos--option:focus{outline:none}:host .zonos--option:hover:not(.selected){color:var(--zonos-elements-text-color)}:host .zonos--option.selected{color:var(--zonos-elements-text-color);background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}";
@@ -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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d56e0a8b.js');
+const index = require('./index-b678ce0c.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosTooltipCss = ":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 .zonos--tooltip{position:relative}:host .zonos--tooltip .zonos--tooltip-content{position:absolute;bottom:100%;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:12px;background-color:var(--zonos-elements-gray-1000);opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--zonos-elements-radius-4);z-index:100;-webkit-box-shadow:var(--zonos-elements-v3-shadow-large);box-shadow:var(--zonos-elements-v3-shadow-large)}:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
@@ -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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-293bb3ba.js');
+const index = require('./index-b678ce0c.js');
+const zonosStore = require('./zonosStore-8971eb65.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosVStackCss = ":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 .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
@@ -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/cjs/{zonosStore-293bb3ba.js → zonosStore-8971eb65.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-d56e0a8b.js');
+const index = require('./index-b678ce0c.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

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",
@@ -53,8 +54,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.19.2",
-    "typescriptVersion": "5.4.5"
+    "version": "4.22.3",
+    "typescriptVersion": "5.5.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.js

@@ -161,7 +161,7 @@ export class ZonosCheckoutFinish {
                     void sendErrorLog({
                         endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}&orderId=${order.id}`,
                         errors: [
-                            `Order found but legacy order number doesn’t exist after ${maxRetries} attempts`,
+                            `Order found but legacy order number doesn't exist after ${maxRetries} attempts`,
                         ],
                         metadata: {
                             allLogs,

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

@@ -702,7 +702,7 @@ export class ZonosCheckout {
             cartStore.inventoryCheckErrorMessage =
                 await stripeStoreHandleInventoryCheck();
         }
-        catch (err) {
+        catch (_a) {
             // If user provide callback and it throw an exception, default to this message and stop the payment.
             cartStore.inventoryCheckErrorMessage = translate('Unable to check inventory. Please try again.');
         }
@@ -1147,7 +1147,7 @@ export class ZonosCheckout {
             },
             "setToFinishStep": {
                 "complexType": {
-                    "signature": "(forcePaymentStatus?: PaymentIntent['status']) => Promise<void>",
+                    "signature": "(forcePaymentStatus?: PaymentIntent[\"status\"]) => Promise<void>",
                     "parameters": [{
                             "name": "forcePaymentStatus",
                             "type": "Status | undefined",

package/dist/collection/components/checkout/zonos-checkout/zonos-currency-toggle/zonos-currency-toggle.js

@@ -13,7 +13,7 @@ export class ZonosCurrencyToggle {
         const { exchangeRate } = cartStore;
         const options = exchangeRate &&
             exchangeRate.sourceCurrencyCode !== exchangeRate.targetCurrencyCode
-            ? ([
+            ? [
                 {
                     label: exchangeRate.sourceCurrencyCode,
                     value: exchangeRate.sourceCurrencyCode,
@@ -22,7 +22,7 @@ export class ZonosCurrencyToggle {
                     label: exchangeRate.targetCurrencyCode,
                     value: exchangeRate.targetCurrencyCode,
                 },
-            ])
+            ]
             : [];
         // If there is only one currency, don't show the toggle
         if (!options.length) {

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-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -172,7 +172,7 @@ export class ZonosCheckoutProgressTabs {
             },
             "setTabSelected": {
                 "complexType": {
-                    "signature": "(tabValue: TabItem['value']) => Promise<void>",
+                    "signature": "(tabValue: TabItem[\"value\"]) => Promise<void>",
                     "parameters": [{
                             "name": "tabValue",
                             "type": "\"customer-info\" | \"shipping\" | \"payment\"",

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"; }