@zonos/elements 1.0.16

package/dist/components/zonos-icon.js

@@ -0,0 +1,8 @@
+import { Z as ZonosIcon$1, d as defineCustomElement$1 } from './zonos-icon2.js';
+
+const ZonosIcon = ZonosIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosIcon, defineCustomElement };
+
+//# sourceMappingURL=zonos-icon.js.map

package/dist/components/zonos-icon.js.map

@@ -0,0 +1 @@
+{"file":"zonos-icon.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-icon2.js

@@ -0,0 +1,50 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const zonosIconCss = ":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{display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";
+
+const ZonosIcon = /*@__PURE__*/ proxyCustomElement(class ZonosIcon extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.autoHeight = false;
+    this.color = 'gray-1200';
+    this.content = undefined;
+    this.size = 24;
+  }
+  render() {
+    if (!this.content || !this.el.shadowRoot) {
+      return null;
+    }
+    this.el.shadowRoot.innerHTML = this.content;
+    return (h(Host, { class: "zonos--elements", style: {
+        '--color': `var(--amino-${this.color})`,
+        '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
+        '--width': `${this.size}px`,
+      } }));
+  }
+  get el() { return this; }
+  static get style() { return zonosIconCss; }
+}, [1, "zonos-icon", {
+    "autoHeight": [4, "auto-height"],
+    "color": [1],
+    "content": [1],
+    "size": [2]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosIcon);
+      }
+      break;
+  } });
+}
+
+export { ZonosIcon as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-icon2.js.map

package/dist/components/zonos-icon2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-icon2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,iZAAiZ;;MCSzZ,SAAS;;;;;sBAKU,KAAK;iBAMZ,WAAW;;gBAiBX,EAAE;;EAIzB,MAAM;IACJ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE;MACxC,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAE5C,QACE,EAAC,IAAI,IACH,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE;QACL,SAAS,EAAE,eAAe,IAAI,CAAC,KAAK,GAAG;QACvC,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE;QAC5D,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;OAC5B,GACK,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/zonos-icon/zonos-icon.scss?tag=zonos-icon&encapsulation=shadow","src/components/common/zonos-icon/zonos-icon.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  svg {\n    width: var(--width);\n    height: var(--height);\n    fill: var(--color);\n    color: var(--color);\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport type { Color } from 'src/types';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-icon.scss',\n  tag: 'zonos-icon',\n})\nexport class ZonosIcon {\n  /**\n   * Determines if the icon should be auto height instead of square\n   * @default false\n   */\n  @Prop() autoHeight: boolean = false;\n\n  /**\n   * Color of the SVG\n   * @default 'gray-1200'\n   */\n  @Prop() color: Color = 'gray-1200';\n\n  /**\n   * The content of the icon (full svg)\n   * @example\n   * import RemoveIcon from './assets/removeIcon.svg';\n   * ...\n   * <zonos-icon content={RemoveIcon}></zonos-icon>\n   * // or\n   * <zonos-icon content=\"<svg>...</svg>\"></zonos-icon>\n   */\n  @Prop() content!: string;\n\n  /**\n   * The size of the icon\n   * @default 24\n   */\n  @Prop() size: number = 24;\n\n  @Element() el!: HTMLZonosIconElement;\n\n  render() {\n    if (!this.content || !this.el.shadowRoot) {\n      return null;\n    }\n\n    this.el.shadowRoot.innerHTML = this.content;\n\n    return (\n      <Host\n        class=\"zonos--elements\"\n        style={{\n          '--color': `var(--amino-${this.color})`,\n          '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,\n          '--width': `${this.size}px`,\n        }}\n      ></Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/zonos-link-authentication.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosLinkAuthentication extends Components.ZonosLinkAuthentication, HTMLElement {}
+export const ZonosLinkAuthentication: {
+  prototype: ZonosLinkAuthentication;
+  new (): ZonosLinkAuthentication;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { Z as ZonosLinkAuthentication$1, d as defineCustomElement$1 } from './zonos-link-authentication2.js';
+
+const ZonosLinkAuthentication = ZonosLinkAuthentication$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosLinkAuthentication, defineCustomElement };
+
+//# sourceMappingURL=zonos-link-authentication.js.map

package/dist/components/zonos-link-authentication.js.map

