npm - @zonos/elements - Versions diffs - 1.3.5 → 1.3.7-alpha.0 - Mend

@zonos/elements 1.3.5 → 1.3.7-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (411) hide show

package/dist/cjs/{zonos-button_2.cjs.entry.js → zonos-button_3.cjs.entry.js} RENAMED Viewed

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-3ead02fe.js');
-const zonosStore = require('./zonosStore-b88b5671.js');
+const index = require('./index-72767498.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-cd7ef574.js');
+const getBorderRadius = require('./getBorderRadius-834c321d.js');
 const isColorVariable = require('./isColorVariable-41cacd82.js');
-const isDarkColor = require('./isDarkColor-5eda1323.js');
+const isDarkColor = require('./isDarkColor-924e6a7a.js');
 /**
  * Get theme for button text based on background color
@@ -23,7 +23,7 @@ const getButtonTheme = (overrideBackground) => {
     return buttonTheme;
 };
-const zonosButtonCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
+const zonosButtonCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-font-size-s)}}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--amino-radius-4);width:24px}";
 const ZonosButtonStyle0 = zonosButtonCss;
 const ZonosButton = class {
@@ -35,8 +35,7 @@ const ZonosButton = class {
         this.handleSlotChange = () => {
             this.hasContent = true;
         };
-        this.class = '';
-        this.color = undefined;
+        this.buttonColor = undefined;
         this.backgroundColor = undefined;
         this.borderStyle = undefined;
         this.isDisabled = false;
@@ -74,21 +73,21 @@ const ZonosButton = class {
          * 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.color && isColorVariable.isColorVariable(this.color)
-            ? `var(--amino-${this.color})`
-            : this.color;
+        const color = this.buttonColor && isColorVariable.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.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.getBorderRadius(this.borderStyle);
         const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
-        return (index.h(index.Host, { key: 'e1ad2eb31ad09c8671debc2e32d83af21085b912', class: classes.classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        return (index.h(index.Host, { key: '817142c1d229333aee0b38864788346d2749d3d1', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("button", { key: '0a087bf98251899711a71d69a89473479fc78c4f', class: classes.classes([
+            } }, index.h("button", { key: '04bff1f932154f54b4af51b2fac053d40efc354f', class: classes.classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -101,7 +100,7 @@ const ZonosButton = class {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (index.h("div", { class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { color: spinnerColor, size: 16 }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: 'd80e58786f16bff52592a759679290a3a5ed0954', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (index.h("div", { class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: 'fd9bd0e9f89c3c9ab6dc9d0ac7a123542a1f5023', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get watchers() { return {
         "icon": ["iconChangeHandler"]
@@ -109,6 +108,33 @@ const ZonosButton = class {
 };
 ZonosButton.style = ZonosButtonStyle0;
+const zonosIconCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";
+const ZonosIconStyle0 = zonosIconCss;
+const ZonosIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.autoHeight = false;
+        this.iconColor = 'gray-1200';
+        this.content = undefined;
+        this.size = 24;
+    }
+    render() {
+        if (!this.content || !this.el.shadowRoot) {
+            return null;
+        }
+        this.el.shadowRoot.innerHTML = this.content;
+        return (index.h(index.Host, { class: "zonos--elements", style: {
+                '--color': `var(--amino-${this.iconColor})`,
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+                '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
+                '--width': `${this.size}px`,
+            } }));
+    }
+    get el() { return index.getElement(this); }
+};
+ZonosIcon.style = ZonosIconStyle0;
 const zonosSpinnerCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}:host(.black) circle{stroke:var(--amino-spinner-stroke-black)}:host(.black) circle.track{stroke:var(--amino-spinner-track-black)}:host(.white) circle{stroke:var(--amino-spinner-stroke-white)}:host(.white) circle.track{stroke:var(--amino-spinner-track-white)}:host(.info) circle{stroke:var(--amino-blue-600)}:host(.info) circle.track{stroke:var(--amino-blue-100)}:host(.success) circle{stroke:var(--amino-green-600)}:host(.success) circle.track{stroke:var(--amino-green-100)}:host(.danger) circle{stroke:var(--amino-red-600)}:host(.danger) circle.track{stroke:var(--amino-red-100)}:host(.warning) circle{stroke:var(--amino-orange-600)}:host(.warning) circle.track{stroke:var(--amino-orange-100)}";
 const ZonosSpinnerStyle0 = zonosSpinnerCss;
@@ -116,13 +142,13 @@ const ZonosSpinner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.size = 32;
-        this.color = undefined;
+        this.spinnerColor = undefined;
     }
     render() {
         if (!this.el.shadowRoot) {
             return null;
         }
-        return (index.h(index.Host, { class: classes.classes(['zonos--elements', this.color]), style: {
+        return (index.h(index.Host, { class: classes.classes(['zonos--elements', this.spinnerColor]), style: {
                 '--size': `${this.size}px`,
             } }, index.h("svg", { viewBox: "0 0 50 50" }, index.h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), index.h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
     }
@@ -131,4 +157,5 @@ const ZonosSpinner = class {
 ZonosSpinner.style = ZonosSpinnerStyle0;
 exports.zonos_button = ZonosButton;
+exports.zonos_icon = ZonosIcon;
 exports.zonos_spinner = ZonosSpinner;

package/dist/cjs/zonos-card_2.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-3ead02fe.js');
-const zonosStore = require('./zonosStore-b88b5671.js');
+const index = require('./index-72767498.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
 const classes = require('./classes-b7918f56.js');
+const cart = require('./cart-ecc80eb0.js');
+const ILanguage = require('./ILanguage-d247b45b.js');
+require('./isDarkColor-924e6a7a.js');
+require('./getBorderRadius-834c321d.js');
 const zonosCardCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .styled-card{border:var(--amino-border);border-radius:var(--amino-radius-6);padding:var(--spacing, var(--amino-space-24));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)}:host .styled-card .card-header{margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, var(--amino-space-24));border-bottom:var(--amino-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));border-top:var(--amino-border);background:var(--amino-surface-color-secondary);margin-top:var(--spacing, var(--amino-space-24));border-bottom-left-radius:var(--amino-radius-8);border-bottom-right-radius:var(--amino-radius-8);height:var(--footerHeight)}";
 const ZonosCardStyle0 = zonosCardCss;
@@ -13,7 +17,6 @@ const ZonosCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.actions = undefined;
-        this.class = undefined;
         this.footerActions = undefined;
         this.footerContent = undefined;
         this.footerHeight = undefined;
@@ -21,9 +24,9 @@ const ZonosCard = class {
         this.spacing = '24px';
     }
     render() {
-        return (index.h(index.Host, { key: 'f2f7929742862b9806ddc568155e7cddf954252e', style: {
+        return (index.h(index.Host, { key: '8581e04d45e7061bff02485ad9a9a22920b5fe84', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'ce3568d7ded3cfb9acb0f4ff3d4184a17b88f33b', class: classes.classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (index.h("header", { class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { type: "subheader" }, this.label), index.h("h-stack", { spacing: 8 }, this.actions))), index.h("slot", { key: '3cc9f896df1899da73eab80dfbb3aac3a0046956' }), (this.footerActions || this.footerContent) && (index.h("footer", { class: "card-footer", style: {
+            } }, index.h("div", { key: '5e2038438e0885602c2e15808a34d62e86c95035', class: classes.classes(['styled-card']), style: { padding: this.spacing } }, this.label && (index.h("header", { class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { type: "subheader" }, this.label), index.h("h-stack", { spacing: 8 }, this.actions))), index.h("slot", { key: 'b7cbddad1cc08256ae9192349fe5a44302b6d79e' }), (this.footerActions || this.footerContent) && (index.h("footer", { class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
             } }, index.h("div", null, this.footerContent), index.h("h-stack", { spacing: 8 }, this.footerActions))))));
@@ -31,22 +34,33 @@ const ZonosCard = class {
 };
 ZonosCard.style = ZonosCardStyle0;
-const zonosVStackCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
-const ZonosVStackStyle0 = zonosVStackCss;
+const GreenCheckDuotoneIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99996 2.6665C5.05444 2.6665 2.66663 5.05432 2.66663 7.99984C2.66663 10.9454 5.05444 13.3332 7.99996 13.3332C10.9455 13.3332 13.3333 10.9454 13.3333 7.99984C13.3333 5.05432 10.9455 2.6665 7.99996 2.6665Z" fill="#AFF8C3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1403 6.10535C10.3582 6.27488 10.3975 6.58902 10.228 6.80699L8.01055 9.65797C7.76436 9.97449 7.29646 10.0036 7.01291 9.72008L5.81307 8.52024C5.61781 8.32498 5.61781 8.0084 5.81307 7.81314C6.00833 7.61787 6.32492 7.61787 6.52018 7.81314L7.45301 8.74597L9.43862 6.19305C9.60815 5.97508 9.92229 5.93581 10.1403 6.10535Z" fill="#246627"/>
+</svg>
+`;
-const VStack = class {
+const zonosLanguageSelectCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--language-select{width:100%}:host .zonos--language-select .zonos--language-select-content{display:grid;grid-template-columns:repeat(3, minmax(-webkit-max-content, 1fr));grid-template-columns:repeat(3, minmax(max-content, 1fr));padding:var(--amino-space-16);padding-top:var(--amino-space-0)}:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button{display:-ms-flexbox;display:flex;padding:var(--amino-space-8);gap:var(--amino-space-4);-ms-flex-align:center;align-items:center;border-radius:var(--amino-radius-4);cursor:pointer;width:100%;border:none;background:none}:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button:hover{background:var(--amino-gray-100)}@media (max-width: 400px){:host .zonos--language-select .zonos--language-select-content{grid-template-columns:1fr 1fr}}";
+const ZonosLanguageSelectStyle0 = zonosLanguageSelectCss;
+const ZonosLanguageSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.spacing = 24;
-        this.class = '';
+        this.languageSelected = (languageCode) => {
+            // mutate the selected language code in store
+            void cart.localizationStoreUpdateSelectedLocale(languageCode);
+            this.handleOnClose();
+        };
+        this.handleOnClose = () => { };
     }
     render() {
-        return (index.h(index.Host, { key: '2bd82aba32704cc02da767522c39853c6e223297', style: {
+        const { selectedLocale } = cart.localizationStore;
+        return (index.h(index.Host, { key: 'c90288e341c50d113cc63d09e864ddfa346d55a1', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '22afa237aa1ac8a5ab61adcfa7a0ccabad316b28', class: classes.classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '5f2645af6b1f4178cb87248e03e9bb3d1c8201ee' }))));
+            } }, index.h("div", { key: '4dabc3c9ab177e5545942c725490af64cb9608c3', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '95f111f3774a568ea44204858fe503fa7c1915f3', handleOnClose: () => this.handleOnClose(), label: cart.translate('Select a language') }), index.h("div", { key: 'c2634e3b006f3d14c67ee78c0c9befdb21cecc72', class: "zonos--language-select-content" }, ILanguage.languages.map(language => (index.h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, index.h("zonos-text", { color: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
 };
-VStack.style = ZonosVStackStyle0;
+ZonosLanguageSelect.style = ZonosLanguageSelectStyle0;
 exports.zonos_card = ZonosCard;
-exports.zonos_v_stack = VStack;
+exports.zonos_language_select = ZonosLanguageSelect;