@zonos/elements 1.3.15-alpha.2 → 1.3.15

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

@@ -52,26 +52,35 @@ export class ZonosButton {
          * So need to re-assign the variant prop with the default value if the value is `undefined` here.
          */
         const variant = this.variant || 'standard';
-        const color = this.buttonColor && isColorVariable(this.buttonColor)
-            ? `var(--amino-${this.buttonColor})`
-            : this.buttonColor;
         // use override background if it exists, otherwise use color from setting
         const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
         // only set theme for button to change text color if variant is standard and override background is set
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
-        const borderStyle = getBorderRadius(this.borderStyle);
+        const borderStyle = getBorderRadius({
+            overrideBorderStyle: this.borderStyle,
+        });
         const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
             ? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
             : overrideBackground;
+        // use the variable if it's a color variable, otherwise use the color
+        const color = this.buttonColor && isColorVariable(this.buttonColor)
+            ? `var(--amino-${this.buttonColor})`
+            : this.buttonColor;
+        // set contrast color if background color is dark for all variants except subtle
+        const contrastColor = this.variant !== 'subtle' &&
+            backgroundActualColor &&
+            isDarkColor(backgroundActualColor)
+            ? 'white'
+            : color;
         const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
             ? 'white'
             : 'black';
-        return (h(Host, { key: '105badc02dbdcd9c782942e2b71719cd0ae7444e', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '10bfc0423b83cc231fb22fdc430a1e5de66705fc', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
-                '--color': color,
+                '--color': contrastColor,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'c817b0eec6a0649e48155f284965412beb89a5f6', class: classes([
+            }) }, h("button", { key: '1feab99eec063d35c53ed8c308ac7675988e565c', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -84,7 +93,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), 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)));
+            ]), disabled: disabled }, this.loading && (h("div", { key: '4c7ad847266e626638762aeecfec011fbac3189b', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'd433f729bb10922694c27314a31d5159095ef4a9', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '06f32dc6cb7e10b1acbbde8bf1a0f663ea458608', 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: '49d97d816bec7113ef6654cdf6f54598a17ebc00', style: {
+        return (h(Host, { key: '206169280db67be5e74382c5beccfad87ec9068a', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, 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: {
+            } }, h("div", { key: '4a1c7eab9b5420295ce3ec30cfd59985be35d912', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: '75454e5d9eacdfdf842a9a220deab467625e497b', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'bc9c7d3500cef41237dbe53f27ab398103be55dd', type: "subheader" }, this.label), h("h-stack", { key: '29d68a483bfc61ddfb9deeb63272a8221759513c', spacing: 8 }, this.actions))), h("slot", { key: '0ad416c6cdb0b1fc2c922b8569cf35a4009263cc' }), (this.footerActions || this.footerContent) && (h("footer", { key: '469110ce0f0f81cbee4ef67e79d3be17933bcf2e', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '696d8588e5de862f111c09b801d26f2625e4017f' }, this.footerContent), h("h-stack", { key: '3b2df392b850b27fcdc6e745a2d5093124562367', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: '9044d9f3c81935119f668deb188f16cb1cb243bb' }, this.footerContent), h("h-stack", { key: '3f258ed6b07b8973b0bf753c7ab6427d67bf210c', 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

@@ -33,11 +33,12 @@
 
 :host {
   display: inline-flex;
+  cursor: pointer;
 }
 :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

@@ -14,6 +14,12 @@ export class ZonosCheckbox {
         this.fontSize = 'base';
         this.borderStyle = undefined;
     }
+    onClick() {
+        if (this.isDisabled) {
+            return;
+        }
+        this.checkboxSelected.emit(!this.isChecked);
+    }
     render() {
         const isBackgroundVariable = colorPrefixes.includes(this.backgroundColor);
         const backgroundColor = isBackgroundVariable
@@ -26,15 +32,18 @@ export class ZonosCheckbox {
                 !isDarkColor(backgroundColor)
                     ? 'var(--amino-gray-800)'
                     : 'var(--amino-gray-0)';
-        const borderStyle = getBorderRadius(this.borderStyle, '4px');
-        return (h(Host, { key: '1383262a5cca00ede5154fbdf37bbabb8cbcd501', class: classes(['zonos--elements zonos--checkbox']), style: {
+        const borderStyle = getBorderRadius({
+            customRoundRadius: '4px',
+            overrideBorderStyle: this.borderStyle,
+        });
+        return (h(Host, { key: '8a3d5f66a7fb956dcb063f1b375bfb80856a80c4', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: 'aa01d0b1eebb53587f8d2d344e3b1d01a6a7a683', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '166eef6010570137110f8548c9eb76f32e5616e9', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: '95dc70a3821652e588706b570b40272a5f124b7f', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'ef61adbd2246fbb934a17b31ea62cd5ce4ff88f7', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, 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)))));
+            }, type: "checkbox" }), h("span", { key: '0587bf8dc5ee1477d91360e20d521efd9853c554', class: "checkmark-container" }, h("svg", { key: '3b7abf05f170aa2c4a31f76763c79ce975a543bc', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7d16a3850fbdca9fd3af7fa1f64a1715497b9c7b', "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: '305600e6860aeba8dfa0f3019d51d1bf91498310', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -215,4 +224,13 @@ export class ZonosCheckbox {
                 }
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

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: '8b1ca1b840103589ca7929771a7b828928ef1a64', class: "zonos--elements", style: {
+        return (h(Host, { key: '97800b058d8cb5617f8604c9c5702e2f8e8d943b', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'b1bd07fcc96bd4e900ba945e9f57b27967d3a458', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: 'ceea1729e3b2776700ef8eb0c20cecd65005fa75', 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: 'f5b8b79050e1ebf23355161202a53854a0d9d08d', class: "zonos--tab-progress" }, h("div", { key: '5e9b4a726dd0cc6601a0097652b06759a7bba1fe', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: '793ff1a1712c7fcdd309b58ce69f90e8ff14bfa7', class: "zonos--tab-progress" }, h("div", { key: '8fd846cade13695c42d8006427c4d7fd667edc37', 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: 'ec163c2c73f38e479ba22bb3bea5dbe2f156170b', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '514e75d41d29d70b4ca60230288ae183200b1e12', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: 'ab8b73ff44968d8e2f3dcf75439b09da36fdfb22' }, h("iframe", { key: '0b6d3518382c4c17a6eacb07c1617e84c7301c39', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '752d9054dadf8905e22cfcca81bb966c2d3ce8d3' }))));
+            } }, h("div", { key: '068aee1d13bde4c83ea8582b34844da7452c907c' }, h("iframe", { key: 'b22fd8ad898a098c244cb817dc6951854505efca', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'b54783376005085e379c7b8d43218ead1bf8e8ac' }))));
     }
     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: '4ac4ac37704300786a6a4b3668b1608cf9c2fd96', class: "zonos--elements", style: {
+        return (h(Host, { key: '1b37f326e23e3afaba1428cc23add2e5c425f0b9', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, 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 })))))))));
+            } }, h("div", { key: '966ab933f1bcd754e64fc43dc2013f6cde0f043b', class: "zonos--country-select" }, h("zonos-v-stack", { key: '77d6412871658e9fc8e59df130d3b95df68c5e0b', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '17d0413090d9637aa17234d19a3549b9828a3a86', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '08aa6bd77273095d0b1753c6b423a283b638cc69', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'e1e770226aa2ad9c74681d8291797ff676217f09', 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;
 }

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: '197958ea99ffdb3cfc291144129c20b01fdd8b11', class: "zonos--elements", style: {
+        return (h(Host, { key: 'c2cec226eb9236205d0c4b234bb393e4663d982f', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, 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 }))))));
+            } }, this.message && (h("zonos-card", { key: '51814b00b14061891914753a950b6a3dc852c0f0', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '4f7298eb552d9f0e1b6ded333c298df3d4fbbee2', class: "zonos--flex-message" }, h("zonos-icon", { key: '0a1fb171e1365a845e1e0855466058ced6c57f12', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'dd714a4f1fd3e1ebe55586c5c8c6941928eb2862', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,8 +41,8 @@
 :host .zonos--backdrop {
   width: 100vw;
   height: 100vh;
-  left: 0px;
-  top: 0px;
+  left: 0;
+  top: 0;
   background: var(--amino-backdrop-color);
   z-index: -999;
   opacity: 0;
@@ -59,7 +59,7 @@
   align-items: center;
   justify-content: center;
   z-index: 10002;
-  background: white;
+  background: var(--amino-gray-0);
   border-radius: var(--border-radius, var(--amino-radius-10));
 }
 :host .zonos--dialog-layout {
@@ -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

@@ -46,8 +46,10 @@ export class ZonosDialog {
         else {
             document.body.style.overflow = 'auto';
         }
-        const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { key: 'cfa43ca3e1e64bbc9fb81dd35f07b5a2a57ef5a7', class: classes([
+        const borderStyle = getBorderRadius({
+            overrideBorderStyle: this.borderStyle,
+        });
+        return (h(Host, { key: '48eb2701a74a7973d3502fd1fdc65ce85a6d71ed', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -58,10 +60,10 @@ export class ZonosDialog {
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, 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([
+            } }, h("div", { key: 'b408d792740d8854bab8ea60bd50ce894a75a836', class: "zonos--backdrop" }), h("div", { key: '04affcf48e0b209fa8dacc74039dad536ed9cd9b', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'c615792a60b2fa51a74af265b7c944a64e9ff18d', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '78d3b571f75c6037fdd694b4621fb9eae48d8ce0', class: "zonos--loading" }, h("zonos-spinner", { key: 'bd96037d5fe1717ebeae5b1ba27b96aa9ec9253d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'cc057cbed99107d7d234d08d38e67cbf0140dc66', class: "zonos--header" }, this.headerText && (h("h3", { key: '587fff6b04981f1c24b44736b3b40044480f68ba', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '9a1944508996cd8ccb87f68ae175564528af3c4c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'b563c1939c32489b63516cd4dd14df58a32a08cf', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '02c77f819baa6b1a684dfdf02b756ffa1fb55751' })), h("slot", { key: '0b469253c01c418d43d0865ae72d065d2a911aeb', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '39d66d136f630afbac7ced146d3a8ac60d3c9672' })), h("slot", { key: '5bace66c84150024d0203f89fbf8f5c263cb7472', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,176 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--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 {
+  margin: 1px;
+  /**disabled state */
+}
+:host .zonos--label-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  background: var(--amino-input-background);
+  border-radius: var(--border-radius);
+  border: var(--amino-border);
+}
+:host .zonos--label-wrapper:hover {
+  border: 1px solid var(--amino-gray-300);
+}
+:host .zonos--floated-input {
+  box-sizing: border-box;
+  position: relative;
+  padding: 0 16px;
+  outline: none;
+  transition: var(--amino-transition);
+  width: 100%;
+  border-radius: var(--border-radius);
+  background: var(--amino-input-background);
+  border: 0;
+  order: 2;
+  font-weight: 500;
+}
+:host .zonos--floated-input :-internal-autofill-selected {
+  border-radius: var(--amino-radius-6) 0 0 var(--amino-radius-6);
+}
+:host .zonos--floated-input :-internal-autofill-selected + label + div {
+  background-color: #e8f0fe;
+}
+:host .zonos--floated-input.has-label {
+  padding: 16px 4px 8px 16px;
+}
+:host .zonos--floated-input.has-label.has-input-prefix {
+  padding-left: 0;
+}
+:host .zonos--floated-input.has-label.has-input-prefix + .zonos--floated-label::before {
+  margin-left: 0;
+}
+:host .zonos--floated-input:not(.has-label)::placeholder {
+  opacity: var(--amino-opacity-disabled);
+}
+:host .zonos--floated-input::placeholder {
+  transition: var(--amino-transition);
+  opacity: 0;
+}
+:host .zonos--floated-input:focus {
+  outline: none;
+}
+:host .zonos--floated-input:focus + .zonos--floated-label::after {
+  box-shadow: var(--amino-glow-blue);
+}
+:host .zonos--floated-input.has-error + .zonos--floated-label::after {
+  box-shadow: var(--amino-glow-error);
+}
+:host .zonos--floated-input.has-content::placeholder, :host .zonos--floated-input:focus::placeholder {
+  opacity: var(--amino-opacity-disabled);
+}
+:host .zonos--floated-input.has-content + .zonos--floated-label::before, :host .zonos--floated-input:focus + .zonos--floated-label::before {
+  top: 11px;
+  transform: scale(0.8);
+}
+:host .zonos--floated-input:-webkit-autofill, :host .zonos--floated-input:-moz-autofill {
+  background-color: var(--amino-input-background);
+  color: var(--amino-text-color);
+}
+:host .zonos--floated-label {
+  display: block;
+  max-height: 0;
+  pointer-events: none;
+  order: 1;
+}
+:host .zonos--floated-label::before {
+  content: attr(data-label);
+  color: var(--amino-gray-800);
+  position: absolute;
+  font-size: var(--amino-font-size-base);
+  line-height: var(--amino-font-size-base);
+  display: inline-block;
+  filter: blur(0);
+  transform-origin: left top;
+  transition: var(--amino-transition);
+  margin-left: 16px;
+  top: calc(50% - var(--amino-font-size-base) / 2);
+  z-index: 1;
+}
+:host .zonos--floated-label::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--border-radius);
+}
+:host .disabled .zonos--floated-label {
+  pointer-events: inherit;
+}
+:host .disabled .zonos--floated-label::after {
+  cursor: not-allowed;
+  z-index: 1;
+}
+
+:host(.sm) {
+  height: calc(var(--amino-size-sm) - 2px);
+}
+:host(.sm) .zonos--floated-input.has-label {
+  padding-top: 13px;
+  padding-bottom: 0;
+}
+:host(.sm) .zonos--floated-input.has-label:focus + .zonos--floated-label::before, :host(.sm) .zonos--floated-input.has-label.has-content + .zonos--floated-label::before {
+  top: 2px;
+}
+
+:host(.md) {
+  height: calc(var(--amino-size-md) - 2px);
+}
+:host(.md) .zonos--floated-input.has-label {
+  padding-top: 20px;
+}
+:host(.md) .zonos--floated-input.has-label:focus + .zonos--floated-label::before, :host(.md) .zonos--floated-input.has-label.has-content + .zonos--floated-label::before {
+  top: 6px;
+}
+
+:host(.lg) {
+  height: calc(var(--amino-size-lg) - 2px);
+}
+:host(.lg) .zonos--floated-input.has-label:focus + .zonos--floated-label::before, :host(.lg) .zonos--floated-input.has-label.has-content + .zonos--floated-label::before {
+  top: 10px;
+}
+
+:host(.xl) {
+  height: calc(var(--amino-size-xl) - 2px);
+}
+:host(.xl) .zonos--floated-input.has-label {
+  padding-bottom: 2px;
+}