@@ -0,0 +1 @@
+{"file":"zonos-link-authentication.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-link-authentication2.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as stripeStore, a as stripeStorePrefetchLandedCost } from './stripe.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:Inter;display:block}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";
+
+const ZonosLinkAuthentication = /*@__PURE__*/ proxyCustomElement(class ZonosLinkAuthentication extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.titleText = undefined;
+    this.stripe = stripeStore.stripe;
+  }
+  watchInitStripe() {
+    if (!this.stripe || !stripeStore.stripeElements) {
+      return;
+    }
+    // Create and mount the Authentication Element in ${type} mode
+    const linkAuthenticationElement = stripeStore.stripeLinkElement ||
+      stripeStore.stripeElements.create('linkAuthentication');
+    const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
+    if (!linkAuthenticationElementContainer) {
+      // eslint-disable-next-line no-console
+      console.error('Cannot find container element for linkAuthenticationElement');
+      return;
+    }
+    linkAuthenticationElement.mount(linkAuthenticationElementContainer);
+    linkAuthenticationElement.on('change', event => {
+      stripeStore.stripeLinkEventData = event;
+      // run prefetch landed cost when address is changed
+      void stripeStorePrefetchLandedCost();
+    });
+    stripeStore.stripeLinkElement = linkAuthenticationElement;
+  }
+  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, { class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--link-authentication-component" })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "stripe": ["watchInitStripe"]
+  }; }
+  static get style() { return zonosLinkAuthenticationCss; }
+}, [2, "zonos-link-authentication", {
+    "titleText": [1, "title-text"],
+    "stripe": [32]
+  }, undefined, {
+    "stripe": ["watchInitStripe"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-link-authentication", "zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-link-authentication":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosLinkAuthentication);
+      }
+      break;
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ZonosLinkAuthentication as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-link-authentication2.js.map

package/dist/components/zonos-link-authentication2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-link-authentication2.js","mappings":";;;;AAAA,MAAM,0BAA0B,GAAG,mnCAAmnC;;MCsBzoC,uBAAuB;;;;;kBAMD,WAAW,CAAC,MAAM;;EAKnD,eAAe;IACb,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE;MAC/C,OAAO;KACR;;IAGD,MAAM,yBAAyB,GAC7B,WAAW,CAAC,iBAAiB;MAC7B,WAAW,CAAC,cAAc,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;IAE1D,MAAM,kCAAkC,GACtC,IAAI,CAAC,EAAE,CAAC,aAAa,CACnB,uCAAuC,CACxC,CAAC;IAEJ,IAAI,CAAC,kCAAkC,EAAE;;MAEvC,OAAO,CAAC,KAAK,CACX,6DAA6D,CAC9D,CAAC;MACF,OAAO;KACR;IAED,yBAAyB,CAAC,KAAK,CAAC,kCAAkC,CAAC,CAAC;IACpE,yBAAyB,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK;MAC1C,WAAW,CAAC,mBAAmB,GAAG,KAAK,CAAC;;MAExC,KAAK,6BAA6B,EAAE,CAAC;KACtC,CAAC,CAAC;IACH,WAAW,CAAC,iBAAiB,GAAG,yBAAyB,CAAC;GAC3D;EAED,gBAAgB;;IAEd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,MAAM;;IAEJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,4CAA4C,IACtD,kBAAY,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,IAClD,IAAI,CAAC,SAAS,CACJ,EACb,WAAK,KAAK,EAAC,sCAAsC,GAAO,CACnD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stripe/zonos-link-authentication/zonos-link-authentication.scss?tag=zonos-link-authentication&encapsulation=scoped","src/components/stripe/zonos-link-authentication/zonos-link-authentication.tsx"],"sourcesContent":[":host {\n  .zonos--title {\n    margin-bottom: $amino-space-16;\n  }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { Stripe } from '@stripe/stripe-js';\n\nimport {\n  stripeStore,\n  stripeStorePrefetchLandedCost,\n} from 'src/components/store/checkout/stripe';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is using stripe elements and stripe\n   * need to be able to inject iframe into this component\n   * **NOTE**: Prefer `shadow` when creating new component\n   * */\n  scoped: true,\n  styleUrl: 'zonos-link-authentication.scss',\n  tag: 'zonos-link-authentication',\n})\n/**\n * This component is a wrapper for the stripe authentication element that would render default style object\n */\nexport class ZonosLinkAuthentication {\n  /**\n   * The title text for the authentication element\n   */\n  @Prop() titleText!: string;\n\n  @State() stripe: Stripe | null = stripeStore.stripe;\n\n  @Element() el!: HTMLZonosLinkAuthenticationElement;\n\n  @Watch('stripe')\n  watchInitStripe() {\n    if (!this.stripe || !stripeStore.stripeElements) {\n      return;\n    }\n\n    // Create and mount the Authentication Element in ${type} mode\n    const linkAuthenticationElement =\n      stripeStore.stripeLinkElement ||\n      stripeStore.stripeElements.create('linkAuthentication');\n\n    const linkAuthenticationElementContainer =\n      this.el.querySelector<HTMLElement>(\n        '.zonos--link-authentication-component',\n      );\n\n    if (!linkAuthenticationElementContainer) {\n      // eslint-disable-next-line no-console\n      console.error(\n        'Cannot find container element for linkAuthenticationElement',\n      );\n      return;\n    }\n\n    linkAuthenticationElement.mount(linkAuthenticationElementContainer);\n    linkAuthenticationElement.on('change', event => {\n      stripeStore.stripeLinkEventData = event;\n      // run prefetch landed cost when address is changed\n      void stripeStorePrefetchLandedCost();\n    });\n    stripeStore.stripeLinkElement = linkAuthenticationElement;\n  }\n\n  componentDidLoad() {\n    // @Watch doesn't get trigger on initial load\n    this.watchInitStripe();\n  }\n\n  render() {\n    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here\n    return (\n      <Host class=\"zonos--link-authentication zonos--elements\">\n        <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n          {this.titleText}\n        </zonos-text>\n        <div class=\"zonos--link-authentication-component\"></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosLogo extends Components.ZonosLogo, HTMLElement {}
+export const ZonosLogo: {
+  prototype: ZonosLogo;
+  new (): ZonosLogo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-logo.js

@@ -0,0 +1,8 @@
+import { Z as ZonosLogo$1, d as defineCustomElement$1 } from './zonos-logo2.js';
+
+const ZonosLogo = ZonosLogo$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosLogo, defineCustomElement };
+
+//# sourceMappingURL=zonos-logo.js.map

package/dist/components/zonos-logo.js.map

@@ -0,0 +1 @@
+{"file":"zonos-logo.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-logo2.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h, Host, getAssetPath } from '@stencil/core/internal/client';
+import { c as classes } from './classes.js';
+
+const zonosLogoCss = ":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{display:-ms-inline-flexbox;display:inline-flex}:host img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
+
+const ZonosLogo = /*@__PURE__*/ proxyCustomElement(class ZonosLogo extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.theme = 'LIGHT';
+    this.width = 'auto';
+    this.class = '';
+  }
+  render() {
+    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: {
+        '--filter-color': filterColor,
+        '--width': this.width,
+      } }, h("img", { alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get style() { return zonosLogoCss; }
+}, [1, "zonos-logo", {
+    "theme": [1],
+    "width": [1],
+    "class": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-logo"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-logo":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosLogo);
+      }
+      break;
+  } });
+}
+
+export { ZonosLogo as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-logo2.js.map

package/dist/components/zonos-logo2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-logo2.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,qZAAqZ;;MCW7Z,SAAS;;;;;iBAIa,OAAO;iBAKhB,MAAM;iBAKN,EAAE;;EAE1B,MAAM;IACJ,MAAM,WAAW,GACf,IAAI,CAAC,KAAK,KAAK,MAAM;QACjB,0FAA0F;QAC1F,6FAA6F,CAAC;IAEpG,QACE,EAAC,IAAI,IACH,KAAK,EAAE,OAAO,CAAC,CAAC,6BAA6B,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAC3D,KAAK,EAAE;QACL,gBAAgB,EAAE,WAAW;QAC7B,SAAS,EAAE,IAAI,CAAC,KAAK;OACtB,IAED,WAAK,GAAG,EAAC,YAAY,EAAC,GAAG,EAAE,YAAY,CAAC,wBAAwB,CAAC,GAAI,CAChE,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/zonos-logo/zonos-logo.scss?tag=zonos-logo&encapsulation=shadow","src/components/common/zonos-logo/zonos-logo.tsx"],"sourcesContent":["$filter-color: var(--filter-color);\n$width: var(--width);\n\n:host {\n  display: inline-flex;\n  img {\n    filter: $filter-color;\n    width: $width;\n  }\n}\n","import { Component, getAssetPath, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { ElementsUiTheme } from 'src/types';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-logo.scss',\n  tag: 'zonos-logo',\n})\nexport class ZonosLogo {\n  /**\n   * Theme to change the color of the logo\n   */\n  @Prop() theme: ElementsUiTheme = 'LIGHT';\n\n  /**\n   * The width of the logo\n   */\n  @Prop() width: string = 'auto';\n\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n\n  render() {\n    const filterColor =\n      this.theme === 'DARK'\n        ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'\n        : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';\n\n    return (\n      <Host\n        class={classes(['zonos--elements zonos--logo', this.class])}\n        style={{\n          '--filter-color': filterColor,\n          '--width': this.width,\n        }}\n      >\n        <img alt=\"Zonos Logo\" src={getAssetPath('./assets/ZonosLogo.png')} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosNotification extends Components.ZonosNotification, HTMLElement {}
+export const ZonosNotification: {
+  prototype: ZonosNotification;
+  new (): ZonosNotification;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-notification.js

@@ -0,0 +1,8 @@
+import { Z as ZonosNotification$1, d as defineCustomElement$1 } from './zonos-notification2.js';
+
+const ZonosNotification = ZonosNotification$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosNotification, defineCustomElement };
+
+//# sourceMappingURL=zonos-notification.js.map

package/dist/components/zonos-notification.js.map

@@ -0,0 +1 @@
+{"file":"zonos-notification.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-notification2.js

@@ -0,0 +1,92 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classes } from './classes.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const zonosNotificationCss = ":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{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:var(--amino-space-24);gap:var(--amino-space-8);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:var(--amino-space-8);border-radius:var(--border-radius, var(--amino-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(--amino-green-700)}:host .zonos--notification-item.error{background-color:var(--amino-red-700)}:host .zonos--notification-item.warning{background-color:var(--amino-orange-700)}";
+
+const ZonosNotification = /*@__PURE__*/ proxyCustomElement(class ZonosNotification extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.class = '';
+    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, { class: classes(['zonos--elements zonos--notification', this.class]) }, h("div", { 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", { color: "gray-0" }, notification.message)));
+    }))));
+  }
+  static get style() { return zonosNotificationCss; }
+}, [1, "zonos-notification", {
+    "class": [1],
+    "notificationArray": [32],
+    "showNotification": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-notification", "zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-notification":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosNotification);
+      }
+      break;
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ZonosNotification as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-notification2.js.map

package/dist/components/zonos-notification2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-notification2.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,0yCAA0yC;;MC4B1zC,iBAAiB;;;;;iBAIZ,EAAE;6BAE+B,EAAE;;;;;EAMnD,MAAM,gBAAgB,CAAC,YAA8B;;IAEnD,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAC9D,MAAM,gBAAgB,mCACjB,YAAY,KACf,EAAE,EACF,OAAO,EAAE,YAAY,CAAC,OAAO,IAAI,IAAI,EACrC,eAAe,EAAE,EAAE,EACnB,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,SAAS,GACrC,CAAC;IACF,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC;MACT,IAAI,CAAC,qBAAqB,CAAC;QACzB,EAAE;QACF,eAAe,EAAE,MAAM;OACxB,CAAC,CAAC;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,UAAU,CAAC;MACT,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;KAC7B,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;GAC9B;EAEO,qBAAqB,CAAC,EAC5B,EAAE,EACF,eAAe,GAIhB;IACC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,YAAY;MAC9D,IAAI,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE;QAC1B,uCACK,YAAY,KACf,eAAe,IACf;OACH;MACD,OAAO,YAAY,CAAC;KACrB,CAAC,CAAC;GACJ;;;;EAKO,kBAAkB,CAAC,EAAU;;IAEnC,IAAI,CAAC,qBAAqB,CAAC;MACzB,EAAE;MACF,eAAe,EAAE,EAAE;KACpB,CAAC,CAAC;IAEH,UAAU,CAAC;MACT,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CACpD,YAAY,IAAI,YAAY,CAAC,EAAE,KAAK,EAAE,CACvC,CAAC;KACH,EAAE,GAAG,CAAC,CAAC;GACT;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,OAAO,CAAC,CAAC,qCAAqC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAEnE,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,YAAY;MACtC,QACE,0BACc,MAAM,EAClB,KAAK,EAAE,OAAO,CAAC;UACb,0BAA0B;UAC1B,YAAY,CAAC,IAAI;UACjB,YAAY,CAAC,eAAe;SAC7B,CAAC,EACF,GAAG,EAAE,YAAY,CAAC,EAAE,EACpB,OAAO,EAAE;UACP,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;SAC1C,IAED,kBAAY,KAAK,EAAC,QAAQ,IAAE,YAAY,CAAC,OAAO,CAAc,CAC1D,EACN;KACH,CAAC,CACE,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/common/zonos-notification/zonos-notification.scss?tag=zonos-notification&encapsulation=shadow","src/components/common/zonos-notification/zonos-notification.tsx"],"sourcesContent":["$border-radius: var(--border-radius, $amino-radius-6);\n\n:host {\n  display: flex;\n  justify-content: center;\n  .zonos--notification-items {\n    position: fixed;\n    z-index: 9999999;\n    bottom: $amino-space-24;\n    gap: $amino-space-8;\n    display: inline-flex;\n    flex-direction: column;\n  }\n  .zonos--notification-item {\n    cursor: pointer;\n    transition: all 0.3s ease;\n    padding: $amino-space-8;\n    border-radius: $border-radius;\n    // fade in animation\n    opacity: 0;\n    flex-shrink: 0.0001;\n    transform: translateY(100%);\n    & + & {\n      margin-top: 8px;\n    }\n    &.show {\n      opacity: 1;\n      transform: translateY(0);\n      flex-grow: 1000;\n    }\n    &.success {\n      background-color: $amino-green-700;\n    }\n    &.error {\n      background-color: $amino-red-700;\n    }\n    &.warning {\n      background-color: $amino-orange-700;\n    }\n  }\n}\n","import { Component, h, Host, Method, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\n\nexport type NotificationInit = {\n  message: string;\n  /**\n   * Time in milliseconds\n   * @default 4000\n   */\n  timeout?: number;\n  /**\n   * Type of notification\n   * @default 'success'\n   */\n  type?: 'error' | 'success' | 'warning';\n};\n\ntype NotificationItem = NotificationInit & {\n  id: string;\n  transitionClass: 'show' | '';\n};\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-notification.scss',\n  tag: 'zonos-notification',\n})\nexport class ZonosNotification {\n  /**\n   * Custom class to add to the notification\n   */\n  @Prop() class = '';\n\n  @State() notificationArray: NotificationItem[] = [];\n\n  /**\n   * Show a notification\n   */\n  @Method()\n  async showNotification(notification: NotificationInit) {\n    // random generate id\n    const id = `id-${Math.random().toString(36).substring(2, 9)}`;\n    const notificationItem: NotificationItem = {\n      ...notification,\n      id,\n      timeout: notification.timeout || 5000,\n      transitionClass: '',\n      type: notification.type || 'success',\n    };\n    this.notificationArray = [...this.notificationArray, notificationItem];\n    setTimeout(() => {\n      this.updateTransitionClass({\n        id,\n        transitionClass: 'show',\n      });\n    }, 50);\n\n    setTimeout(() => {\n      this.removeNotification(id);\n    }, notificationItem.timeout);\n  }\n\n  private updateTransitionClass({\n    id,\n    transitionClass,\n  }: {\n    id: string;\n    transitionClass: 'show' | '';\n  }) {\n    this.notificationArray = this.notificationArray.map(notification => {\n      if (notification.id === id) {\n        return {\n          ...notification,\n          transitionClass,\n        };\n      }\n      return notification;\n    });\n  }\n\n  /**\n   * Remove a notification\n   */\n  private removeNotification(id: string) {\n    // add hide class before removing the item 100ms to trigger animation\n    this.updateTransitionClass({\n      id,\n      transitionClass: '',\n    });\n\n    setTimeout(() => {\n      this.notificationArray = this.notificationArray.filter(\n        notification => notification.id !== id,\n      );\n    }, 300);\n  }\n\n  render() {\n    return (\n      <Host\n        class={classes(['zonos--elements zonos--notification', this.class])}\n      >\n        <div class=\"zonos--notification-items\">\n          {this.notificationArray.map(notification => {\n            return (\n              <div\n                aria-hidden=\"true\"\n                class={classes([\n                  'zonos--notification-item',\n                  notification.type,\n                  notification.transitionClass,\n                ])}\n                key={notification.id}\n                onClick={() => {\n                  this.removeNotification(notification.id);\n                }}\n              >\n                <zonos-text color=\"gray-0\">{notification.message}</zonos-text>\n              </div>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosPayment extends Components.ZonosPayment, HTMLElement {}
+export const ZonosPayment: {
+  prototype: ZonosPayment;
+  new (): ZonosPayment;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-payment.js

@@ -0,0 +1,8 @@
+import { Z as ZonosPayment$1, d as defineCustomElement$1 } from './zonos-payment2.js';
+
+const ZonosPayment = ZonosPayment$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosPayment, defineCustomElement };
+
+//# sourceMappingURL=zonos-payment.js.map

package/dist/components/zonos-payment.js.map

@@ -0,0 +1 @@
+{"file":"zonos-payment.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-payment2.js

@@ -0,0 +1,79 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as stripeStore } from './stripe.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const zonosPaymentCss = ".sc-zonos-payment-h{font-family:Inter;display:block}.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:var(--amino-space-16)}";
+
+const ZonosPayment = /*@__PURE__*/ proxyCustomElement(class ZonosPayment extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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) {
+      // eslint-disable-next-line no-console
+      console.error('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, { class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { class: "zonos--payment-component" })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "stripeElements": ["watchInitStripe"],
+    "stripe": ["watchInitStripe"]
+  }; }
+  static get style() { return zonosPaymentCss; }
+}, [2, "zonos-payment", {
+    "titleText": [1, "title-text"],
+    "stripe": [32],
+    "stripeElements": [32]
+  }, undefined, {
+    "stripeElements": ["watchInitStripe"],
+    "stripe": ["watchInitStripe"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-payment", "zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-payment":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosPayment);
+      }
+      break;
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ZonosPayment as Z, defineCustomElement as d };
+
+//# sourceMappingURL=zonos-payment2.js.map

package/dist/components/zonos-payment2.js.map

@@ -0,0 +1 @@
+{"file":"zonos-payment2.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,2wBAA2wB;;MCmBtxB,YAAY;;;;;kBAMU,WAAW,CAAC,MAAM;0BAEF,WAAW,CAAC,cAAc;;EAM3E,eAAe;IACb,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACxB,OAAO;KACR;;IAGD,MAAM,cAAc,GAClB,WAAW,CAAC,oBAAoB;MAChC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE;QACpC,MAAM,EAAE,MAAM;OACf,CAAC,CAAC;IAEL,MAAM,uBAAuB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CACnD,2BAA2B,CAC5B,CAAC;IAEF,IAAI,CAAC,uBAAuB,EAAE;;MAE5B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;MAClE,OAAO;KACR;IAED,cAAc,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK;MAC/B,WAAW,CAAC,sBAAsB,GAAG,KAAK,CAAC;KAC5C,CAAC,CAAC;IAEH,WAAW,CAAC,oBAAoB,GAAG,cAAc,CAAC;GACnD;EAED,gBAAgB;;IAEd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,MAAM;;IAEJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,gCAAgC,IACzC,IAAI,CAAC,SAAS,KACb,kBAAY,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,IAClD,IAAI,CAAC,SAAS,CACJ,CACd,EACD,WAAK,KAAK,EAAC,0BAA0B,GAAO,CACvC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stripe/zonos-payment/zonos-payment.scss?tag=zonos-payment&encapsulation=scoped","src/components/stripe/zonos-payment/zonos-payment.tsx"],"sourcesContent":[":host {\n  .zonos--title {\n    margin-bottom: $amino-space-16;\n  }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { Stripe, StripeElements } from '@stripe/stripe-js';\n\nimport { stripeStore } from 'src/components/store/checkout/stripe';\n\n@Component({\n  /**\n   * Use `scope` here just because this component is using stripe elements and stripe\n   * need to be able to inject iframe into this component\n   * **NOTE**: Prefer `shadow` when creating new component\n   * */\n  scoped: true,\n  styleUrl: 'zonos-payment.scss',\n  tag: 'zonos-payment',\n})\n/**\n * This component is a wrapper for the stripe authentication element that would render default style object\n */\nexport class ZonosPayment {\n  /**\n   * The title text for the authentication element\n   */\n  @Prop() titleText?: string;\n\n  @State() stripe: Stripe | null = stripeStore.stripe;\n\n  @State() stripeElements: StripeElements | null = stripeStore.stripeElements;\n\n  @Element() el!: HTMLZonosPaymentElement;\n\n  @Watch('stripeElements')\n  @Watch('stripe')\n  watchInitStripe() {\n    if (!this.stripeElements) {\n      return;\n    }\n\n    // Create and mount the Authentication Element in ${type} mode\n    const paymentElement =\n      stripeStore.stripePaymentElement ||\n      this.stripeElements.create('payment', {\n        layout: 'tabs',\n      });\n\n    const paymentElementContainer = this.el.querySelector<HTMLElement>(\n      '.zonos--payment-component',\n    );\n\n    if (!paymentElementContainer) {\n      // eslint-disable-next-line no-console\n      console.error('Cannot find container element for paymentElement');\n      return;\n    }\n\n    paymentElement.mount(paymentElementContainer);\n    paymentElement.on('change', event => {\n      stripeStore.stripePaymentEventData = event;\n    });\n\n    stripeStore.stripePaymentElement = paymentElement;\n  }\n\n  componentDidLoad() {\n    // @Watch doesn't get trigger on initial load\n    this.watchInitStripe();\n  }\n\n  render() {\n    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here\n    return (\n      <Host class=\"zonos--payment zonos--elements\">\n        {this.titleText && (\n          <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n            {this.titleText}\n          </zonos-text>\n        )}\n        <div class=\"zonos--payment-component\"></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosReview extends Components.ZonosReview, HTMLElement {}
+export const ZonosReview: {
+  prototype: ZonosReview;
+  new (): ZonosReview;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-review.js

@@ -0,0 +1,8 @@
+import { Z as ZonosReview$1, d as defineCustomElement$1 } from './zonos-review2.js';
+
+const ZonosReview = ZonosReview$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosReview, defineCustomElement };
+
+//# sourceMappingURL=zonos-review.js.map

package/dist/components/zonos-review.js.map

@@ -0,0 +1 @@
+{"file":"zonos-review.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/zonos-review2.js

@@ -0,0 +1,98 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as cartStore } from './stripe.js';
+import { t as translate } from './localization.js';
+import { z as zonosStore } from './zonosStore.js';
+import { c as classes } from './classes.js';
+import { f as formatCurrency } from './formatCurrency.js';
+import { d as defineCustomElement$2 } from './zonos-icon2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const checkoutBreakpoint = 890;
+const isCheckoutMobile = (isMobile) => {
+  return isMobile || window.innerWidth < checkoutBreakpoint;
+};
+
+const ChevronDownIcon = `<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+
+const ChevronUpIcon = `<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+
+const zonosReviewCss = ":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--total-pay{margin:var(--amino-space-16) 0 var(--amino-space-32)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8)}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";
+
+const ZonosReview = /*@__PURE__*/ proxyCustomElement(class ZonosReview extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.mobile = false;
+    this.collapsed = false;
+    this.isMobile = false;
+  }
+  handleWindowResize() {
+    this.isMobile = isCheckoutMobile(this.mobile);
+  }
+  componentWillLoad() {
+    this.isMobile = isCheckoutMobile(this.mobile);
+  }
+  render() {
+    const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
+    const totalTextType = this.isMobile
+      ? 'boldSubheader'
+      : 'secondaryPageHeader';
+    const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';
+    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
+    const renderCollapseIcon = () => {
+      // only display the collapse icon if the component is being rendered with mobile styles
+      if (!this.isMobile) {
+        return null;
+      }
+      if (!this.collapsed) {
+        return (h("zonos-icon", { color: "gray-1200", content: ChevronDownIcon }));
+      }
+      return (h("zonos-icon", { color: "gray-1200", content: ChevronUpIcon }));
+    };
+    return (h(Host, { class: classes([
+        'zonos--review zonos--elements',
+        this.isMobile && 'mobile',
+      ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { color: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
+      amount: 
+      // show total without taxes when step is shipping, show total with taxes when step is payment
+      cartStore.step === 'shipping'
+        ? totalWithoutTaxes
+        : cartStore.total,
+      currency: cartStore.currency,
+    })))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get style() { return zonosReviewCss; }
+}, [1, "zonos-review", {
+    "mobile": [4],
+    "collapsed": [4],
+    "isMobile": [32]
+  }, [[9, "resize", "handleWindowResize"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["zonos-review", "zonos-icon", "zonos-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "zonos-review":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ZonosReview);
+      }
+      break;
+    case "zonos-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "zonos-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ZonosReview as Z, defineCustomElement as d, isCheckoutMobile as i };
+
+//# sourceMappingURL=zonos-review2.js.map