@zonos/elements 1.3.218 → 1.3.219

package/dist/collection/components/checkout/zonos-collect/zonos-collect-footer/assets/zonosWordmark.svg

@@ -0,0 +1,7 @@
+<svg width="43" height="10" viewBox="0 0 43 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.35896 0.0640869H0.30768C0.166068 0.0640869 0.0512695 0.178886 0.0512695 0.320497V1.85896C0.0512695 2.00057 0.166068 2.11537 0.30768 2.11537H4.44439C4.54964 2.11537 4.61005 2.2352 4.54745 2.31982L0.151823 8.2615C0.0865163 8.34978 0.0512695 8.45669 0.0512695 8.56649V9.67947C0.0512695 9.82108 0.166068 9.93588 0.30768 9.93588H7.35896C7.50057 9.93588 7.61537 9.82108 7.61537 9.67947V8.14101C7.61537 7.9994 7.50057 7.8846 7.35896 7.8846H3.22226C3.117 7.8846 3.05659 7.76477 3.11919 7.68015L7.51482 1.73847C7.58013 1.65019 7.61537 1.54328 7.61537 1.43348V0.320497C7.61537 0.178886 7.50057 0.0640869 7.35896 0.0640869Z" fill="var(--zonos-elements-gray-800)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.718 0C10.1602 0 8.89746 1.26279 8.89746 2.82051V7.17949C8.89746 8.73721 10.1602 10 11.718 10H13.6411C15.1988 10 16.4616 8.73721 16.4616 7.17949V2.82051C16.4616 1.26279 15.1988 0 13.6411 0H11.718ZM11.718 2.05128C11.2931 2.05128 10.9487 2.39568 10.9487 2.82051V7.17949C10.9487 7.60432 11.2931 7.94872 11.718 7.94872H13.6411C14.0659 7.94872 14.4103 7.60432 14.4103 7.17949V5V2.82051C14.4103 2.39568 14.0659 2.05128 13.6411 2.05128H11.718Z" fill="var(--zonos-elements-gray-800)"/>
+<path d="M17.7437 0.436316V9.71132C17.7437 9.85293 17.8585 9.96773 18.0001 9.96773H19.5385C19.6801 9.96773 19.7949 9.85293 19.7949 9.71132V3.74801C19.7949 3.44829 19.969 3.17587 20.241 3.04996L22.1641 2.15964C22.6739 1.92363 23.2565 2.29592 23.2565 2.85769V9.71132C23.2565 9.85293 23.3713 9.96773 23.5129 9.96773H25.0513C25.193 9.96773 25.3078 9.85293 25.3078 9.71132V2.85595C25.3078 0.79631 23.1718 -0.568775 21.3027 0.296257L19.9742 0.911055C19.8685 0.959946 19.7432 0.931536 19.669 0.84187L19.2748 0.365697C19.1773 0.248019 19.0325 0.179905 18.8797 0.179905H18.0001C17.8585 0.179905 17.7437 0.294704 17.7437 0.436316Z" fill="var(--zonos-elements-gray-800)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.4104 0C27.8526 0 26.5898 1.26279 26.5898 2.82051V7.17949C26.5898 8.73721 27.8526 10 29.4104 10H31.3334C32.8912 10 34.1539 8.73721 34.1539 7.17949V2.82051C34.1539 1.26279 32.8912 0 31.3334 0H29.4104ZM29.4104 2.05128C28.9855 2.05128 28.6411 2.39568 28.6411 2.82051V7.17949C28.6411 7.60432 28.9855 7.94872 29.4104 7.94872H31.3334C31.7583 7.94872 32.1027 7.60432 32.1027 7.17949V2.82051C32.1027 2.39568 31.7583 2.05128 31.3334 2.05128H29.4104Z" fill="var(--zonos-elements-gray-800)"/>
+<path d="M38.2085 0.0640869H40.3889C41.8309 0.0640869 42.9999 1.23306 42.9999 2.67506C42.9999 2.79477 42.9108 2.89574 42.792 2.91059L41.1732 3.11293C41.054 3.12784 40.9486 3.03485 40.9486 2.91466C40.9486 2.47322 40.5908 2.11537 40.1493 2.11537H38.3397C37.8688 2.11537 37.4871 2.49712 37.4871 2.96803C37.4871 3.3685 37.7658 3.71501 38.1569 3.80087L40.7916 4.37922C42.0811 4.66229 42.9999 5.80462 42.9999 7.12486C42.9999 8.67735 41.7414 9.93588 40.1889 9.93588H38.0468C36.6048 9.93588 35.4358 8.76691 35.4358 7.32491C35.4358 7.2052 35.5249 7.10423 35.6437 7.08938L37.2625 6.88703C37.3817 6.87213 37.4871 6.96512 37.4871 7.08531C37.4871 7.52675 37.8449 7.8846 38.2864 7.8846H40.1176C40.5765 7.8846 40.9486 7.51252 40.9486 7.05354C40.9486 6.67478 40.6925 6.34394 40.3258 6.24901L37.5136 5.52093C36.2902 5.20422 35.4358 4.10042 35.4358 2.83676C35.4358 1.30545 36.6772 0.0640869 38.2085 0.0640869Z" fill="var(--zonos-elements-gray-700)"/>
+</svg>

package/dist/collection/components/checkout/zonos-collect/zonos-collect-footer/zonos-collect-footer.css

@@ -0,0 +1,152 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  position: absolute;
+  bottom: 0;
+  left: 32px;
+  right: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+}
+:host .zonos--collect-footer {
+  gap: 16px;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+  padding-left: 0;
+  align-items: center;
+  width: 100%;
+}
+:host .zonos--collect-footer .zonos--collect-footer-icon-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+:host .zonos--collect-footer .zonos--collect-footer-icon-wrapper .zonos--collect-footer-logo {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
+:host .zonos--collect-footer .zonos--collect-footer-icon-wrapper .zonos--collect-footer-logo a {
+  line-height: 0;
+}
+:host .zonos--collect-footer .zonos--collect-footer-icon-wrapper a {
+  text-decoration: none;
+}
+:host .zonos--collect-footer zonos-button button.outline {
+  outline: 1px solid var(--zonos-elements-gray-800);
+}
+:host .zonos--collect-footer .zonos--collect-locale-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
+@media (max-width: 400px) {
+  :host .zonos--collect-footer .zonos--collect-locale-wrapper {
+    gap: 4px;
+  }
+}
+:host .zonos--collect-footer .zonos--collect-language-dialog {
+  position: absolute;
+  bottom: 36px;
+  left: var(--language-dialog-left);
+  background: var(--zonos-elements-surface-color);
+  box-shadow: var(--zonos-elements-v3-shadow-xl);
+  border-radius: var(--zonos-elements-radius-12);
+  width: 360px;
+  max-width: 100vw;
+  max-height: 500px;
+  z-index: 2147483011;
+  overflow: auto;
+  transform: scale(0);
+  transform-origin: bottom left;
+  opacity: 0;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+  overscroll-behavior: contain;
+}
+:host .zonos--collect-footer .zonos--collect-language-dialog::-webkit-scrollbar {
+  width: 10px;
+}
+:host .zonos--collect-footer .zonos--collect-language-dialog::-webkit-scrollbar-track {
+  background: var(--zonos-elements-gray-50);
+}
+:host .zonos--collect-footer .zonos--collect-language-dialog::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+:host .zonos--collect-footer .zonos--collect-language-dialog::-webkit-scrollbar-thumb:hover {
+  background: #d6d6d6;
+}
+:host .zonos--collect-footer .zonos--collect-language-dialog::-webkit-scrollbar-track {
+  border-top-right-radius: var(--zonos-elements-radius-12);
+  border-bottom-right-radius: var(--zonos-elements-radius-12);
+}
+:host .zonos--collect-footer .zonos--collect-language-dialog.zonos--collect-language-dialog-open {
+  opacity: 1;
+  transform: scale(1);
+}
+:host .dot {
+  display: inline-flex;
+  background: var(--zonos-elements-gray-400);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+:host(.mobile),
+:host(.tablet) {
+  background-color: var(--zonos-elements-gray-0);
+  width: 100%;
+  position: sticky;
+  bottom: 0;
+}
+
+:host(.tablet) .zonos--collect-footer {
+  width: 100%;
+  max-width: 800px;
+  justify-content: space-between;
+  display: flex;
+}
+
+:host(.mobile) .zonos--collect-locale-wrapper {
+  display: none;
+}
+:host(.mobile) .zonos--collect-footer {
+  justify-content: center;
+}

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

@@ -0,0 +1,164 @@
+import { h, Host, } from "@stencil/core";
+import { localizationStore } from "../../../store/hello/localization";
+import { isCollectMobile, isCollectTablet, } from "../../../utils/checkout/isCollectMobileTablet";
+import { classes } from "../../../utils/classes";
+import { languages } from "../../../../types/ILanguage";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import Globe from "./assets/globe.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ZonosWordmark from "./assets/zonosWordmark.svg";
+export class ZonosCollectFooter {
+    constructor() {
+        /**
+         * Override mobile mode
+         */
+        this.mobile = false;
+        /**
+         * Override tablet mode
+         */
+        this.tablet = false;
+        this.showLanguageDialog = false;
+        this.isMobile = false;
+        this.isTablet = false;
+    }
+    handleGlobalClick(e) {
+        if (!this.el.contains(e.target) && this.showLanguageDialog) {
+            this.showLanguageDialog = false;
+        }
+    }
+    toggleLanguageDialog() {
+        this.showLanguageDialog = !this.showLanguageDialog;
+    }
+    handleMobileChange() {
+        this.isMobile = isCollectMobile(this.mobile);
+    }
+    handleTabletChange() {
+        this.isTablet = isCollectTablet(this.tablet);
+    }
+    componentWillLoad() {
+        this.isMobile = isCollectMobile(this.mobile);
+        this.isTablet = isCollectTablet(this.tablet);
+    }
+    render() {
+        var _a;
+        const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
+        // reverse color when on desktop. With the coversheet backdrop, the color should be white
+        const colorDesktop = 'gray-1000';
+        return (h(Host, { key: 'f8415c3fa7cf1e02b956ee91d5c2b8c92aba83f0', class: classes([
+                'zonos--elements',
+                this.isMobile && 'mobile',
+                this.isTablet && 'tablet',
+            ]) }, h("div", { key: 'ba5a7bd33565ec92bbde5135da011e833e1b5f54', class: "zonos--collect-footer" }, h("div", { key: 'ba2523ad59a5308317c2127f597116bf13a5bf5c', class: "zonos--collect-locale-wrapper" }, h("zonos-button", { key: '01cc5e41f2c00fb797f67a7e5187cc614974b381', buttonColor: colorDesktop, class: "zonos--collect-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: '577572370a3364384054451a935bbcfe29681932', class: classes([
+                'zonos--collect-language-dialog',
+                this.showLanguageDialog &&
+                    'zonos--collect-language-dialog-open',
+            ]) }, h("zonos-language-select", { key: 'ab7ad7f5ac46b8b718ed658e003ea9c54fc0e509', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '13a5458f90a1f8899ba772a2dd8d4c9ed3b93bbe', class: "zonos--collect-footer-icon-wrapper" }, h("div", { key: 'aa0e23159a9a2ed22c7809dcf55a4be24114f8a4', class: "zonos--collect-footer-logo" }, h("zonos-text", { key: '33cb521cfc71be6f909d1457b792d515b80f1e04', textColor: colorDesktop }, "Powered by"), h("a", { key: '75dc6b0a319d1dd017f0e108975b7cfabe4d30fb', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '8a8628f4258ea36b86df16b8ed0139c13e04a67e', autoHeight: true, content: ZonosWordmark, size: 42 }))), h("div", { key: 'a24bc9f48cd16e8acd668fe23ad3b9427dd1b4ba', class: "dot" }), h("a", { key: '32d1c85120322d79fac8ed449cceeea39e065bba', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'bb3f04f0ebe79e03d1d7a70978acafa7ce7069cd', textColor: colorDesktop }, "Privacy policy"))))));
+    }
+    static get is() { return "zonos-collect-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-collect-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-collect-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override mobile mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tablet": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override tablet mode"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tablet",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dataTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiTheme",
+                    "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\" | undefined",
+                    "references": {
+                        "ElementsUiTheme": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.internal.types",
+                            "id": "src/types/generated/graphql.internal.types.ts::ElementsUiTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme to change the color of the logo"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "data-theme",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showLanguageDialog": {},
+            "isMobile": {},
+            "isTablet": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "mobile",
+                "methodName": "handleMobileChange"
+            }, {
+                "propName": "tablet",
+                "methodName": "handleTabletChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleGlobalClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/checkout/zonos-collect/zonos-collect-order-details/assets/ChevronDownIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://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>

package/dist/collection/components/checkout/zonos-collect/zonos-collect-order-details/assets/ChevronUpIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://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>

package/dist/collection/components/checkout/zonos-collect/zonos-collect-order-details/zonos-collect-order-details.css

@@ -0,0 +1,109 @@
+:host {
+  font-family: var(--zonos--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--zonos--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  height: 100%;
+}
+:host * {
+  overscroll-behavior: contain;
+}
+:host *::-webkit-scrollbar {
+  width: 10px;
+}
+:host *::-webkit-scrollbar-track {
+  background: var(--zonos-elements-gray-50);
+}
+:host *::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+:host *::-webkit-scrollbar-thumb:hover {
+  background: #d6d6d6;
+}
+:host .zonos--wrapper {
+  overflow: auto;
+  background-color: var(--zonos-elements-gray-50);
+  border-radius: 16px;
+  height: 100%;
+  min-height: 56px;
+}
+:host .zonos--order-details-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  appearance: none;
+  background-color: var(--zonos-elements-gray-50);
+  border: none;
+  display: flex;
+  padding: 16px 16px 0 16px;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+:host .zonos--order-details-header:focus-visible {
+  outline: none;
+}
+:host .zonos--order-details-wrapper {
+  position: relative;
+  padding: 0 16px 16px 16px;
+}
+:host .zonos--collect-order-details-content {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+:host .zonos--collect-order-info {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+:host .zonos--collect-order-info .zonos--collect-order-details-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+:host .zonos--collect-order-info .zonos--collect-order-details-row > * {
+  flex: 1 1 150px;
+}
+:host .zonos--collect-order-info .zonos--collect-order-details-column {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+:host .zonos--collect-order-info .zonos--collect-order-shipping-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}

package/dist/collection/components/checkout/zonos-collect/zonos-collect-order-details/zonos-collect-order-details.js

@@ -0,0 +1,194 @@
+import { h, Host, } from "@stencil/core";
+import { collectStore } from "../../../store/checkout/collect";
+import { translate } from "../../../store/translationStore";
+import { isCheckoutMobile } from "../../../utils/checkout/isCheckoutMobile";
+import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
+import { classes } from "../../../utils/classes";
+/** These assets need to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ChevronDownIcon from "./assets/ChevronDownIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
+export class ZonosCollectOrderDetails {
+    constructor() {
+        /**
+         * Whether or not the component is being rendered with mobile styles
+         */
+        this.mobile = true;
+        /**
+         * The landed cost id that is used to fetch the shipping address
+         */
+        this.landedCostId = '';
+        this.isMobile = false;
+        this.collapseState = this.collapsed;
+    }
+    handleCollapseChangeFromProp(collapsed) {
+        this.collapseState = collapsed;
+    }
+    handleCollapseChange(collapsed) {
+        this.collapseClicked.emit(collapsed);
+    }
+    handleWindowResize() {
+        this.isMobile = isCheckoutMobile(this.mobile);
+    }
+    componentWillLoad() {
+        this.handleWindowResize();
+    }
+    renderShippingAddress() {
+        if (collectStore.isFetchingShippingInfo) {
+            return (h("div", { class: "zonos--collect-order-details-column" }, h("zonos-text", { type: "smallHeader" }, h("zonos-skeleton", { skeletonWidth: "99px" })), h("div", { class: "zonos--collect-order-shipping-info" }, h("zonos-skeleton", { skeletonWidth: "152px" }), h("zonos-h-stack", { spacing: 8 }, h("zonos-skeleton", { skeletonWidth: "75px" }), h("zonos-skeleton", { skeletonWidth: "75px" })), h("zonos-skeleton", { skeletonWidth: "50px" }))));
+        }
+        const shippingAddress = collectStore.shippingAddress;
+        if (!shippingAddress) {
+            return null;
+        }
+        return (h("div", { class: "zonos--collect-order-details-column" }, h("zonos-text", { type: "smallHeader" }, translate('Shipping address')), h("div", { class: "zonos--collect-order-shipping-info" }, [
+            [shippingAddress.location.line1, shippingAddress.location.line2]
+                .filter(Boolean)
+                .join(' '),
+            [
+                shippingAddress.location.locality,
+                shippingAddress.location.administrativeAreaCode,
+                shippingAddress.location.postalCode,
+            ]
+                .filter(Boolean)
+                .join(', '),
+            shippingAddress.location.countryCode,
+        ].map(item => (h("zonos-text", null, item))))));
+    }
+    render() {
+        const renderCollapseIcon = () => {
+            if (this.collapseState) {
+                return (h("zonos-icon", { "aria-label": "Collapse expanded section", content: ChevronDownIcon, iconColor: "gray-1200" }));
+            }
+            return (h("zonos-icon", { "aria-label": "Expand collapsed section", content: ChevronUpIcon, iconColor: "gray-1200" }));
+        };
+        return (h(Host, { class: classes([
+                'zonos--collect-order-details zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("div", { class: "zonos--wrapper" }, h("button", { class: "zonos--order-details-header", onClick: () => {
+                this.collapseState = !this.collapseState;
+            }, type: "button" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Order details')), renderCollapseIcon()), h("div", { class: "zonos--order-details-wrapper" }, h("zonos-collapse", { collapsed: this.collapseState }, h("div", { class: "zonos--collect-order-details-content" }, h("zonos-collect-cart-items", null), h("div", { class: "zonos--collect-order-info" }, h("div", { class: "zonos--collect-order-details-row" }, collectStore.amountTotalPaid !== null && (h("div", { class: "zonos--collect-order-details-column" }, h("zonos-text", { type: "smallHeader" }, translate('Total paid')), h("zonos-text", null, renderCheckoutCurrency({
+            amount: collectStore.amountTotalPaid || 0,
+            isForeign: true,
+        })))), collectStore.originCompanyName && (h("div", { class: "zonos--collect-order-details-column" }, h("zonos-text", { type: "smallHeader" }, translate('Ordered from')), h("zonos-text", null, collectStore.originCompanyName || '')))), this.renderShippingAddress())))))));
+    }
+    static get is() { return "zonos-collect-order-details"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-collect-order-details.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-collect-order-details.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "mobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the component is being rendered with mobile styles"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mobile",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show the collapse icon\nThis is controled from the collapsed state of the zonos-collapse component\nto show the collapse icon"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "collapsed",
+                "reflect": false
+            },
+            "landedCostId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The landed cost id that is used to fetch the shipping address"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "landed-cost-id",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {},
+            "collapseState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "collapseClicked",
+                "name": "collapseClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the collapsed state of the zonos-collapse component"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "collapsed",
+                "methodName": "handleCollapseChangeFromProp"
+            }, {
+                "propName": "collapseState",
+                "methodName": "handleCollapseChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/checkout/zonos-collect/zonos-collect-payment/assets/CheckmarkLineIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M15.342 10.21a.75.75 0 0 0-1.184-.92l-2.978 3.829-1.4-1.4a.75.75 0 1 0-1.06 1.061l1.8 1.8a1 1 0 0 0 1.496-.093l3.326-4.277Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>

package/dist/collection/components/checkout/zonos-collect/zonos-collect-payment/assets/RemoveLineIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M14.475 10.586a.75.75 0 1 0-1.06-1.06L12 10.938l-1.414-1.414a.75.75 0 0 0-1.06 1.06L10.938 12l-1.414 1.414a.75.75 0 1 0 1.06 1.06L12 13.062l1.414 1.414a.75.75 0 0 0 1.06-1.06L13.062 12l1.414-1.414Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>