@zonos/elements 1.2.3 → 1.2.4-alpha.2

package/dist/components/zonos-hello-dialog2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { j as currencyFormat, b as localizationStore, t as translate } from './localization.js';
+import { k as currencyFormat, b as localizationStore, t as translate } from './localization.js';
 import { z as zonosStore } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { d as defineCustomElement$b } from './zonos-banner2.js';
@@ -15,17 +15,17 @@ import { d as defineCustomElement$2 } from './zonos-text2.js';
 import { d as defineCustomElement$1 } from './zonos-v-stack2.js';
 
 const getHasMoreSpaceOnRight = (ref) => {
-  const componentRect = ref.getBoundingClientRect();
-  const availableSpaceLeft = componentRect.left;
-  const availableSpaceRight = window.innerWidth - componentRect.right;
-  return availableSpaceLeft <= availableSpaceRight;
+    const componentRect = ref.getBoundingClientRect();
+    const availableSpaceLeft = componentRect.left;
+    const availableSpaceRight = window.innerWidth - componentRect.right;
+    return availableSpaceLeft <= availableSpaceRight;
 };
 
 const getHasMoreSpaceAbove = (ref) => {
-  const componentRect = ref.getBoundingClientRect();
-  const availableSpaceAbove = componentRect.top;
-  const availableSpaceBelow = window.innerHeight - componentRect.bottom;
-  return availableSpaceAbove >= availableSpaceBelow;
+    const componentRect = ref.getBoundingClientRect();
+    const availableSpaceAbove = componentRect.top;
+    const availableSpaceBelow = window.innerHeight - componentRect.bottom;
+    return availableSpaceAbove >= availableSpaceBelow;
 };
 
 const BagIcon = `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="https://www.w3.org/2000/svg">
@@ -45,184 +45,184 @@ const MoneyIcon = `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" x
 
 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 zonosHelloDialogCss = ":host{font-family:Inter;display:block}: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--hello-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center}:host .zonos--hello-dialog{position:absolute;background:var(--amino-surface-color);width:100vw;max-width:430px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-height:600px;border-radius:var(--amino-radius-12);outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);overflow-y:auto;top:-2px;right:-2px;opacity:0;-webkit-transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:top right;transform-origin:top right;z-index:1001}:host .zonos--hello-dialog .zonos--hello-dialog-header{text-align:center}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:top left;transform-origin:top left;right:unset;left:-2px}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom{-webkit-transform-origin:bottom right;transform-origin:bottom right;bottom:calc(100% - 32px);top:unset}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom left;transform-origin:bottom left}:host .zonos--hello-dialog::-webkit-scrollbar{width:12px;height:12px}:host .zonos--hello-dialog::-webkit-scrollbar-track{background:#f5f5f5;border-top-right-radius:var(--amino-radius-12);border-bottom-right-radius:var(--amino-radius-12)}:host .zonos--hello-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#ccc;border:4px solid transparent;background-clip:content-box}:host .zonos--hello-dialog::-webkit-scrollbar-thumb:hover{background:#999}:host .zonos--hello-dialog .zonos--animate-content{opacity:0;height:0;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}:host .zonos--hello-dialog .zonos--show-animate-content{opacity:1;height:100%}:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}:host .zonos--hello-dialog .zonos--close-button{position:absolute;right:var(--amino-space-8);top:var(--amino-space-8);width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;z-index:10}:host .zonos--hello-dialog .zonos--close-button:hover{background:var(--amino-hover-color);border-radius:var(--amino-radius-6)}:host .zonos--hello-dialog .zonos--hello-dialog-content{padding:var(--amino-space-16)}:host .zonos--hello-dialog .zonos--hello-dialog-content .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:32px;height:24px}:host .zonos--hello-dialog .zonos--flex-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-12)}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:unset;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}@media (max-width: 768px){:host .zonos--hello-dialog{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:unset;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}";
