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

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

@@ -36,7 +36,7 @@ export class ZonosCheckoutFooter {
         return (h(Host, { key: 'fae1e5cb1250e834ecf3b09f11785ddea61be3b2', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: 'f3d48fcc675458dd38ca48e21f24a003b5ff9b56', class: "zonos--checkout-footer" }, h("div", { key: '97daec871630cf2bb33956b668abee2e715eceb5', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: 'cd6e12e8d1320e3e6542eef16f15ab27921748c3', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'bdc6d9311d2d039e87c261ead45474b7bf1fe992', class: classes([
                 'zonos--checkout-footer-dialog',
                 this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, h("zonos-language-select", { key: '7318bb4137e160e9ed05a423fb80f1806c4f0104', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '55c76c6cf6777407532c00cf167d59e3cefc5eab', class: "zonos--checkout-footer-icon-wrapper" }, h("zonos-text", { key: '41a7fae5a1a08d22b91341ccfcc0df9daeeb8f82', textColor: colorDesktop, type: "caption" }, "Powered by"), h("a", { key: '394e19392718d2a40a351692fa358f8f86366b46', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '4d8cadbb7c26e8f7888caad2b158d521ab504590', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 }))))));
+            ]) }, h("zonos-language-select", { key: '7318bb4137e160e9ed05a423fb80f1806c4f0104', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '55c76c6cf6777407532c00cf167d59e3cefc5eab', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: 'e2cf10499ed764fb2e7086761ece106580cd6440', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: '0fe6c810a6d7f84a781655cefc47ec6cbb5131c9', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '50401876a45161e80f593971e602e4c449e78dbe', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: '0f69d9d9955165de13a49ff00a7044090b141800', textColor: colorDesktop }, "Powered by"), h("a", { key: '680e6fe4d0a783e2ebc55a51ffb55846ad997249', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '22aee1eb21306141e620bcc1b0dbf035bd710fba', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
     }
     static get is() { return "zonos-checkout-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.css

@@ -37,10 +37,10 @@
   flex-direction: column;
 }
 :host .zonos--title {
-  margin-bottom: var(--amino-space-24);
+  margin-bottom: 24px;
 }
 :host .zonos--group {
-  margin-bottom: var(--amino-space-20);
+  margin-bottom: 20px;
   overflow: auto;
   padding: 5px;
 }
@@ -60,10 +60,10 @@
   background: #d6d6d6;
 }
 :host .zonos--payment-error-banner {
-  margin-bottom: var(--amino-space-8);
+  margin-bottom: 8px;
 }
 :host .zonos--error-banner {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host zonos-button {
   box-shadow: 0 0 1px 0 var(--amino-gray-600);
@@ -73,7 +73,7 @@
   display: flex;
   justify-content: center;
   bottom: 0;
-  margin-top: var(--amino-space-12);
+  margin-top: 12px;
   background: var(--primary-color, var(--amino-gray-0));
 }
 :host .zonos--group-btn zonos-button {

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

@@ -55,7 +55,7 @@
 :host .zonos--content .zonos--left,
 :host .zonos--content .zonos--right {
   flex: 1;
-  padding: var(--amino-space-32);
+  padding: 32px;
 }
 :host .zonos--content .zonos--left {
   background-color: var(--primary-color, var(--amino-gray-0));
@@ -73,7 +73,7 @@
   background-color: var(--amino-gray-0);
   align-items: center;
   justify-content: center;
-  padding: var(--amino-space-24);
+  padding: 24px;
   padding-bottom: 50px;
 }
 :host .zonos--content .zonos--done .zonos--header {
@@ -97,18 +97,18 @@
   flex-direction: column;
 }
 :host .zonos--left .zonos--wrapper {
-  padding: 0 var(--amino-space-8) var(--amino-space-8);
+  padding: 0 8px 8px;
 }
 :host .zonos--left .zonos--payment-error-banner {
-  margin-top: var(--amino-space-24);
+  margin-top: 24px;
 }
 :host .zonos--right {
   position: relative;
 }
 :host .zonos--right .zonos--close-button {
   position: absolute;
-  right: var(--amino-space-24);
-  top: var(--amino-space-24);
+  right: 24px;
+  top: 24px;
   z-index: 2;
 }
 :host .zonos--wrapper {
@@ -126,8 +126,8 @@
   align-items: center;
 }
 :host .zonos--checkout-default-message {
-  margin-left: var(--amino-space-76);
-  margin-bottom: var(--amino-space-8);
+  margin-left: 76px;
+  margin-bottom: 8px;
 }
 
 :host(.preview) {
@@ -138,7 +138,7 @@
   border: var(--amino-border);
 }
 :host(.preview) .zonos--content .zonos--done {
-  padding: var(--amino-space-32);
+  padding: 32px;
 }
 
 :host(.mobile) {
@@ -155,13 +155,13 @@
 }
 :host(.mobile) .zonos--content .zonos--left,
 :host(.mobile) .zonos--content .zonos--right {
-  padding: var(--amino-space-12);
-  padding-bottom: var(--amino-space-76);
+  padding: 12px;
+  padding-bottom: 76px;
 }
 @media (max-width: 768px) {
   :host(.mobile) .zonos--content .zonos--left,
   :host(.mobile) .zonos--content .zonos--right {
-    padding-bottom: var(--amino-space-0);
+    padding-bottom: 0px;
   }
 }
 :host(.mobile) .zonos--content .zonos--left {
@@ -170,7 +170,7 @@
 }
 :host(.mobile) .zonos--content .zonos--right {
   order: 1;
-  padding-top: var(--amino-space-16);
+  padding-top: 16px;
 }
 :host(.mobile) .zonos--content .zonos--right .zonos--wrapper {
   display: flex;
@@ -178,14 +178,14 @@
   border: var(--amino-border);
   border-radius: var(--border-radius, var(--amino-radius-10));
   background-color: var(--amino-gray-50);
-  padding: var(--amino-space-12);
-  margin-top: var(--amino-space-32);
+  padding: 12px;
+  margin-top: 32px;
 }
 :host(.mobile) .zonos--content .zonos--right .zonos--review {
   margin-bottom: 0;
 }
 :host(.mobile) .zonos--content .zonos--right .zonos--cart-items {
-  margin-top: var(--amino-space-8);
+  margin-top: 8px;
 }
 :host(.mobile) .zonos--content zonos-checkout-footer {
   order: 3;

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.css

@@ -37,16 +37,16 @@
   flex-direction: column;
 }
 :host .zonos--title {
-  margin-bottom: var(--amino-space-20);
+  margin-bottom: 20px;
 }
 :host .zonos--link-authentication {
-  margin-bottom: var(--amino-space-32);
+  margin-bottom: 32px;
 }
 :host .zonos--address {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host .zonos--checkbox {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host .zonos--checkbox + .zonos--address {
   margin-bottom: 0;
@@ -55,10 +55,10 @@
   box-shadow: 0 0 1px 0 var(--amino-gray-600);
 }
 :host .zonos--error-banner {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host .zonos--group {
-  margin-bottom: var(--amino-space-20);
+  margin-bottom: 20px;
   overflow: auto;
   padding: 5px;
 }
@@ -82,8 +82,8 @@
   display: flex;
   justify-content: center;
   bottom: -5px;
-  padding-top: var(--amino-space-8);
-  margin-top: var(--amino-space-12);
+  padding-top: 8px;
+  margin-top: 12px;
   background: var(--primary-color, var(--amino-gray-0));
 }
 :host .zonos--group-btn zonos-button {

package/dist/collection/components/checkout/zonos-checkout/zonos-review/zonos-review.css

@@ -38,22 +38,22 @@
   z-index: 1;
 }
 :host .zonos--total-pay {
-  margin: var(--amino-space-8) 0 var(--amino-space-24);
+  margin: 8px 0 24px;
 }
 
 :host(.mobile) {
   display: flex;
   flex-direction: row;
-  gap: var(--amino-space-24);
+  gap: 24px;
   justify-content: space-between;
-  padding: var(--amino-space-4) 0;
-  margin-bottom: var(--amino-space-8);
+  padding: 4px 0;
+  margin-bottom: 8px;
   background-color: transparent;
 }
 :host(.mobile) .zonos--title {
   display: flex;
   align-self: center;
-  gap: var(--amino-space-8);
+  gap: 8px;
 }
 :host(.mobile) .zonos--total-pay {
   margin: 0;

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.css

@@ -37,16 +37,16 @@
   flex-direction: column;
 }
 :host .zonos--title {
-  margin-bottom: var(--amino-space-24);
+  margin-bottom: 24px;
 }
 :host .zonos--shipping-method-title {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host .zonos-shipping-rich-radio {
-  margin-bottom: var(--amino-space-24);
+  margin-bottom: 24px;
 }
 :host .zonos--group {
-  margin-bottom: var(--amino-space-20);
+  margin-bottom: 20px;
   overflow: auto;
   padding: 5px;
 }
@@ -66,7 +66,7 @@
   background: #d6d6d6;
 }
 :host .zonos--error-banner {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host zonos-button {
   box-shadow: 0 0 1px 0 var(--amino-gray-600);
@@ -76,12 +76,12 @@
   display: flex;
   justify-content: center;
   bottom: 0;
-  margin-top: var(--amino-space-12);
+  margin-top: 12px;
   background: var(--primary-color, var(--amino-gray-0));
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;
 }
 :host zonos-banner {
-  margin-top: var(--amino-space-24);
+  margin-top: 24px;
 }

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -91,7 +91,7 @@ export class ZonosShipping {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: 'f46a224f05bd6a5b762e7b4a9130c809fa1806d9', class: "zonos--shipping zonos--elements" }, h("div", { key: '07dceedd0abb2c794c8f4b7c70d51f84eb76f82f', class: "zonos--group" }, h("zonos-text", { key: 'e9aec3b541e90bca19218f5444b2a1282c1fade2', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: 'df955af5f7318a0146d72aae0d5292a5455c16d9', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'eacb6cc1936ac9a70f32deca90fa88efd9d560bd', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '37aed76bf80c937ed9dddbefb7f6417bf1322a89', class: "zonos--group-btn" }, h("zonos-button", { key: '09a5e1986f6d39ece56a0ea9b47324f81e4c3d84', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { key: 'c172dbd75de8a0d5d32d7e3e1814a124aaa05c05', class: "zonos--shipping zonos--elements" }, h("div", { key: '3dbbfadac7c8fb2bd4f3337206da535add7c4dd5', class: "zonos--group" }, h("zonos-text", { key: '93c2e9f56359a0c046e23a0e8c70af9af2dad3f4', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: 'dc0aa4f036719929344071fe68dd8bf98d493642', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '98dd599d8a87e3a350b928a5d0d9300aa197d731', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: 'a59a2833967bde37cd2b31dca4209e8730ec92dc', class: "zonos--group-btn" }, h("zonos-button", { key: 'ef100ac737c28901f609b188bfa0b9e58d4363e8', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }

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

@@ -7,7 +7,7 @@ export class ZonosLink {
         this.linkTitle = undefined;
     }
     render() {
-        return (h(Host, { key: '555e179675070efaaf8bf0d0ea674fe034b8700c', class: "zonos--elements" }, h("a", { key: '0c608a6f572eaabb93021d8618f2b1fd58b10188', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '4fef15b277b11e062d1fc2cf8bc3e564ed5b2a57' }))));
+        return (h(Host, { key: 'af4c861f0a7f0a86c60c2ba6fe12a37721d50c1b', class: "zonos--elements" }, h("a", { key: 'b8fc607e0aa5269f2c3c1ccf51e233b52fac6693', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '98ebca9c8962143426fd1c88d9189b92fc402505' }))));
     }
     static get is() { return "zonos-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@
 }
 :host .zonos--badge-content {
   display: flex;
-  gap: var(--amino-space-8);
+  gap: 8px;
   font-size: var(--amino-font-size-s);
   padding: 4px 8px;
   text-align: center;

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

@@ -11,16 +11,16 @@ export class ZonosBadge {
         this.rounded = false;
     }
     render() {
-        return (h(Host, { key: '01a64861017098d6cdfa94b46ee675660147c45d', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: 'cc521e396f505c1f3a69d40b755585c1e439f120', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'ef736fdfe0352ea201ecb34cbec695d90cfe4e5f', class: classes([
+            } }, h("div", { key: '132ee2adfd3be7634d71df9ee1bf813fd56fe768', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: '941793bf2ee10ad47bc5263f1bc2cbf6637d8bcd' }, h("slot", { key: '11da2ba6d11f451ecb71b1b2eb9ae29a009f8418' })))));
+            ]) }, this.icon, h("zonos-text", { key: 'ebe7b204422dc3b0d9fe93d3ca9bd75ceddb9f37' }, h("slot", { key: 'e58b021307f14226ce15df693bedfa50f79f6d8a' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@
 
 :host {
   border-radius: var(--amino-radius-10);
-  padding: var(--amino-space-16);
+  padding: 16px;
   background: var(--amino-gray-100);
 }
 :host .zonos--container {
@@ -48,12 +48,12 @@
   justify-self: start;
 }
 :host .zonos--header-wrapper {
-  margin-top: var(--amino-space-0);
+  margin-top: 0px;
   grid-area: header;
 }
 :host .zonos--content-wrapper {
   grid-area: content;
-  margin-top: var(--amino-space-4);
+  margin-top: 4px;
 }
 
 :host(.info) {

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

@@ -46,7 +46,7 @@
   background-color: var(--amino-surface-color);
   justify-content: center;
   border-radius: var(--amino-radius-10);
-  gap: var(--amino-space-8);
+  gap: 8px;
 }
 :host button {
   width: 100%;
@@ -68,7 +68,7 @@
   letter-spacing: normal;
   cursor: pointer;
   white-space: nowrap;
-  padding: var(--amino-space-8) var(--amino-space-24);
+  padding: 8px 24px;
   color: var(--color, var(--amino-gray-1200));
   margin: 1px;
   /** Button size */
@@ -96,29 +96,29 @@
 :host button.sm {
   height: var(--amino-size-sm);
   line-height: var(--amino-size-sm);
-  padding: var(--amino-space-4) var(--amino-space-8);
+  padding: 4px 8px;
 }
 :host button.sm:not(.has-content).has-icon {
-  padding: 0 var(--amino-space-4);
+  padding: 0 4px;
 }
 :host button.md {
   height: var(--amino-size-md);
   line-height: var(--amino-size-md);
-  padding: var(--amino-space-8) var(--amino-space-16);
+  padding: 8px 16px;
 }
 :host button.md:not(.has-content).has-icon {
-  padding: 0 var(--amino-space-8);
+  padding: 0 8px;
 }
 :host button.lg {
   height: var(--amino-size-lg);
   line-height: var(--amino-size-lg);
-  padding: var(--amino-space-12) var(--amino-space-24);
+  padding: 12px 24px;
 }
 :host button.lg:not(.has-content).has-icon {
-  padding: 0 var(--amino-space-16);
+  padding: 0 16px;
 }
 :host button:not(.only-icon).has-icon {
-  gap: var(--amino-space-8);
+  gap: 8px;
 }
 @media (max-width: 400px) {
   :host button:not(.only-icon).has-icon {

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

@@ -66,12 +66,12 @@ export class ZonosButton {
         const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
             ? 'white'
             : 'black';
-        return (h(Host, { key: '5f6e507c51fe1b02bbc14ff2bea2267ced9f8053', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '105badc02dbdcd9c782942e2b71719cd0ae7444e', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'f464fef0f48e4e8fbfec844c8f4e3e6c525c70fd', class: classes([
+            }) }, h("button", { key: 'c817b0eec6a0649e48155f284965412beb89a5f6', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -84,7 +84,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: '9fafd9c3c4764df1b9e268f6784b75fdfe21f9a7', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '5a2acbea7bbf41d76ce262f073f78e9f966dddc9', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '29982e7b98f8e9940f20916513434b5b1125c93a', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { key: '85d6175e728b87276b95e831560530a3f7424a7c', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'c65d771ca5182ac27da1769884dd8a4060037a1b', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e3c6b155c4eb0f22aa9378586563face84ef8c2d', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,19 +34,19 @@
 :host .styled-card {
   border: var(--amino-border);
   border-radius: var(--amino-radius-6);
-  padding: var(--spacing, var(--amino-space-24));
+  padding: var(--spacing, 24px);
   text-align: left;
 }
 :host .styled-card hr {
-  margin-left: calc(var(--spacing, var(--amino-space-24)) * -1);
-  margin-right: calc(var(--spacing, var(--amino-space-24)) * -1);
+  margin-left: calc(var(--spacing, 24px) * -1);
+  margin-right: calc(var(--spacing, 24px) * -1);
 }
 :host .styled-card .card-header {
-  margin: calc(var(--spacing, var(--amino-space-24)) * -1);
-  padding: var(--spacing, var(--amino-space-24));
+  margin: calc(var(--spacing, 24px) * -1);
+  padding: var(--spacing, 24px);
   display: flex;
   align-items: center;
-  margin-bottom: var(--spacing, var(--amino-space-24));
+  margin-bottom: var(--spacing, 24px);
   border-bottom: var(--amino-border);
   height: 65px;
   line-height: 65px;
@@ -60,11 +60,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: calc(var(--spacing, var(--amino-space-24)) * -1);
-  padding: var(--spacing, var(--amino-space-24));
+  margin: calc(var(--spacing, 24px) * -1);
+  padding: var(--spacing, 24px);
   border-top: var(--amino-border);
   background: var(--amino-surface-color-secondary);
-  margin-top: var(--spacing, var(--amino-space-24));
+  margin-top: var(--spacing, 24px);
   border-bottom-left-radius: var(--amino-radius-8);
   border-bottom-right-radius: var(--amino-radius-8);
   height: var(--footerHeight);

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

@@ -12,12 +12,12 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: 'e45c790b27e1991c005156ad6e53b1c8754d4dc5', style: {
+        return (h(Host, { key: '49d97d816bec7113ef6654cdf6f54598a17ebc00', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'efb85ca20d87be834dfe8dd0a80ba590e34480f3', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: 'edf7aa372e011fc76b14628b7a850fbb4577040e', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'ed7202d01519374129dc9f20f4c0914f2af311f8', type: "subheader" }, this.label), h("h-stack", { key: 'f3d041b3a96cfd5df4395efb7cbc958fb4ff3140', spacing: 8 }, this.actions))), h("slot", { key: '5957af957d0f2b1d9974dee154d050089dee574b' }), (this.footerActions || this.footerContent) && (h("footer", { key: '723c690483ebbe294c132fe39482180051bb7b8e', class: "card-footer", style: {
+            } }, h("div", { key: '6c4e326aa182ab597b099ddaf228b8b83efc471f', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: 'eb96bb3be8a7f78cec51f0288ed7d78b4f598659', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '11b6afcf37ec978d154990ab0a6b558d3b203126', type: "subheader" }, this.label), h("h-stack", { key: 'ae03b7569dc0f0e28fccd6c225305db778c6a21e', spacing: 8 }, this.actions))), h("slot", { key: 'b6224bc4d019e302b36a81c6c3a81e2bca4504b1' }), (this.footerActions || this.footerContent) && (h("footer", { key: 'f629f3d4914a92f400e7ccfd347e211bbf11035b', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '12a11f8192e9bdd95afd52a7b58ad99b6300c830' }, this.footerContent), h("h-stack", { key: '60cb2397fbe8f81a4248ab0581380ba125d08797', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: '696d8588e5de862f111c09b801d26f2625e4017f' }, this.footerContent), h("h-stack", { key: '3b2df392b850b27fcdc6e745a2d5093124562367', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@
 :host label {
   display: inline-flex;
   position: relative;
-  gap: var(--amino-space-8);
+  gap: 8px;
   align-items: center;
 }
 :host label.disabled {

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

@@ -27,14 +27,14 @@ export class ZonosCheckbox {
                     ? 'var(--amino-gray-800)'
                     : 'var(--amino-gray-0)';
         const borderStyle = getBorderRadius(this.borderStyle, '4px');
-        return (h(Host, { key: '3cf37521b3f7dc267bdcd23f0c023cdff9f73048', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '1383262a5cca00ede5154fbdf37bbabb8cbcd501', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: '6771cc475d111684518492cbff6204a9cad5ec33', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '832a30d4aa546a5c7b5ab9e8437428aa08f20c17', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: 'aa01d0b1eebb53587f8d2d344e3b1d01a6a7a683', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '166eef6010570137110f8548c9eb76f32e5616e9', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '9fe422aee5af96df40176d7d96006c578fe9273f', class: "checkmark-container" }, h("svg", { key: '7097c01f50d8cca92ee1bb531e0ac316cfca1036', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2fb6af94baa97412ce3dd49ceca12397886ce50b', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: 'f1c02b4377be2e48936a6e32049117b7a81a292b', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: 'd98289266cd4e78dd1e5c9b89019d0dd4927e4d0', class: "checkmark-container" }, h("svg", { key: 'e179fe12a77e0c7f1f48bc943ff472d0a75e05d5', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '147acf112b6d28fa30af8e8c7fe8d7f998a507ab', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: 'b83bb5bb1881580be3d0ab3ed83157a0c0ce3f8e', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.css

@@ -32,7 +32,7 @@
 }
 
 :host {
-  margin-bottom: var(--amino-space-32);
+  margin-bottom: 32px;
 }
 :host .zonos--tab-wrapper {
   display: flex;

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -63,17 +63,17 @@ export class ZonosCheckoutProgressTabs {
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: '419ccd73b029f2bbb92824f9398249d69cfd22aa', class: "zonos--elements", style: {
+        return (h(Host, { key: '8b1ca1b840103589ca7929771a7b828928ef1a64', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: '2dccf47e6211a6d25f2f8a4ece84c2759d06dc5a', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: 'b1bd07fcc96bd4e900ba945e9f57b27967d3a458', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
             const isSelected = tab.value === selectedStep;
             return (h("button", { class: classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, translate(tab.label))));
-        })), h("div", { key: '8f70a570e14fe00d855081a5a00607cdbbe87f1b', class: "zonos--tab-progress" }, h("div", { key: '85dd90b7a571ee92035bc6a03ce1d97af85e1e0d', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: 'f5b8b79050e1ebf23355161202a53854a0d9d08d', class: "zonos--tab-progress" }, h("div", { key: '5e9b4a726dd0cc6601a0097652b06759a7bba1fe', class: "zonos--progress-bar-fill" }))));
     }
     static get is() { return "zonos-checkout-progress-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,10 +42,10 @@ export class ZonosCollapse {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: '7e0d608d6bfe0ffa5b04b2a30fb27e956c7cb255', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: 'ec163c2c73f38e479ba22bb3bea5dbe2f156170b', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '94f69d9e0e6c849a9b609567036ff5cfd2f8ce9c' }, h("iframe", { key: '66ad13c9e08d2ece856543af98c440fec4fd5975', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '9d0f92e6d22f3e365bc3cec1e5d23325e045bc1a' }))));
+            } }, h("div", { key: 'ab8b73ff44968d8e2f3dcf75439b09da36fdfb22' }, h("iframe", { key: '0b6d3518382c4c17a6eacb07c1617e84c7301c39', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '752d9054dadf8905e22cfcca81bb966c2d3ce8d3' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,18 +41,18 @@
   z-index: 11;
 }
 :host .zonos--country-select .zonos--country-select-input {
-  padding: var(--amino-space-8);
+  padding: 8px;
   border-radius: var(--amino-radius-4);
   border: var(--amino-border);
 }
 :host .zonos--country-select .zonos--country-select-content {
-  padding: var(--amino-space-16);
-  padding-top: var(--amino-space-0);
+  padding: 16px;
+  padding-top: 0px;
 }
 :host .zonos--country-select .zonos--country-select-country {
   display: flex;
-  gap: var(--amino-space-16);
-  padding: var(--amino-space-8);
+  gap: 16px;
+  padding: 8px;
   align-items: center;
   border-radius: var(--amino-radius-4);
   cursor: pointer;

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

@@ -35,9 +35,9 @@ export class ZonosCountrySelect {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: 'd7397a52b23af00e87b88f3869798ea17de7efa3', class: "zonos--elements", style: {
+        return (h(Host, { key: '4ac4ac37704300786a6a4b3668b1608cf9c2fd96', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '6bf32f3ab45ac6640da6b375539e78afe9e730bc', class: "zonos--country-select" }, h("zonos-v-stack", { key: '95203326a2ead88bef76d91a545b89b2a497eb21', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'b2b120a3a4e5fe69466e2d0803181cb83cf6aec3', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '4269dfc717b0e2397449a15053da7036cefc03ec', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'dc7e39c2ee17ff3e5a2ebca1c69e6c399b848f4b', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: 'aecc099069d42c73703f510b7021d1a0b988b810', class: "zonos--country-select" }, h("zonos-v-stack", { key: '358b01905c26ea03eef9c8a1551d1faa5c13b763', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'a22baac4b445d2dee08be2cb9c31714b226d9327', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '71515910f8bb3ef512c76a71246272f49506ee63', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '44d417c7859f4263c8286e60a2cc9bfbe7a6698d', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,5 +38,5 @@
 :host .zonos--custom-message .zonos--flex-message {
   display: flex;
   align-items: center;
-  gap: var(--amino-space-8);
+  gap: 8px;
 }