@zonos/elements 1.3.15-alpha.1 → 1.3.15-alpha.3

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -8,9 +8,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: '493a7967c460956be2c539e887c839950aea92e9', class: "zonos--elements", style: {
+        return (h(Host, { key: '197958ea99ffdb3cfc291144129c20b01fdd8b11', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: '056de7926b3f8a1c0126a465abbc0962cc7f2f64', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '992ed280cb9d44abf872698fd54acbf9b384255b', class: "zonos--flex-message" }, h("zonos-icon", { key: '5a3fe5a438ab1e5ab10ed831cc65a4783a36f195', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'b5fcefeeae68c3d4bd60a36c039050e6d4f2927a', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: 'c8ac70b6c21f6b412653a859661a07a3a07905c6', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '2efe05820fd9e5f23d48a9ac0c167d3ec41b34d1', class: "zonos--flex-message" }, h("zonos-icon", { key: '81577b44466ad6ed48b014fd20b441b3be96a70b', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: '16ba131ca7a8d80c81de6c38f3fbd11d872a8b2a', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-dialog/zonos-dialog.css

@@ -95,7 +95,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: var(--amino-space-16) var(--amino-space-24);
+  padding: 16px 24px;
 }
 :host .zonos--header .-zonos-stencil-library--header-text {
   flex-grow: 1;
@@ -113,7 +113,7 @@
   background: var(--amino-hover-color);
 }
 :host .zonos--body {
-  padding: var(--amino-space-8) var(--amino-space-24);
+  padding: 8px 24px;
   max-height: 100%;
   height: 100%;
   overflow: auto;
@@ -122,7 +122,7 @@
   padding: 0;
 }
 :host .zonos--footer {
-  padding: var(--amino-space-16) var(--amino-space-24);
+  padding: 16px 24px;
 }
 
 :host(.open) .zonos--dialog-layout,

package/dist/collection/components/common/zonos-dialog/zonos-dialog.js

@@ -47,7 +47,7 @@ export class ZonosDialog {
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { key: 'c97c24de2950d418d1aec4738ea6152e24f8049a', class: classes([
+        return (h(Host, { key: 'cfa43ca3e1e64bbc9fb81dd35f07b5a2a57ef5a7', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -58,10 +58,10 @@ export class ZonosDialog {
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, h("div", { key: 'd8053eb085edd344a5c667123515932a759ee4df', class: "zonos--backdrop" }), h("div", { key: '15f11f85257160698f7850495f3d8866dfd46346', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '6cb8ab8555511cfdbb502ecdb7b796894ff9b0df', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '7dc1c154cda561aca93c0b3f09bf1c8f9d01446b', class: "zonos--loading" }, h("zonos-spinner", { key: '71701888d4320b35f43934a425a6e44653c84e62', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '5e9ea325a80cefc212c4375dec076d4a703d3bbb', class: "zonos--header" }, this.headerText && (h("h3", { key: '6372813c8c79c0c4a09cca96bf85749ce32a43fb', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '00d2f9393acec2da88794977cf6cfd4308fffb31', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: '71177d6272533d34143f50d2ebce277b3cb6a6db', class: classes([
+            } }, h("div", { key: '967accb9ec4e552bab62bbec21fd0319d68828dc', class: "zonos--backdrop" }), h("div", { key: '37041f00cd3a996510f25708460a91baa527ed74', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '571cfdac8125f10d380e06efc1464ddcaf1f335e', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '200e75be392f6e8745ebbf2ddfa74aaf3d027caa', class: "zonos--loading" }, h("zonos-spinner", { key: 'a5d5a0d22a5d8ae5a22207716a7904d7031efa8d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '37800b1fd96b0ff6df2724b4d62ea133470fae2c', class: "zonos--header" }, this.headerText && (h("h3", { key: 'eb0ef1b8c3d82d889f76b18b15d98a19fa1480a1', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '24b6945af71c51a35a09177e65d0b081abec75cb', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'a9d913ce8af53e60ffbf8eeb41b6d4372e0d389e', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'ae388c5f9d7a250e0f829313acc561aea9ba1468' })), h("slot", { key: '202816af31727db4a92af8f63daeb34992ac5504', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '02c77f819baa6b1a684dfdf02b756ffa1fb55751' })), h("slot", { key: '0b469253c01c418d43d0865ae72d065d2a911aeb', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-language-select/zonos-language-select.css

@@ -37,13 +37,13 @@
 :host .zonos--language-select .zonos--language-select-content {
   display: grid;
   grid-template-columns: repeat(3, minmax(max-content, 1fr));
-  padding: var(--amino-space-16);
-  padding-top: var(--amino-space-0);
+  padding: 16px;
+  padding-top: 0px;
 }
 :host .zonos--language-select .zonos--language-select-content .zonos--language-select-button {
   display: flex;
-  padding: var(--amino-space-8);
-  gap: var(--amino-space-4);
+  padding: 8px;
+  gap: 4px;
   align-items: center;
   border-radius: var(--amino-radius-4);
   cursor: pointer;

package/dist/collection/components/common/zonos-language-select/zonos-language-select.js

@@ -16,9 +16,9 @@ export class ZonosLanguageSelect {
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: '5ccbe14cb452d09ae6bc2fb607f745397d94f55e', class: "zonos--elements", style: {
+        return (h(Host, { key: 'b17a55c8fe256cf1e484834700dec4ea512a0379', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '9679284a648e7fa09bbdcba7f2d7b6665134772b', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '15f1b2497a2808c2df25611ec33d2f4dc4ba8586', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'f072ae8c34af9d218f8975cbead1123a1b449e62', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, h("div", { key: '0d8c6f5902f3f25c2528d88dd76b625807f2bd62', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'c82d962040885203b20f384a56990d9515afeba6', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'ac4a694a903eaa38886d929350b74b0c0114b61d', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
     static get is() { return "zonos-language-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-logo/zonos-logo.js

@@ -10,11 +10,11 @@ export class ZonosLogo {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: '3d2041632c4ad901d228ce6e267e6b5f9b408dc8', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'c196e8372ff0f602b135c582a1a4cdf2ba75274d', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: 'e069b288a647051e1b5a505fb2b5b4a1851780ed', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '668abac552ed1e133f29b0b0aa8f17d158c5441b', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-notification/zonos-notification.css

@@ -38,15 +38,15 @@
 :host .zonos--notification-items {
   position: fixed;
   z-index: 9999999;
-  bottom: var(--amino-space-24);
-  gap: var(--amino-space-8);
+  bottom: 24px;
+  gap: 8px;
   display: inline-flex;
   flex-direction: column;
 }
 :host .zonos--notification-item {
   cursor: pointer;
   transition: all 0.3s ease;
-  padding: var(--amino-space-8);
+  padding: 8px;
   border-radius: var(--border-radius, var(--amino-radius-6));
   opacity: 0;
   flex-shrink: 0.0001;

package/dist/collection/components/common/zonos-select-dialog-header/zonos-select-dialog-header.css

@@ -35,7 +35,7 @@
   position: sticky;
   top: 0;
   background: var(--amino-surface-color);
-  padding: var(--amino-space-16);
+  padding: 16px;
 }
 :host .zonos--select-dialog-header-wrapper .zonos--select-dialog-header {
   position: relative;

package/dist/collection/components/common/zonos-select-dialog-header/zonos-select-dialog-header.js

@@ -8,9 +8,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: 'f5fdbdf6077dc7f928ce27b9a659264451851848', class: "zonos--elements", style: {
+        return (h(Host, { key: 'c571a648772792abb553c87a9c238e36d2fd63fb', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '2c702d85c59f05b13e2e390112a883287ea7caa9', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '6d96d65d0bf84c9c3fa393e40793ce614c38d56d', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'faa95bb90a92ea18b357fc85c417fe12ec683abd', type: "boldLabel" }, this.label), h("zonos-button", { key: '69cb8bc40f9af380971bf25d9901f8508950d9a6', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: 'abdbb9baa47b4c954b81ea4101b24ababf45ae31' }))));
+            } }, h("zonos-v-stack", { key: 'f8d2c7a95bb985e17c7c6fa4fdeb2d6c692dd266', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'dd87a6fd7d2f84e907b99a440e62b1260273ae0d', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'a5573f14f446c343bf7d5ed7f1c4564788435513', type: "boldLabel" }, this.label), h("zonos-button", { key: '3edfd71ce5da3a2366c856ca739aaea928a836de', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '155ec43e2791f871a4182edff8a6dd2304951f72' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.css

@@ -42,9 +42,9 @@
 :host .zonos--shipping-rich-radio-item {
   display: flex;
   flex: 1;
-  padding: var(--amino-space-16);
+  padding: 16px;
   align-items: center;
-  gap: var(--amino-space-16);
+  gap: 16px;
   cursor: pointer;
   border: 1px solid var(--amino-gray-200);
 }

package/dist/collection/components/common/zonos-tooltip/zonos-tooltip.css

@@ -39,7 +39,7 @@
   bottom: 100%;
   left: 0;
   width: max-content;
-  padding: var(--amino-space-12);
+  padding: 12px;
   background-color: var(--amino-gray-1200);
   opacity: 0;
   transform: scale(0);

package/dist/collection/components/common/zonos-tooltip/zonos-tooltip.js

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '20c737a7dd6aae9b2b7aa1a293dd891cc618dfbb', class: "zonos--elements" }, h("div", { key: '09aefcda610b6536a10b0a325c2b460d2f5a2976', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '4191e0e3297b1c5ff625ee965773d026a970db68' }), h("div", { key: 'f4a4455f57ad9e03a6bf3d4309999480caa077f4', class: classes([
+        return (h(Host, { key: '3b1bc52074428e85d2e3939b0fb6dbf4e8146e1c', class: "zonos--elements" }, h("div", { key: 'ded9a789ec041c9bd01c4a225ad0706a097c2215', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '2052001f18e774bf5f364f2f94fb83fbc161e510' }), h("div", { key: 'ed207e64c5361aadf6deb25574b736bbbb32cf49', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '36d1afd592d1e83cf325bb64bef2ff94cd6f5adb', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '8e9562f0cb35a53e32dd39cabf22cc26a1e07d47', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: 'c2b064cac7a7851bbb8cd55ec116655160fffe6b', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'e03b47929a5b1856b6770e97403c85088d6a6c77', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: 'c6bd39c68cd1056b90f5ced0bb21065ea9bd657c', style: {
+        return (h(Host, { key: '39a71bdb43f87fd7beec0370aa384a94c7603417', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'fa24c9d7aafdee826d51bc9b0537c3ec1df672d3', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'a1f2bde182c1073dfeebe72855af2c729c303fee' }))));
+            } }, h("div", { key: '37ef89d4d2aecfebbf6a47f1754ce5f45fcd2566', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'd34be5394fef1bf5e7f37cb6dbd468ae48454df8' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: 'b88706a49b858decbff163e085da6df8b8513eac' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '25e0ed1ec26c0b3b3d8539ccb58f914eac9301c8' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hello/zonos-hello/zonos-hello.css

@@ -85,7 +85,7 @@
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
   left: 0;
-  transform: translateX(calc(-100% + var(--amino-space-16)));
+  transform: translateX(calc(-100% + 16px));
   width: fit-content;
   border-top: var(--amino-border);
   border-bottom: var(--amino-border);
@@ -109,7 +109,7 @@
 :host .zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
   max-width: 100vw;
   padding: 0 6px;
-  padding-right: var(--amino-space-16);
+  padding-right: 16px;
   border: var(--amino-border);
 }
 :host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) {
@@ -127,13 +127,13 @@
   border-left: 0;
 }
 :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-  padding-left: var(--amino-space-16);
+  padding-left: 16px;
   padding-right: 6px;
   border-left: none;
 }
 :host .zonos--hello-widget.zonos--hello-widget-animate-from-left > .zonos--hello-message {
   order: 1;
-  transform: translateX(calc(100% - var(--amino-space-16)));
+  transform: translateX(calc(100% - 16px));
   right: 0;
   left: auto;
   border-top-left-radius: 0;
@@ -164,19 +164,19 @@
 @media (max-width: 768px) {
   :host .zonos--hello-widget {
     position: fixed;
-    bottom: var(--amino-space-32);
-    right: var(--amino-space-32);
+    bottom: 32px;
+    right: 32px;
     border-radius: var(--amino-radius-4);
-    padding: var(--amino-space-4);
+    padding: 4px;
     border: 1px solid transparent;
   }
   :host .zonos--hello-widget.zonos--hello-widget-left {
-    left: var(--amino-space-32);
+    left: 32px;
     right: auto;
   }
   :host .zonos--hello-widget.zonos--hello-widget-top {
     bottom: auto;
-    top: var(--amino-space-32);
+    top: 32px;
   }
   :host .zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message > .zonos--hello-message {
     border: none;
@@ -209,8 +209,8 @@
     border-bottom-right-radius: var(--amino-radius-4);
   }
   :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-    padding-left: var(--amino-space-8);
-    padding-right: var(--amino-space-4);
+    padding-left: 8px;
+    padding-right: 4px;
   }
   :host .zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
     padding: 0 var(--amino-radius-4);
@@ -223,19 +223,19 @@
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget {
   position: fixed;
-  bottom: var(--amino-space-32);
-  right: var(--amino-space-32);
+  bottom: 32px;
+  right: 32px;
   border-radius: var(--amino-radius-4);
-  padding: var(--amino-space-4);
+  padding: 4px;
   border: 1px solid transparent;
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-left {
-  left: var(--amino-space-32);
+  left: 32px;
   right: auto;
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-top {
   bottom: auto;
-  top: var(--amino-space-32);
+  top: 32px;
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message > .zonos--hello-message {
   border: none;
@@ -268,8 +268,8 @@
   border-bottom-right-radius: var(--amino-radius-4);
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-  padding-left: var(--amino-space-8);
-  padding-right: var(--amino-space-4);
+  padding-left: 8px;
+  padding-right: 4px;
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
   padding: 0 var(--amino-radius-4);