@zonos/elements 1.3.4-alpha.1 → 1.3.4

package/dist/collection/collection-manifest.json

@@ -35,8 +35,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.9.0",
-    "typescriptVersion": "5.2.2"
+    "version": "4.12.1",
+    "typescriptVersion": "5.3.3"
   },
   "collections": [],
   "bundles": []

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

@@ -9,7 +9,7 @@ export class ZonosCartItems {
         var _a;
         const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
         const rate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
-        return (h(Host, { class: "zonos--cart-items zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tbody", null, cartStore.items.map(item => {
+        return (h(Host, { key: '945bd402bb5f8a73bc02dc8f30d187c43b78050e', class: "zonos--cart-items zonos--elements" }, h("table", { key: '600b545e20eb81d7e744c2bf66a9cec2eb68c8e7', class: "zonos--cart-table" }, h("tbody", { key: 'cd12a4372e97b8018af37433e6b2daba5403e621' }, cartStore.items.map(item => {
             const itemImg = item.imageUrl;
             return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];

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

@@ -140,7 +140,7 @@ export class ZonosCheckoutFinish {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: 'bdf824c48f7f01bcafd88b17ad758d05ab589ffd', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius(this.borderRadius),
             } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h(Fragment, null, h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (h("zonos-icon", { color: 'red-800', content: RemoveIcon, size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
     }

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

@@ -12,16 +12,16 @@ export class ZonosBadge {
         this.class = '';
     }
     render() {
-        return (h(Host, { class: classes(['zonos--elements zonos--badge', this.class]), style: {
+        return (h(Host, { key: '2d111e91f403ef5c03f742f5dabe9491623be91d', class: classes(['zonos--elements zonos--badge', this.class]), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { class: classes([
+            } }, h("div", { key: 'e6debe091b732b857f180cee19bec4be435ea524', class: classes([
                 'zonos--badge-content',
                 this.color,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", null, h("slot", null)))));
+            ]) }, this.icon, h("zonos-text", { key: 'e92c97d77fa5ce279059953f7d7fbc5a0030aa5d' }, h("slot", { key: 'c93852c3225ba57dd26c26300254f348e349f9ad' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,12 +56,12 @@ export class ZonosButton {
             ? getButtonTheme(overrideBackground)
             : undefined;
         const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        return (h(Host, { key: 'af41b1035e5ea776d47580647a65997bb41730e3', class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("button", { class: classes([
+            } }, h("button", { key: 'af3fdc9aa0440cf5a7e49c4c0c76826d7a700d32', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -74,7 +74,7 @@ export class ZonosButton {
                 this.backgroundColor &&
                     this.variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '32b6a079ba98ab9d62b5df34ddc15e4ac7a87a8e', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,9 +13,9 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { style: {
+        return (h(Host, { key: 'f2f7929742862b9806ddc568155e7cddf954252e', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { class: classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", null), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
+            } }, h("div", { key: 'ce3568d7ded3cfb9acb0f4ff3d4184a17b88f33b', class: classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: '3cc9f896df1899da73eab80dfbb3aac3a0046956' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
             } }, h("div", null, this.footerContent), h("h-stack", { spacing: 8 }, this.footerActions))))));

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

@@ -23,10 +23,10 @@ export class ZonosCollapse {
     }
     render() {
         this.height = this.el.scrollHeight;
-        return (h(Host, { class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: 'fb0d16e7e638d45b3469d7f7d26cd3f3ce9bf318', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", null, h("iframe", { class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", null))));
+            } }, h("div", { key: '9da00237f8f14edd9c5bf4b68da545b8c7ab4786' }, h("iframe", { key: '402e19d6e96d019a4eccd49af6afdac428c9fae9', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'de6751ac4955c073cc34188ebe22fabed38f780d' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,11 +32,11 @@ export class ZonosCountrySelect {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { class: "zonos--elements", style: {
+        return (h(Host, { key: 'ddd9aaea7997423d9e5302158e95fc7614b50138', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { class: "zonos--country-select" }, h("zonos-v-stack", null, h("div", { class: "zonos--country-select-header" }, h("zonos-button", { class: "zonos--country-select-back", color: "blue-600", icon: h("zonos-icon", { color: "blue-600", content: ArrowLeftBlue, size: 18 }), onClick: () => this.closeCountrySelect(), variant: "subtle" }, translate('Back')), h("zonos-text", null, shippingZoneCountries &&
+            } }, h("div", { key: 'c847863dce4998919ea6ed9fd14490173bc41928', class: "zonos--country-select" }, h("zonos-v-stack", { key: '59601481559a5348d49faa3bb37087464b487d2b' }, h("div", { key: '29ba7a85217df739ac29ede069bbe2dd2b19cfac', class: "zonos--country-select-header" }, h("zonos-button", { key: '02f705c0403182b24e8657791b51c5e67879681d', class: "zonos--country-select-back", color: "blue-600", icon: h("zonos-icon", { color: "blue-600", content: ArrowLeftBlue, size: 18 }), onClick: () => this.closeCountrySelect(), variant: "subtle" }, translate('Back')), h("zonos-text", { key: '1a12fd2978f70e7cff4b8871a90e80e4b511be6a' }, shippingZoneCountries &&
             selectedCountryCode &&
-            ((_a = shippingZoneCountries[selectedCountryCode]) === null || _a === void 0 ? void 0 : _a.displayName))), h("zonos-v-stack", { spacing: 8 }, h("input", { class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Enter country", value: this.inputValue }), h("div", null, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: country.code }), h("zonos-text", { color: "gray-800" }, country.displayName))))))))));
+            ((_a = shippingZoneCountries[selectedCountryCode]) === null || _a === void 0 ? void 0 : _a.displayName))), h("zonos-v-stack", { key: '8c2f3da67b479d618d6837a5811b6cede4fe4517', spacing: 8 }, h("input", { key: '989879f65463f5c118e5f9906127546436d5f40c', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Enter country", value: this.inputValue }), h("div", { key: 'f6ddf1629ad299053f949b8ff36bc126b622bb91' }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: country.code }), h("zonos-text", { color: "gray-800" }, country.displayName))))))))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,9 +6,9 @@ export class ZonosCustomMessage {
         this.message = '';
     }
     render() {
-        return (h(Host, { class: "zonos--elements", style: {
+        return (h(Host, { key: 'eb6b2a907ef77d5e2da0d9cb1bee4b77f814e5cb', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: this.icon }), h("zonos-text", null, this.message)))));
+            } }, h("zonos-card", { key: '9d61e783ca6f87f3a6b478fad97052a2f9f25a8c', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '6aa51eeb08ee08f19ff8764b0ee868a1c4eeacf8', class: "zonos--flex-message" }, h("zonos-icon", { key: 'c2dd91ae7ac5cf7dd8392729f0ecb38edb04c077', content: this.icon }), h("zonos-text", { key: '537f77f41a5285acc29e7b104d9bb3fd65119477' }, this.message)))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class ZonosDialog {
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { class: classes([
+        return (h(Host, { key: '5a331d58bfd2a0414e9577c4f515cfcd0c630ad5', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -59,10 +59,10 @@ export class ZonosDialog {
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, h("div", { class: "zonos--backdrop" }), h("div", { "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { class: classes([
+            } }, h("div", { key: '74e3ed8fcdf55e3ae11d6be9c1e18691f1115bb9', class: "zonos--backdrop" }), h("div", { key: 'dae7aa8261feeb43d62550832b6b91437da07f9d', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'ea919a80d1c0589908af64d48845c5263d1b18f4', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: '77de036f1fd7ea16936a5521a646df427115e99b', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", null)), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+            ]) }, h("slot", { key: '9da41cdcfe580bb41b672f8185552e29b269e5dd' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,11 +11,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, { class: classes(['zonos--elements zonos--logo', this.class]), style: {
+        return (h(Host, { key: '7ddd949ab91ed0c61ee34ce6ee80da54b3ba3664', class: classes(['zonos--elements zonos--logo', this.class]), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '1a8d98f7d836f253a21654c84ab0251969362e2f', 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-notification/zonos-notification.js

@@ -46,9 +46,9 @@ export class ZonosNotification {
         }, 300);
     }
     render() {
-        return (h(Host, { class: classes(['zonos--elements zonos--notification', this.class]), style: {
+        return (h(Host, { key: '0846607651bce1e7acfc92cc775f86ce399dc789', class: classes(['zonos--elements zonos--notification', this.class]), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+            } }, h("div", { key: '1a4dd6b138b21b8a626d3df3a9c353590d51fd8c', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
             return (h("div", { "aria-hidden": "true", class: classes([
                     'zonos--notification-item',
                     notification.type,

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.js

@@ -28,7 +28,7 @@ export class ZonosShippingRichRadio {
     }
     render() {
         var _a;
-        return (h(Host, { class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+        return (h(Host, { key: '0dc36a16b2f51816755010c46b416b8b1f4b4744', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             var _a;
             const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
             return (h("div", { "aria-hidden": "true", class: classes([

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

@@ -8,9 +8,9 @@ export class VStack {
         this.class = '';
     }
     render() {
-        return (h(Host, { style: {
+        return (h(Host, { key: 'd363ffeb2bbae49e7318b26ab56b4b8871844daf', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { class: classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", null))));
+            } }, h("div", { key: '5d9fa5ae9ffca787ca42f38e4ec75fedc24823f9', class: classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'e1d6fef3378b92c18c2c43ec8616e8c733a4290c' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

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", null, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '8862bb59447d2b9ecf98f19a641b86ded55e72b8' }, "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

@@ -14,9 +14,9 @@ export class ZonosHelloDialogFooter {
         var _a, _b;
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
-        return (h(Host, { class: "zonos--elements" }, h("div", { class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (h(Host, { key: '2a67210015d9880acddd72578337243a7f2175e5', class: "zonos--elements" }, h("div", { key: 'b025a2fbbd5f6f2a5addce5d6bba1e6ce720b205', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
                 '--primary-color': (_b = this.appearanceSettings) === null || _b === void 0 ? void 0 : _b.colorPrimary,
-            } }, h("a", { href: "https://zonos.com", target: "_blank" }, h("zonos-icon", { autoHeight: true, color: "gray-1200", content: ZonosIcon, size: 108 })), h("zonos-button", { icon: h("zonos-icon", { color: "gray-700", content: ChevronDownIcon }), iconRight: true, onClick: () => this.setShowCountrySelect(true), variant: "outline" }, localizationStore.selectedCountryCode))));
+            } }, h("a", { key: '7595e99d4849a19b0337181defa88d074a4407fc', href: "https://zonos.com", target: "_blank" }, h("zonos-icon", { key: '0fa6457c3343170ad144d1b4c02793b62a49efd6', autoHeight: true, color: "gray-1200", content: ZonosIcon, size: 108 })), h("zonos-button", { key: '5fcee8b5e43f239883caa2e3f6f155641674d37e', icon: h("zonos-icon", { color: "gray-700", content: ChevronDownIcon }), iconRight: true, onClick: () => this.setShowCountrySelect(true), variant: "outline" }, localizationStore.selectedCountryCode))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -90,14 +90,14 @@ export class ZonosHelloDialog {
             translate('Know about duties and taxes before you buy. Shop with confidence!');
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { class: "zonos--elements" }, h("div", { "aria-hidden": "true", class: classes([
+        return (h(Host, { key: '09c2e005a701cf41134f1613c1bbf7214782b24c', class: "zonos--elements" }, h("div", { key: 'ad9675ef097ea4b21bbdb99b5f30d64c45c744e5', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), this.showCountrySelect ? (h("div", null, h("zonos-country-select", { closeCountrySelect: () => this.setShowCountrySelect(false) }))) : (h("div", null, h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { color: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, h("div", { key: '54f5da38c7ff31b3d848a83ca87b4514cf51de20', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '31b30feb4e314c23932aa433f6a3d9564f28a56d', class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), this.showCountrySelect ? (h("div", null, h("zonos-country-select", { closeCountrySelect: () => this.setShowCountrySelect(false) }))) : (h("div", null, h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { color: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { color: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
         }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))))), !this.showCountrySelect && (h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value) })))));

package/dist/collection/components/main/zonos-controller.js

@@ -153,7 +153,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { class: "zonos--elements" });
+        return h(Host, { key: 'a94fb7ff23c45a9813ce5da857cda14c8455ff79', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -66,7 +66,7 @@ export class ZonosAddress {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { class: "zonos--address zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--address-component" })));
+        return (h(Host, { key: '47fa225123b7c944732b018fbb374bcb6da0f4ca', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '4d0d9d4f9c09d6b2f29bc6a44164a0ef8db0acc9', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd279ba97287890e489230f9e449a344db76556f2', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.js

@@ -36,7 +36,7 @@ export class ZonosLinkAuthentication {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: '48ec92ca8a1500c3b8e85222c3df069c32074e72', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '9060fab8ab9f88157ee6951af830e106e6ff9509', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'dac7e96170d15faa8c1013fb298ae86e2ce99f0b', class: "zonos--link-authentication-component" })));
     }
     static get is() { return "zonos-link-authentication"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-payment/zonos-payment.js

@@ -37,7 +37,7 @@ export class ZonosPayment {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { class: "zonos--payment-component" })));
+        return (h(Host, { key: '8a674f72e9235f9b6afcc8d8e0374639423e0bb3', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '94a0a064e6f6d8058bc11d114ecc4c3ab495e802', class: "zonos--payment-component" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/components/isDarkColor.js

@@ -1,6 +1,8 @@
-import { a as createCommonjsModule, b as commonjsGlobal } from './zonosStore.js';
+import { a as commonjsGlobal } from './zonosStore.js';
 
-var tinycolor = createCommonjsModule(function (module, exports) {
+var tinycolor$1 = {exports: {}};
+
+(function (module, exports) {
 // This file is autogenerated. It's used to publish CJS to npm.
 (function (global, factory) {
   module.exports = factory() ;
@@ -1186,7 +1188,9 @@ var tinycolor = createCommonjsModule(function (module, exports) {
   return tinycolor;
 
 }));
-});
+}(tinycolor$1));
+
+const tinycolor = tinycolor$1.exports;
 
 const isDarkColor = (color) => {
     return tinycolor(color).isDark();

package/dist/components/zonos-address2.js

@@ -4,6 +4,7 @@ import { l as logError, b as localizationStore } from './localization.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
 const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
+const ZonosAddressStyle0 = zonosAddressCss;
 
 const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends HTMLElement {
     constructor() {
@@ -67,13 +68,13 @@ const ZonosAddress = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { class: "zonos--address zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--address-component" })));
+        return (h(Host, { key: '47fa225123b7c944732b018fbb374bcb6da0f4ca', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '4d0d9d4f9c09d6b2f29bc6a44164a0ef8db0acc9', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'd279ba97287890e489230f9e449a344db76556f2', class: "zonos--address-component" })));
     }
     get el() { return this; }
     static get watchers() { return {
         "stripe": ["watchInitStripe"]
     }; }
-    static get style() { return zonosAddressCss; }
+    static get style() { return ZonosAddressStyle0; }
 }, [2, "zonos-address", {
         "type": [1],
         "titleText": [1, "title-text"],

package/dist/components/zonos-badge2.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as zonosStoreFontFamily } from './zonosStore.js';
+import { b as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
 const zonosBadgeCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";
+const ZonosBadgeStyle0 = zonosBadgeCss;
 
 const ZonosBadge = /*@__PURE__*/ proxyCustomElement(class ZonosBadge extends HTMLElement {
     constructor() {
@@ -19,18 +20,18 @@ const ZonosBadge = /*@__PURE__*/ proxyCustomElement(class ZonosBadge extends HTM
         this.class = '';
     }
     render() {
-        return (h(Host, { class: classes(['zonos--elements zonos--badge', this.class]), style: {
+        return (h(Host, { key: '2d111e91f403ef5c03f742f5dabe9491623be91d', class: classes(['zonos--elements zonos--badge', this.class]), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { class: classes([
+            } }, h("div", { key: 'e6debe091b732b857f180cee19bec4be435ea524', class: classes([
                 'zonos--badge-content',
                 this.color,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", null, h("slot", null)))));
+            ]) }, this.icon, h("zonos-text", { key: 'e92c97d77fa5ce279059953f7d7fbc5a0030aa5d' }, h("slot", { key: 'c93852c3225ba57dd26c26300254f348e349f9ad' })))));
     }
-    static get style() { return zonosBadgeCss; }
+    static get style() { return ZonosBadgeStyle0; }
 }, [1, "zonos-badge", {
         "bold": [4],
         "color": [1],

package/dist/components/zonos-banner2.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as zonosStoreFontFamily } from './zonosStore.js';
+import { b as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
 const zonosBannerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{border-radius:var(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:var(--amino-space-0);grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:var(--amino-space-4)}:host(.info){background-color:var(--amino-blue-100);border:1px solid var(--amino-blue-200)}:host(.success){background-color:var(--amino-green-100);border:1px solid var(--amino-green-200)}:host(.error){background-color:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host(.warning){background-color:var(--amino-orange-100);border:1px solid var(--amino-orange-200)}";
+const ZonosBannerStyle0 = zonosBannerCss;
 
 const ZonosBanner = /*@__PURE__*/ proxyCustomElement(class ZonosBanner extends HTMLElement {
     constructor() {
@@ -71,7 +72,7 @@ const ZonosBanner = /*@__PURE__*/ proxyCustomElement(class ZonosBanner extends H
                 })));
         }
     }
-    static get style() { return zonosBannerCss; }
+    static get style() { return ZonosBannerStyle0; }
 }, [1, "zonos-banner", {
         "bannerTitle": [1, "banner-title"],
         "intent": [1],

package/dist/components/zonos-button2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore.js';
+import { z as zonosStore, b as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isColorVariable } from './isColorVariable.js';
@@ -21,6 +21,7 @@ const getButtonTheme = (overrideBackground) => {
 };
 
 const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--amino-gray-200)}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-200)}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
+const ZonosButtonStyle0 = zonosButtonCss;
 
 const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends HTMLElement {
     constructor() {
@@ -77,12 +78,12 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
             ? getButtonTheme(overrideBackground)
             : undefined;
         const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        return (h(Host, { key: 'af41b1035e5ea776d47580647a65997bb41730e3', class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("button", { class: classes([
+            } }, h("button", { key: 'af3fdc9aa0440cf5a7e49c4c0c76826d7a700d32', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -95,12 +96,12 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
                 this.backgroundColor &&
                     this.variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '32b6a079ba98ab9d62b5df34ddc15e4ac7a87a8e', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get watchers() { return {
         "icon": ["iconChangeHandler"]
     }; }
-    static get style() { return zonosButtonCss; }
+    static get style() { return ZonosButtonStyle0; }
 }, [1, "zonos-button", {
         "class": [1],
         "color": [1],

package/dist/components/zonos-card2.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as zonosStoreFontFamily } from './zonosStore.js';
+import { b as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
 const zonosCardCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .styled-card{border:var(--amino-border);border-radius:var(--amino-radius-6);padding:var(--spacing, var(--amino-space-24));text-align:left}:host .styled-card hr{margin-left:calc(var(--spacing, var(--amino-space-24)) * -1);margin-right:calc(var(--spacing, var(--amino-space-24)) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, var(--amino-space-24));border-bottom:var(--amino-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));border-top:var(--amino-border);background:var(--amino-surface-color-secondary);margin-top:var(--spacing, var(--amino-space-24));border-bottom-left-radius:var(--amino-radius-8);border-bottom-right-radius:var(--amino-radius-8);height:var(--footerHeight)}";
+const ZonosCardStyle0 = zonosCardCss;
 
 const ZonosCard = /*@__PURE__*/ proxyCustomElement(class ZonosCard extends HTMLElement {
     constructor() {
@@ -19,14 +20,14 @@ const ZonosCard = /*@__PURE__*/ proxyCustomElement(class ZonosCard extends HTMLE
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { style: {
+        return (h(Host, { key: 'f2f7929742862b9806ddc568155e7cddf954252e', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { class: classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", null), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
+            } }, h("div", { key: 'ce3568d7ded3cfb9acb0f4ff3d4184a17b88f33b', class: classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: '3cc9f896df1899da73eab80dfbb3aac3a0046956' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
             } }, h("div", null, this.footerContent), h("h-stack", { spacing: 8 }, this.footerActions))))));
     }
-    static get style() { return zonosCardCss; }
+    static get style() { return ZonosCardStyle0; }
 }, [1, "zonos-card", {
         "actions": [16],
         "class": [1],

package/dist/components/zonos-cart-items2.js

@@ -4,6 +4,7 @@ import { f as formatCurrency } from './formatCurrency.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
 const zonosCartItemsCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column{padding:var(--amino-space-8);font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host img{min-width:40px}";
+const ZonosCartItemsStyle0 = zonosCartItemsCss;
 
 const ZonosCartItems = /*@__PURE__*/ proxyCustomElement(class ZonosCartItems extends HTMLElement {
     constructor() {
@@ -16,7 +17,7 @@ const ZonosCartItems = /*@__PURE__*/ proxyCustomElement(class ZonosCartItems ext
         var _a;
         const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
         const rate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
-        return (h(Host, { class: "zonos--cart-items zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tbody", null, cartStore.items.map(item => {
+        return (h(Host, { key: '945bd402bb5f8a73bc02dc8f30d187c43b78050e', class: "zonos--cart-items zonos--elements" }, h("table", { key: '600b545e20eb81d7e744c2bf66a9cec2eb68c8e7', class: "zonos--cart-table" }, h("tbody", { key: 'cd12a4372e97b8018af37433e6b2daba5403e621' }, cartStore.items.map(item => {
             const itemImg = item.imageUrl;
             return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];
@@ -29,7 +30,7 @@ const ZonosCartItems = /*@__PURE__*/ proxyCustomElement(class ZonosCartItems ext
         })))));
     }
     static get assetsDirs() { return ["assets"]; }
-    static get style() { return zonosCartItemsCss; }
+    static get style() { return ZonosCartItemsStyle0; }
 }, [1, "zonos-cart-items", {
         "errorImages": [32]
     }]);

package/dist/components/zonos-cart-subtotal2.js

@@ -13,6 +13,7 @@ const InfoIcon = `<svg viewBox="0 0 17 16" fill="none" xmlns="https://www.w3.org
 `;
 
 const zonosCartSubtotalCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column{padding:var(--amino-space-20) var(--amino-space-8);vertical-align:top}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--amino-gray-200)}:host .zonos--cart-duty-tax-price{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;gap:5px}:host .zonos--cart-subtotal-price{text-align:right}";
+const ZonosCartSubtotalStyle0 = zonosCartSubtotalCss;
 
 const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtotal extends HTMLElement {
     constructor() {
@@ -52,7 +53,7 @@ const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtot
         })))))));
     }
     static get assetsDirs() { return ["assets"]; }
-    static get style() { return zonosCartSubtotalCss; }
+    static get style() { return ZonosCartSubtotalStyle0; }
 }, [1, "zonos-cart-subtotal"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {