@zonos/elements 1.3.217 → 1.3.219

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

@@ -0,0 +1,10 @@
+<svg width="408" height="112" viewBox="0 0 408 112" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M185.6 25.2H141.6C140.716 25.2 140 25.9164 140 26.8V36.4C140 37.2837 140.716 38 141.6 38H167.413C168.07 38 168.447 38.7478 168.056 39.2758L140.627 76.3519C140.22 76.9028 140 77.5699 140 78.2551V85.2001C140 86.0837 140.716 86.8 141.6 86.8H185.6C186.484 86.8 187.2 86.0837 187.2 85.2001V75.6C187.2 74.7164 186.484 74 185.6 74H159.787C159.13 74 158.753 73.2523 159.144 72.7243L186.573 35.6482C186.98 35.0973 187.2 34.4302 187.2 33.745V26.8C187.2 25.9164 186.484 25.2 185.6 25.2Z" fill="#0F1015"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M212.8 24.8C203.08 24.8 195.2 32.6798 195.2 42.4V69.6C195.2 79.3203 203.08 87.2001 212.8 87.2001H224.8C234.52 87.2001 242.4 79.3203 242.4 69.6V42.4001C242.4 32.6798 234.52 24.8 224.8 24.8H212.8ZM212.8 37.6C210.149 37.6 208 39.7491 208 42.4001V69.6C208 72.251 210.149 74.4001 212.8 74.4001H224.8C227.451 74.4001 229.6 72.251 229.6 69.6V42.4C229.6 39.7491 227.451 37.6 224.8 37.6H212.8Z" fill="#0F1015"/>
+<path d="M250.4 27.5223V85.3983C250.4 86.282 251.116 86.9983 252 86.9983H261.6C262.484 86.9983 263.2 86.282 263.2 85.3983V48.1873C263.2 46.3171 264.286 44.6172 265.983 43.8314L277.983 38.2759C281.164 36.8032 284.8 39.1263 284.8 42.6317V85.3983C284.8 86.282 285.516 86.9983 286.4 86.9983H296C296.884 86.9983 297.6 86.282 297.6 85.3983V42.6209C297.6 29.7687 284.272 21.2506 272.608 26.6484L264.318 30.4847C263.659 30.7898 262.877 30.6125 262.414 30.053L259.954 27.0817C259.346 26.3474 258.443 25.9223 257.489 25.9223H252C251.116 25.9223 250.4 26.6387 250.4 27.5223Z" fill="#0F1015"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M323.2 24.8C313.48 24.8 305.6 32.6798 305.6 42.4V69.6C305.6 79.3203 313.48 87.2001 323.2 87.2001H335.2C344.92 87.2001 352.8 79.3203 352.8 69.6V42.4001C352.8 32.6798 344.92 24.8 335.2 24.8H323.2ZM323.2 37.6C320.549 37.6 318.4 39.7491 318.4 42.4001V69.6C318.4 72.251 320.549 74.4001 323.2 74.4001H335.2C337.851 74.4001 340 72.251 340 69.6V42.4C340 39.7491 337.851 37.6 335.2 37.6H323.2Z" fill="#0F1015"/>
+<path d="M378.101 25.2H391.708C400.706 25.2 408 32.4944 408 41.4925C408 42.2395 407.444 42.8696 406.703 42.9622L396.602 44.2249C395.857 44.3179 395.2 43.7376 395.2 42.9876C395.2 40.2331 392.967 38 390.212 38H378.921C375.982 38 373.6 40.3822 373.6 43.3207C373.6 45.8196 375.339 47.9818 377.78 48.5176L394.22 52.1264C402.267 53.8928 408 61.021 408 69.2593C408 78.9468 400.147 86.8 390.459 86.8H377.092C368.094 86.8 360.8 79.5057 360.8 70.5076C360.8 69.7606 361.356 69.1305 362.097 69.0379L372.198 67.7752C372.943 67.6822 373.6 68.2625 373.6 69.0125C373.6 71.767 375.833 74 378.588 74H390.014C392.878 74 395.2 71.6783 395.2 68.8143C395.2 66.4508 393.602 64.3863 391.314 63.794L373.765 59.2508C366.132 57.2745 360.8 50.3868 360.8 42.5015C360.8 32.9462 368.546 25.2 378.101 25.2Z" fill="#0F1015"/>
+<path d="M8 58C8 31.4903 29.4903 10 56 10C82.5097 10 104 31.4903 104 58C104 75.468 94.6696 90.7597 80.7129 99.1582C80.3237 99.3924 79.8197 99.2468 79.6079 98.845L77.7391 95.2981C77.5396 94.9194 77.6741 94.4514 78.0396 94.2286C90.245 86.7878 98.4 73.3477 98.4 58C98.4 45.396 92.898 34.0746 84.1712 26.3112L83.8716 26.0447C83.2103 25.4564 82.197 25.5168 81.6102 26.1795L76.2698 32.2113C70.6911 27.8209 63.6496 25.2 56 25.2C37.8851 25.2 23.2 39.8851 23.2 58C23.2 70.6278 30.3366 81.5856 40.7873 87.0659L41.1415 87.2516C41.9239 87.6619 42.8909 87.3604 43.3013 86.578L46.7194 80.0634C46.9121 79.6961 47.353 79.5384 47.7406 79.6861C50.3082 80.6645 53.0932 81.2 56 81.2C68.813 81.2 79.2 70.813 79.2 58C79.2 45.187 68.813 34.8 56 34.8H55.6C54.7163 34.8 54 35.5163 54 36.4V43.8553C54 44.2521 53.7083 44.5864 53.3192 44.6641C47.092 45.909 42.4 51.4066 42.4 58C42.4 62.0871 44.2053 65.7548 47.0553 68.2449C49.4452 70.3329 52.5771 71.6 56 71.6C63.5111 71.6 69.6 65.5111 69.6 58C69.6 51.4066 64.908 45.909 58.6808 44.6641C58.2917 44.5864 58 44.2521 58 43.8553V39.79C58 39.3156 58.411 38.944 58.8801 39.0146C68.1177 40.4042 75.2 48.375 75.2 58C75.2 68.6039 66.6039 77.2 56 77.2C52.7862 77.2 49.7622 76.4119 47.1053 75.0203L46.7512 74.8348C45.9688 74.425 45.0023 74.7267 44.592 75.5088L41.3048 81.7738C41.0894 82.1844 40.5705 82.3272 40.1833 82.0723C32.3591 76.9208 27.2 68.0616 27.2 58C27.2 42.0942 40.0942 29.2 56 29.2C63.3526 29.2 70.0574 31.9526 75.1478 36.4867L75.4473 36.7535C76.1086 37.3425 77.1225 37.2824 77.7095 36.6194L82.416 31.3036C82.7202 30.96 83.251 30.9417 83.5705 31.2711C90.2759 38.1859 94.4 47.6103 94.4 58C94.4 72.7914 86.0375 85.6329 73.7731 92.0487C68.4609 94.8276 62.417 96.4 56 96.4C39.6557 96.4 25.6916 86.188 20.1496 71.7893L20.0065 71.4176C19.6901 70.5954 18.7685 70.1837 17.945 70.4967L11.2754 73.0313C10.8512 73.1925 10.3773 72.9691 10.24 72.5365C8.78535 67.9531 8 63.0699 8 58Z" fill="#0F1015"/>
+<path d="M46.4 58C46.4 52.6981 50.6981 48.4 56 48.4C61.3019 48.4 65.6 52.6981 65.6 58C65.6 63.3019 61.3019 67.6 56 67.6C53.5814 67.6 51.376 66.7082 49.6871 65.2326C47.6696 63.4699 46.4 60.8844 46.4 58Z" fill="#0F1015"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5314 80.7132C15.335 80.3641 14.9136 80.2069 14.5392 80.3492L7.33942 83.0853C6.51543 83.3984 5.59337 82.9861 5.27738 82.1632L3.70554 78.0698C1.30997 71.8314 0 65.0616 0 58C0 27.0721 25.0721 2 56 2C86.9279 2 112 27.0721 112 58C112 79.5691 99.8043 98.2795 81.9611 107.63L78.0725 109.668C77.291 110.078 76.3256 109.777 75.9143 108.997L72.3255 102.186C72.1387 101.831 71.7185 101.67 71.3402 101.803C66.5332 103.486 61.3687 104.4 56 104.4C38.6169 104.4 23.4779 94.8422 15.5314 80.7132ZM74.193 97.1488C73.9943 96.7717 73.5352 96.6173 73.1454 96.7898C67.9011 99.1111 62.0989 100.4 56 100.4C38.9222 100.4 24.2068 90.3041 17.4886 75.7611C17.3101 75.3745 16.8638 75.1867 16.4658 75.3379L9.64462 77.9301C8.82063 78.2433 7.89858 77.831 7.58258 77.008L7.43969 76.6359C5.21709 70.8479 4 64.5637 4 58C4 29.2812 27.2812 6 56 6C84.7188 6 108 29.2812 108 58C108 78.0231 96.6823 95.3996 80.1044 104.087L79.7509 104.273C78.9694 104.682 78.0039 104.382 77.5927 103.601L74.193 97.1488Z" fill="#0F1015"/>
+</svg>

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>