@zonos/elements 1.3.31 → 1.3.33

package/dist/esm/zonos-hello-dialog.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-3b46f3c3.js';
-import { l as localizationStore, B as currencyFormat, t as translate } from './cart-b96aaa4f.js';
+import { l as localizationStore, B as currencyFormat, t as translate } from './cart-22ba08ec.js';
 import { z as zonosStore } from './zonosStore-ba9e541e.js';
 import { c as classes } from './classes-0d95c529.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';
@@ -213,18 +213,18 @@ const ZonosHelloDialog = class {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '1194b1466981cf8ba04d726eff3ba34b19510258', class: "zonos--elements" }, h("div", { key: 'ffea099f72ff3f42ddbd5b5947a5b8ca0f3d206d', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: 'af2c46bcc413205d644a2b94ee2ff568d3d004f2', class: "zonos--elements" }, h("div", { key: '67a563de9e702e370d057ee3cc45bc0c14feedc5', "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) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '7396d7cd91c69f77d5f2f4ae9a088b1a763c6988' }, h("div", { key: 'aedfda83797a58fc2a0432a89503cbc7774d5c8b', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '0c9ad53d902ce7c45cdf9192dbe8ea7f9f46f7d4', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '9a359684275e946fc26bdc6ea7b8a371bf49dea5', spacing: 24 }, h("zonos-country-flag", { key: 'ca230fb4426ecb39febb0972d9a6ce15435c4e1d', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '17bbc6a70143a9165b8f088b5b2ea1e6e69622ed', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '33c66273d9fd8330ee4cf2bfcdf5b454a89e0ae0', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '57cfdcd587ab62fad99016a389771d3a169ad297', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '28b9b9e7967e81ca50bc4d0cfe45c9545a8b9dde', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '412a8d2f4c01e4ff216feb92a979be5987bcd8c7' }, h("div", { key: 'b2921acfc77c6a402a14256a6f1c28607f6533e7', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'aa623c0533a5f852dab7f0f98d6dc26f62ef899a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '4fdac9331a5b2506a5ca1c7c1b6bfecf822bfcd9', spacing: 24 }, h("zonos-country-flag", { key: '57afef45e0bebe9bdfa715306f6ec2c30aca8dc1', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '954b970c82fd631efadbd9c916e8bad78f0e1321', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: 'cde98a9636e6150d6cab009970938a0cf61bc05a', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'b63fc79317f23854737c1f2dd2cbde38f3841f2a', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: 'e115a03222d2271b358c3f1ae3feb938bafcdbef', 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", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), h("zonos-card", { key: '94ef9064b4e523c3f0fc9cd50142da36f003006d', spacing: "12px" }, h("zonos-v-stack", { key: '01b3550b5b080d106eaecedf78b13275e01ae159', spacing: 12 }, h("div", { key: '19b1ba3e12dab87250d3ad19a5dc8e13b6f871d6', class: "zonos--flex-message" }, h("zonos-icon", { key: '9773bf4ad57752437a367c2093de0737693bf588', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: '4c75d971f37db399e6f4332a6c92b53758629b6b' }, dutyDeMinimisMessage)), h("div", { key: '52640f51d3664582d7bb3c26f2d2d17d82ad856e', class: "zonos--flex-message" }, h("zonos-icon", { key: '9afe9273e6b19aada01018152a64973449b87094', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: 'b2481af13570471cc2907c48b54c7039ec31e92c' }, taxDeMinimisMessage)), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: 'a6b2d31ee922db13cf9987a823e99d6088c392b0', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '21d187502c3f0ccef0c351f09aa943566228944f' }, h("zonos-country-select", { key: '3dbd522e8a5004c2a1ed766ba92c9d0387f845d8', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '686d8bba48fefd49bf2bf15dc295fb79b9cd5299' }, h("zonos-language-select", { key: '22ba1b42ec7ba1808fd806ad3529a377d34b4ac8', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: '6f5ef13c8ce1171b99c148f43f491ced8f29cd57', spacing: "12px" }, h("zonos-v-stack", { key: '816a373a6dcf69976279af51f09d136f18c6b4a8', spacing: 12 }, h("div", { key: '51fc31937cb4885c7a98ee5fbc0755a00158f172', class: "zonos--flex-message" }, h("zonos-icon", { key: 'bc659d649b3a7f046225270870e7ae31597027f4', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: 'e63ce2eb6f381718ca26962c7429f266bf8cf8d9' }, dutyDeMinimisMessage)), h("div", { key: '6f49eac81be52709ad8f35c04cccd7d2fec03b7a', class: "zonos--flex-message" }, h("zonos-icon", { key: 'd95f29c3c42480c89a34e831740cfdbb3d64c058', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: 'c226092fef030070af3af1d45debab989fb4f1b7' }, taxDeMinimisMessage)), additionalInformation === null || additionalInformation === void 0 ? void 0 :
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '32739e817940a937b59380197934ced91f2afc50', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'be58e393680370837ae35d5d4f85f77cf9620db2' }, h("zonos-country-select", { key: 'bc5c7e086513a44f817e5769acf2ca382b01fcc4', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '7cbee089b9661602bb23e5e2821030d04891f18a' }, h("zonos-language-select", { key: '55d654b2b339cfd83e3fe9814d914a382a891af3', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

package/dist/esm/zonos-hello.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-3b46f3c3.js';
 import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-ba9e541e.js';
-import { r as handleFetch, l as localizationStore, u as isValidSelector, t as translate, w as getZCountryUrlParam, x as setZCountryUrlParam, y as currencyDisplay, z as currencyConvertAndFormat, A as currencyConvert, B as currencyFormat } from './cart-b96aaa4f.js';
+import { r as handleFetch, l as localizationStore, u as isValidSelector, t as translate, w as getZCountryUrlParam, x as setZCountryUrlParam, y as currencyDisplay, z as currencyConvertAndFormat, A as currencyConvert, B as currencyFormat } from './cart-22ba08ec.js';
 import { c as classes } from './classes-0d95c529.js';
 import { a as logError, l as log } from './logError-c456c092.js';
 import { g as getHasMoreSpaceOnRight } from './getHasMoreSpaceOnRight-70eb913a.js';

package/dist/esm/zonos-input.entry.js

@@ -23,17 +23,17 @@ const ZonosInput = class {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (h(Host, { key: 'f2bf9e34ef694f026eceed1327603659bbd4c5a4', class: classes([
+        return (h(Host, { key: 'f4b7ad75b2aebce3bc05a482fe20fee290a3a4e7', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius(),
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '0fe9066fc683f6a683c494209fa29b10c0076dc5', class: classes([
+            } }, h("div", { key: '356e16c11c1cd9edf137f69978ebaa3eb2c28d4e', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: 'f185418ddc6a83e829a9d2dd44a021288f00d4d5', class: classes([
+            ]) }, h("input", { key: '71659072bd58942efebb88be65ced18ad29be8ab', class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -41,7 +41,7 @@ const ZonosInput = class {
             ]), disabled: this.isDisabled, onInput: e => {
                 const input = e.target;
                 this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '3d4ab801e27af15d819b17db226f0d5f719ac903', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: 'b84c60836fc969c23aedc314c67337e8e87f2ab6', class: "zonos--floated-label", "data-label": this.inputLabel }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/zonos-language-select_2.entry.js

@@ -0,0 +1,56 @@
+import { r as registerInstance, h, H as Host } from './index-3b46f3c3.js';
+import { H as localizationStoreUpdateSelectedLocale, t as translate, l as localizationStore } from './cart-22ba08ec.js';
+import { d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
+import { l as languages } from './ILanguage-cd6acb72.js';
+import './logError-c456c092.js';
+import './isDarkColor-f8324c10.js';
+import './getBorderRadius-947c24de.js';
+
+const GreenCheckDuotoneIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99996 2.6665C5.05444 2.6665 2.66663 5.05432 2.66663 7.99984C2.66663 10.9454 5.05444 13.3332 7.99996 13.3332C10.9455 13.3332 13.3333 10.9454 13.3333 7.99984C13.3333 5.05432 10.9455 2.6665 7.99996 2.6665Z" fill="#AFF8C3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1403 6.10535C10.3582 6.27488 10.3975 6.58902 10.228 6.80699L8.01055 9.65797C7.76436 9.97449 7.29646 10.0036 7.01291 9.72008L5.81307 8.52024C5.61781 8.32498 5.61781 8.0084 5.81307 7.81314C6.00833 7.61787 6.32492 7.61787 6.52018 7.81314L7.45301 8.74597L9.43862 6.19305C9.60815 5.97508 9.92229 5.93581 10.1403 6.10535Z" fill="#246627"/>
+</svg>
+`;
+
+const zonosLanguageSelectCss = ":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--language-select{width:100%}:host .zonos--language-select .zonos--language-select-content{display:grid;grid-template-columns:repeat(3, minmax(-webkit-max-content, 1fr));grid-template-columns:repeat(3, minmax(max-content, 1fr));padding:16px;padding-top:0px}:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button{display:-ms-flexbox;display:flex;padding:8px;gap:4px;-ms-flex-align:center;align-items:center;border-radius:var(--zonos-elements-radius-4);cursor:pointer;width:100%;border:none;background:none}:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button:hover{background:var(--zonos-elements-gray-100)}@media (max-width: 400px){:host .zonos--language-select .zonos--language-select-content{grid-template-columns:1fr 1fr}}";
+const ZonosLanguageSelectStyle0 = zonosLanguageSelectCss;
+
+const ZonosLanguageSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.languageSelected = (languageCode) => {
+            // mutate the selected language code in store
+            void localizationStoreUpdateSelectedLocale(languageCode);
+            this.handleOnClose();
+        };
+        this.handleOnClose = () => { };
+    }
+    render() {
+        const { selectedLocale } = localizationStore;
+        return (h(Host, { key: '6682af3d631bac1a8d3783418c30364ff7694792', class: "zonos--elements", style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '9f7e60bc5c4e9d1c0cc31afcbbaec444a7da630e', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'f790ef85eeb0bed05773d98793437ab4d6e64c8d', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '7385a1134b21ae4b39947483ee643da021e6c54c', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+    }
+};
+ZonosLanguageSelect.style = ZonosLanguageSelectStyle0;
+
+const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
+
+const zonosSelectDialogHeaderCss = ":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--select-dialog-header-wrapper{position:-webkit-sticky;position:sticky;top:0;background:var(--zonos-elements-surface-color);padding:16px}:host .zonos--select-dialog-header-wrapper .zonos--select-dialog-header{position:relative;-ms-flex-pack:justify;justify-content:space-between;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
+const ZonosSelectDialogHeaderStyle0 = zonosSelectDialogHeaderCss;
+
+const ZonosSelectDialogHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.handleOnClose = () => { };
+        this.label = '';
+    }
+    render() {
+        return (h(Host, { key: '21cd3c3e35baf172ecad7f47a76810e8f39bdeff', class: "zonos--elements", style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("zonos-v-stack", { key: '0470633326b6fca9b45a8be67e0d77819561f634', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '8713cbf368658af22bb88825d32175117d47c95b', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '2f94e9f6139570398897ca55934c5244df7f82e8', type: "boldLabel" }, this.label), h("zonos-button", { key: 'c247dabcc8f487a4cc5a814fb1aa4d9a68fa4ba3', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '26727e634ec09a3b9e3912ada3b920a87a1ba4d0' }))));
+    }
+};
+ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;
+
+export { ZonosLanguageSelect as zonos_language_select, ZonosSelectDialogHeader as zonos_select_dialog_header };

package/dist/esm/zonos-link.entry.js

@@ -12,7 +12,7 @@ const ZonosLink = class {
         this.linkTitle = undefined;
     }
     render() {
-        return (h(Host, { key: 'a148ed9b4d285cd39b63da348dcfcc11f4973f04', class: "zonos--elements" }, h("a", { key: '121b299148c4227c0b500ecb6ded03470476aa90', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'cf6637f399d3c069bd6ea3d0f3a900fd0740afc5' }))));
+        return (h(Host, { key: 'bba0da02c0dee468bd0cacd268f339f7ec4f1008', class: "zonos--elements" }, h("a", { key: '19515197e397b2b24237e77d3e89de75382c14e1', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '63d597a3091e954c9302e461030646b38ee2396e' }))));
     }
 };
 ZonosLink.style = ZonosLinkStyle0;

package/dist/esm/zonos-logo.entry.js

@@ -15,11 +15,11 @@ const ZonosLogo = class {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: 'c790c72d413c586a873c5046a1aee797c1f0af36', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: '08ef20244bc204125a7a308efed42cd7fc86c885', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '68efd2097a0d8488308de0b50bef30cc67deb6fa', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '9202f0619fa3874a19ca3050477719b19592d82a', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };

package/dist/esm/zonos-notification_2.entry.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, h, H as Host, d as getElement } from './index-3b46f3c3.js';
+import { d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
+import { c as classes } from './classes-0d95c529.js';
+import { h as stripeStore } from './cart-22ba08ec.js';
+import { a as logError } from './logError-c456c092.js';
+import './isDarkColor-f8324c10.js';
+import './getBorderRadius-947c24de.js';
+
+const zonosNotificationCss = ":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-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(--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)}";
+const ZonosNotificationStyle0 = zonosNotificationCss;
+
+const ZonosNotification = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.notificationArray = [];
+    }
+    /**
+     * Show a notification
+     */
+    async showNotification(notification) {
+        // random generate id
+        const id = `id-${Math.random().toString(36).substring(2, 9)}`;
+        const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
+        this.notificationArray = [...this.notificationArray, notificationItem];
+        setTimeout(() => {
+            this.updateTransitionClass({
+                id,
+                transitionClass: 'show',
+            });
+        }, 50);
+        setTimeout(() => {
+            this.removeNotification(id);
+        }, notificationItem.timeout);
+    }
+    updateTransitionClass({ id, transitionClass, }) {
+        this.notificationArray = this.notificationArray.map(notification => {
+            if (notification.id === id) {
+                return Object.assign(Object.assign({}, notification), { transitionClass });
+            }
+            return notification;
+        });
+    }
+    /**
+     * Remove a notification
+     */
+    removeNotification(id) {
+        // add hide class before removing the item 100ms to trigger animation
+        this.updateTransitionClass({
+            id,
+            transitionClass: '',
+        });
+        setTimeout(() => {
+            this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
+        }, 300);
+    }
+    render() {
+        return (h(Host, { key: '17c08c90c6c1dfade4e43451c196127a0f53429e', class: classes(['zonos--elements zonos--notification']), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '6624419d86a5c7518539069dbc5c9d7c08262c75', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+            return (h("div", { "aria-hidden": "true", class: classes([
+                    'zonos--notification-item',
+                    notification.type,
+                    notification.transitionClass,
+                ]), key: notification.id, onClick: () => {
+                    this.removeNotification(notification.id);
+                } }, h("zonos-text", { textColor: "gray-0" }, notification.message)));
+        }))));
+    }
+};
+ZonosNotification.style = ZonosNotificationStyle0;
+
+const zonosPaymentCss = ".sc-zonos-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-payment-h *.sc-zonos-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:16px}";
+const ZonosPaymentStyle0 = zonosPaymentCss;
+
+const ZonosPayment = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.titleText = undefined;
+        this.stripe = stripeStore.stripe;
+        this.stripeElements = stripeStore.stripeElements;
+    }
+    watchInitStripe() {
+        if (!this.stripeElements) {
+            return;
+        }
+        // Create and mount the Authentication Element in ${type} mode
+        const paymentElement = stripeStore.stripePaymentElement ||
+            this.stripeElements.create('payment', {
+                layout: 'tabs',
+            });
+        const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
+        if (!paymentElementContainer) {
+            logError('Cannot find container element for paymentElement');
+            return;
+        }
+        paymentElement.mount(paymentElementContainer);
+        paymentElement.on('change', event => {
+            stripeStore.stripePaymentEventData = event;
+        });
+        stripeStore.stripePaymentElement = paymentElement;
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        this.watchInitStripe();
+    }
+    render() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { key: '870d7a4cb6132332368d356488c5eedd1dea16f3', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '7aef62f6daae0c5b59caa685c4255fb78eebc1be', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '073976bceadf5f8efa78d0b1f6098e94bfa3d1a6', class: "zonos--payment-component" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "stripeElements": ["watchInitStripe"],
+        "stripe": ["watchInitStripe"]
+    }; }
+};
+ZonosPayment.style = ZonosPaymentStyle0;
+
+export { ZonosNotification as zonos_notification, ZonosPayment as zonos_payment };

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

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host } from './index-3b46f3c3.js';
+import { d as zonosStoreFontFamily } from './zonosStore-ba9e541e.js';
+import { c as classes } from './classes-0d95c529.js';
+
+const zonosVStackCss = ":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 .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
+const ZonosVStackStyle0 = zonosVStackCss;
+
+const VStack = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.spacing = 24;
+    }
+    render() {
+        return (h(Host, { key: '8cdee94089af0eac57784a7914e169f363472577', style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'd60da826d77b4cf7e5349b75927fc746f0053ddd', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '97b0e8232cbac73938225e1310712c1607997073' }))));
+    }
+};
+VStack.style = ZonosVStackStyle0;
+
+export { VStack as zonos_v_stack };