+const zonosHelloDialogCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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--hello-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center}:host .zonos--hello-dialog{position:absolute;background:var(--amino-surface-color);width:100vw;max-width:430px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-height:600px;border-radius:var(--amino-radius-12);outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);overflow-y:auto;top:-2px;right:-2px;opacity:0;-webkit-transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:top right;transform-origin:top right;z-index:1001}:host .zonos--hello-dialog .zonos--hello-dialog-header{text-align:center}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:top left;transform-origin:top left;right:unset;left:-2px}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom{-webkit-transform-origin:bottom right;transform-origin:bottom right;bottom:calc(100% - 32px);top:unset}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom left;transform-origin:bottom left}:host .zonos--hello-dialog::-webkit-scrollbar{width:12px;height:12px}:host .zonos--hello-dialog::-webkit-scrollbar-track{background:#f5f5f5;border-top-right-radius:var(--amino-radius-12);border-bottom-right-radius:var(--amino-radius-12)}:host .zonos--hello-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#ccc;border:4px solid transparent;background-clip:content-box}:host .zonos--hello-dialog::-webkit-scrollbar-thumb:hover{background:#999}:host .zonos--hello-dialog .zonos--animate-content{opacity:0;height:0;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}:host .zonos--hello-dialog .zonos--show-animate-content{opacity:1;height:100%}:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}:host .zonos--hello-dialog .zonos--close-button{position:absolute;right:var(--amino-space-8);top:var(--amino-space-8);width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;z-index:10}:host .zonos--hello-dialog .zonos--close-button:hover{background:var(--amino-hover-color);border-radius:var(--amino-radius-6)}:host .zonos--hello-dialog .zonos--hello-dialog-content{padding:var(--amino-space-16)}:host .zonos--hello-dialog .zonos--hello-dialog-content .zonos--hello-country-flag{border-radius:var(--amino-radius-4);width:32px;height:24px}:host .zonos--hello-dialog .zonos--flex-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-12)}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:unset;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}@media (max-width: 768px){:host .zonos--hello-dialog{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:unset;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}";
 
 const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.closeDialog = createEvent(this, "closeDialog", 7);
-    this.clickOutsideDialogHandler = (e) => {
-      if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {
-        this.setIsOpen(false);
-      }
-    };
-    this.getCurrentPageEnum = () => {
-      switch (zonosStore.currentHelloPage) {
-        case 'home':
-          return 'hello_homepage';
-        case 'cart':
-          return 'hello_cart';
-        case 'productList':
-          return 'hello_item_list';
-        case 'productDetail':
-          return 'hello_item_details';
-        default:
-          return null;
-      }
-    };
-    this.setShowCountrySelect = async (value) => {
-      this.showCountrySelect = value;
-    };
-    this.isOpen = false;
-    this.setIsOpen = () => { };
-    this.mobileLocationOverride = undefined;
-    this.animateFromLeftOverride = undefined;
-    this.appearanceSettings = undefined;
-    this.restrictedItems = [];
-    this.welcomeMessage = 'Welcome to our Demo App!';
-    this.showCountrySelect = false;
-  }
-  globalClickHandler(e) {
-    this.clickOutsideDialogHandler(e);
-  }
-  isOpenHandler(isOpen) {
-    if (!isOpen) {
-      void this.setShowCountrySelect(false);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.closeDialog = createEvent(this, "closeDialog", 7);
+        this.clickOutsideDialogHandler = (e) => {
+            if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {
+                this.setIsOpen(false);
+            }
+        };
+        this.getCurrentPageEnum = () => {
+            switch (zonosStore.currentHelloPage) {
+                case 'home':
+                    return 'hello_homepage';
+                case 'cart':
+                    return 'hello_cart';
+                case 'productList':
+                    return 'hello_item_list';
+                case 'productDetail':
+                    return 'hello_item_details';
+                default:
+                    return null;
+            }
+        };
+        this.setShowCountrySelect = async (value) => {
+            this.showCountrySelect = value;
+        };
+        this.isOpen = false;
+        this.setIsOpen = () => { };
+        this.mobileLocationOverride = undefined;
+        this.animateFromLeftOverride = undefined;
+        this.appearanceSettings = undefined;
+        this.restrictedItems = [];
+        this.welcomeMessage = 'Welcome to our Demo App!';
+        this.showCountrySelect = false;
     }
-  }
-  render() {
-    var _a;
-    const { countryLandedCost, selectedCountryCode } = localizationStore;
-    // Our Robby API spells deminimis wrong here
-    const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
-      ? currencyFormat(countryLandedCost.dutyDeminimus)
-      : null;
-    // If Canada, use 40 CAD (courier duty de minimis)
-    const dutyDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
-      ? currencyFormat(40)
-      : dutyDeminimis;
-    // If deminimis is undefined or null, assume it's $0
-    const dutyDeMinimisMessage = dutyDeminimisToUse
-      ? `${translate('Spend')} ${dutyDeminimisToUse} ${translate('duty free')}`
-      : translate('Duties will apply to all orders');
-    // Our Robby API spells deminimis wrong here
-    const taxDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.vatTaxDeminimus)
-      ? currencyFormat(countryLandedCost.vatTaxDeminimus)
-      : null;
-    // If Canada, use 150 CAD (courier tax de minimis)
-    const taxDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
-      ? currencyFormat(150)
-      : taxDeminimis;
-    const taxDeMinimisMessage = taxDeminimisToUse
-      ? `${translate('Spend')} ${taxDeminimisToUse} ${translate('tax free')}`
-      : translate('Taxes will apply to all orders');
-    const animateLeft = this.animateFromLeftOverride ||
-      (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
-    const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
-    const { customMessages } = localizationStore;
-    const welcomeMessage = `${translate('Welcome to')} ${zonosStore.organizationName}!`;
-    const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
-      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([
-        '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 => {
-      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) })))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get watchers() { return {
-    "isOpen": ["isOpenHandler"]
-  }; }
-  static get style() { return zonosHelloDialogCss; }
+    globalClickHandler(e) {
+        this.clickOutsideDialogHandler(e);
+    }
+    isOpenHandler(isOpen) {
+        if (!isOpen) {
+            void this.setShowCountrySelect(false);
+        }
+    }
+    render() {
+        var _a;
+        const { countryLandedCost, selectedCountryCode } = localizationStore;
+        // Our Robby API spells deminimis wrong here
+        const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
+            ? currencyFormat(countryLandedCost.dutyDeminimus)
+            : null;
+        // If Canada, use 40 CAD (courier duty de minimis)
+        const dutyDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
+            ? currencyFormat(40)
+            : dutyDeminimis;
+        // If deminimis is undefined or null, assume it's $0
+        const dutyDeMinimisMessage = dutyDeminimisToUse
+            ? `${translate('Spend')} ${dutyDeminimisToUse} ${translate('duty free')}`
+            : translate('Duties will apply to all orders');
+        // Our Robby API spells deminimis wrong here
+        const taxDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.vatTaxDeminimus)
+            ? currencyFormat(countryLandedCost.vatTaxDeminimus)
+            : null;
+        // If Canada, use 150 CAD (courier tax de minimis)
+        const taxDeminimisToUse = localizationStore.selectedCountryCode === 'CA'
+            ? currencyFormat(150)
+            : taxDeminimis;
+        const taxDeMinimisMessage = taxDeminimisToUse
+            ? `${translate('Spend')} ${taxDeminimisToUse} ${translate('tax free')}`
+            : translate('Taxes will apply to all orders');
+        const animateLeft = this.animateFromLeftOverride ||
+            (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
+        const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
+        const { customMessages } = localizationStore;
+        const welcomeMessage = `${translate('Welcome to')} ${zonosStore.organizationName}!`;
+        const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
+            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([
+                '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 => {
+            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) })))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get watchers() { return {
+        "isOpen": ["isOpenHandler"]
+    }; }
+    static get style() { return zonosHelloDialogCss; }
 }, [1, "zonos-hello-dialog", {
-    "isOpen": [4, "is-open"],
-    "setIsOpen": [16],
-    "mobileLocationOverride": [1, "mobile-location-override"],
-    "animateFromLeftOverride": [4, "animate-from-left-override"],
-    "appearanceSettings": [16],
-    "restrictedItems": [16],
-    "welcomeMessage": [32],
-    "showCountrySelect": [32]
-  }, [[4, "click", "globalClickHandler"]], {
-    "isOpen": ["isOpenHandler"]
-  }]);
+        "isOpen": [4, "is-open"],
+        "setIsOpen": [16],
+        "mobileLocationOverride": [1, "mobile-location-override"],
+        "animateFromLeftOverride": [4, "animate-from-left-override"],
+        "appearanceSettings": [16],
+        "restrictedItems": [16],
+        "welcomeMessage": [32],
+        "showCountrySelect": [32]
+    }, [[4, "click", "globalClickHandler"]], {
+        "isOpen": ["isOpenHandler"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-hello-dialog", "zonos-banner", "zonos-button", "zonos-card", "zonos-country-flag", "zonos-country-select", "zonos-custom-message", "zonos-hello-dialog-footer", "zonos-icon", "zonos-spinner", "zonos-text", "zonos-v-stack"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-hello-dialog":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosHelloDialog);
-      }
-      break;
-    case "zonos-banner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "zonos-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "zonos-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "zonos-country-flag":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "zonos-country-select":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "zonos-custom-message":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "zonos-hello-dialog-footer":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "zonos-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "zonos-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "zonos-v-stack":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-hello-dialog", "zonos-banner", "zonos-button", "zonos-card", "zonos-country-flag", "zonos-country-select", "zonos-custom-message", "zonos-hello-dialog-footer", "zonos-icon", "zonos-spinner", "zonos-text", "zonos-v-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-hello-dialog":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosHelloDialog);
+            }
+            break;
+        case "zonos-banner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "zonos-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "zonos-country-flag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "zonos-country-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "zonos-custom-message":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "zonos-hello-dialog-footer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-v-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosHelloDialog as Z, defineCustomElement as d, getHasMoreSpaceOnRight as g };

package/dist/components/zonos-hello.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosHello extends Components.ZonosHello, HTMLElement {}
 export const ZonosHello: {
-  prototype: ZonosHello;
-  new (): ZonosHello;
+    prototype: ZonosHello;
+    new (): ZonosHello;
 };
 /**
  * Used to define this component and all nested components recursively.