@zonos/elements 1.3.11 → 1.3.12-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 (30) hide show
  1. package/dist/cjs/zonos-button_2.cjs.entry.js +10 -17
  2. package/dist/cjs/zonos-cart-items_10.cjs.entry.js +17 -3
  3. package/dist/collection/components/common/zonos-button/zonos-button.css +1 -1
  4. package/dist/collection/components/common/zonos-button/zonos-button.js +10 -16
  5. package/dist/components/zonos-button2.js +10 -17
  6. package/dist/components/zonos-checkout-progress-tabs2.js +16 -1
  7. package/dist/esm/zonos-button_2.entry.js +10 -17
  8. package/dist/esm/zonos-cart-items_10.entry.js +16 -2
  9. package/dist/esm-es5/zonos-button_2.entry.js +1 -1
  10. package/dist/esm-es5/zonos-cart-items_10.entry.js +1 -1
  11. package/dist/scripts/loadZonos.js +1 -1
  12. package/dist/scripts/zonos.js +1 -1
  13. package/dist/scripts/zonosBase.js +1 -1
  14. package/dist/zonos-elements/p-5c9c2973.system.entry.js +1 -0
  15. package/dist/zonos-elements/p-5dbb80df.system.entry.js +1 -0
  16. package/dist/zonos-elements/p-5f662cf2.entry.js +1 -0
  17. package/dist/zonos-elements/p-6e81adba.system.js +1 -1
  18. package/dist/zonos-elements/p-6f5cc827.entry.js +1 -0
  19. package/dist/zonos-elements/zonos-elements.esm.js +1 -1
  20. package/package.json +1 -1
  21. package/dist/cjs/getContrastColor-c72796c6.js +0 -20
  22. package/dist/components/getContrastColor.js +0 -18
  23. package/dist/esm/getContrastColor-5fbc4746.js +0 -18
  24. package/dist/esm-es5/getContrastColor-5fbc4746.js +0 -1
  25. package/dist/zonos-elements/p-145dd34a.system.entry.js +0 -1
  26. package/dist/zonos-elements/p-223d72d8.entry.js +0 -1
  27. package/dist/zonos-elements/p-6484bf31.system.js +0 -1
  28. package/dist/zonos-elements/p-7575a42a.js +0 -1
  29. package/dist/zonos-elements/p-e5b5cbfd.system.entry.js +0 -1
  30. package/dist/zonos-elements/p-fe8de89b.entry.js +0 -1
package/dist/cjs/zonos-button_2.cjs.entry.js CHANGED
@@ -8,7 +8,6 @@ const classes = require('./classes-b7918f56.js');
8
8
  const getBorderRadius = require('./getBorderRadius-4fa738c3.js');
9
9
  const isColorVariable = require('./isColorVariable-fff5e469.js');
10
10
  const isDarkColor = require('./isDarkColor-7faf0a82.js');
11
- const getContrastColor = require('./getContrastColor-c72796c6.js');
12
11
 
13
12
  /**
14
13
  * Get theme for button text based on background color
@@ -37,7 +36,7 @@ const styles = (props) => {
37
36
  }, {});
38
37
  };
39
38
 
40
- 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;border-radius:var(--border-radius, var(--amino-radius-10))}: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));margin:1px;}: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(--subtle-hover-color, 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}";
39
+ 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;border-radius:var(--border-radius, var(--amino-radius-10))}: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));margin:1px;}: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-500)}: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}";
41
40
  const ZonosButtonStyle0 = zonosButtonCss;
42
41
 
43
42
  const ZonosButton = class {
@@ -95,24 +94,18 @@ const ZonosButton = class {
95
94
  // only set theme for button to change text color if variant is standard and override background is set
96
95
  const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
97
96
  const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
98
- const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
99
- return (index.h(index.Host, { key: '75f5e6900c6e0eb468ea639460d55f251b580200', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
97
+ const backgroundActualColor = isColorVariable.isColorVariable(overrideBackground) && overrideBackground
98
+ ? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
99
+ : overrideBackground;
100
+ const spinnerColor = backgroundActualColor && isDarkColor.isDarkColor(backgroundActualColor)
101
+ ? 'white'
102
+ : 'black';
103
+ return (index.h(index.Host, { key: '284820ccca8e757e0223e3cc5fb13b7ed89a1eba', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
100
104
  '--background-color': overrideBackground,
101
105
  '--border-radius': borderStyle,
102
106
  '--color': color,
103
107
  '--font-family': zonosStore.zonosStoreFontFamily(),
104
- '--subtle-hover-color': this.buttonColor
105
- ? // for the subtle variant, the hover background should contrast with the text color
106
- getContrastColor.getContrastColor({
107
- backgroundColor: 'white',
108
- color: isColorVariable.isColorVariable(this.buttonColor)
109
- ? window
110
- .getComputedStyle(this.ele)
111
- .getPropertyValue(`--amino-${this.buttonColor}`)
112
- : this.buttonColor,
113
- })
114
- : undefined,
115
- }) }, index.h("button", { key: 'fd1323ac24be622182f9b60d8b026fb0ea47fa40', class: classes.classes([
108
+ }) }, index.h("button", { key: '635799fed660c88d0a2a3f3b6f5490149bb5edc3', class: classes.classes([
116
109
  this.hasIcon && 'has-icon',
117
110
  this.hasContent && 'has-content',
118
111
  this.noBackground && 'no-background',
@@ -125,7 +118,7 @@ const ZonosButton = class {
125
118
  overrideBackground &&
126
119
  variant === 'standard' &&
127
120
  'override-background',
128
- ]), 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: '92706fef0545ba24e3f943d731bffa1e844ec154', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
121
+ ]), 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: '35af5f49e65bb8cf93d538fa741302b41887da67', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
129
122
  }
130
123
  get ele() { return index.getElement(this); }
131
124
  static get watchers() { return {
package/dist/cjs/zonos-cart-items_10.cjs.entry.js CHANGED
@@ -10,9 +10,8 @@ const getBorderRadius = require('./getBorderRadius-4fa738c3.js');
10
10
  const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
11
11
  const classes = require('./classes-b7918f56.js');
12
12
  const ILanguage = require('./ILanguage-d247b45b.js');
13
- const getContrastColor = require('./getContrastColor-c72796c6.js');
13
+ const isDarkColor = require('./isDarkColor-7faf0a82.js');
14
14
  const isColorVariable = require('./isColorVariable-fff5e469.js');
15
- require('./isDarkColor-7faf0a82.js');
16
15
 
17
16
  const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
18
17
  ? `${new Intl.NumberFormat('en-US', {
@@ -349,6 +348,21 @@ const ZonosCheckoutPayment = class {
349
348
  };
350
349
  ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
351
350
 
351
+ const getContrastColor = ({ backgroundColor, color, }) => {
352
+ // get readibility of the color
353
+ const colorReadibilityValue = isDarkColor.tinycolor.readability(color, backgroundColor);
354
+ if (colorReadibilityValue > 2.5) {
355
+ // no need to change the color if it's already contrast enough
356
+ return color;
357
+ }
358
+ if (isDarkColor.isDarkColor(color)) {
359
+ return '#ffffff';
360
+ }
361
+ else {
362
+ return isDarkColor.tinycolor(color).darken(25).toHexString();
363
+ }
364
+ };
365
+
352
366
  const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
353
367
  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.289 7.40424C18.618 7.65585 18.6808 8.12656 18.4291 8.4556L11.9291 16.9556C11.7978 17.1273 11.5988 17.234 11.383 17.2484C11.1673 17.2627 10.9559 17.1832 10.803 17.0303L6.80304 13.0303C6.51015 12.7374 6.51015 12.2626 6.80304 11.9697C7.09594 11.6768 7.57081 11.6768 7.8637 11.9697L11.258 15.3639L17.2376 7.54442C17.4892 7.21539 17.9599 7.15263 18.289 7.40424Z" fill="currentColor"/>
354
368
  </svg>
@@ -405,7 +419,7 @@ const ZonosCheckoutProgressTabs = class {
405
419
  const labelSelectedColor = this.tabColor || zonosStore.zonosStore.appearance.colorSecondary;
406
420
  // If the background color and the tab color are not contrat enough, increase the contrast of the label color
407
421
  const contrastLabelColor = this.backgroundColor && labelSelectedColor
408
- ? getContrastColor.getContrastColor({
422
+ ? getContrastColor({
409
423
  backgroundColor: isColorVariable.isColorVariable(this.backgroundColor)
410
424
  ? window
411
425
  .getComputedStyle(this.ele)
package/dist/collection/components/common/zonos-button/zonos-button.css CHANGED
@@ -228,7 +228,7 @@
228
228
  outline: none;
229
229
  }
230
230
  :host button:not(.override-background).subtle:not([disabled]):hover {
231
- background: var(--subtle-hover-color, var(--amino-gray-100));
231
+ background: var(--amino-gray-500);
232
232
  }
233
233
  :host button:not(.override-background).subtle:not([disabled]):active {
234
234
  background: var(--amino-gray-200);
package/dist/collection/components/common/zonos-button/zonos-button.js CHANGED
@@ -3,8 +3,8 @@ import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
3
3
  import { classes } from "../../utils/classes";
4
4
  import { getBorderRadius } from "../../utils/getBorderRadius";
5
5
  import { getButtonTheme } from "../../utils/getButtonTheme";
6
- import { getContrastColor } from "../../utils/getContrastColor";
7
6
  import { isColorVariable } from "../../utils/isColorVariable";
7
+ import { isDarkColor } from "../../utils/isDarkColor";
8
8
  import { styles } from "../../utils/styles";
9
9
  export class ZonosButton {
10
10
  constructor() {
@@ -60,24 +60,18 @@ export class ZonosButton {
60
60
  // only set theme for button to change text color if variant is standard and override background is set
61
61
  const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
62
62
  const borderStyle = getBorderRadius(this.borderStyle);
63
- const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
64
- return (h(Host, { key: '75f5e6900c6e0eb468ea639460d55f251b580200', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
63
+ const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
64
+ ? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
65
+ : overrideBackground;
66
+ const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
67
+ ? 'white'
68
+ : 'black';
69
+ return (h(Host, { key: '284820ccca8e757e0223e3cc5fb13b7ed89a1eba', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
65
70
  '--background-color': overrideBackground,
66
71
  '--border-radius': borderStyle,
67
72
  '--color': color,
68
73
  '--font-family': zonosStoreFontFamily(),
69
- '--subtle-hover-color': this.buttonColor
70
- ? // for the subtle variant, the hover background should contrast with the text color
71
- getContrastColor({
72
- backgroundColor: 'white',
73
- color: isColorVariable(this.buttonColor)
74
- ? window
75
- .getComputedStyle(this.ele)
76
- .getPropertyValue(`--amino-${this.buttonColor}`)
77
- : this.buttonColor,
78
- })
79
- : undefined,
80
- }) }, h("button", { key: 'fd1323ac24be622182f9b60d8b026fb0ea47fa40', class: classes([
74
+ }) }, h("button", { key: '635799fed660c88d0a2a3f3b6f5490149bb5edc3', class: classes([
81
75
  this.hasIcon && 'has-icon',
82
76
  this.hasContent && 'has-content',
83
77
  this.noBackground && 'no-background',
@@ -90,7 +84,7 @@ export class ZonosButton {
90
84
  overrideBackground &&
91
85
  variant === 'standard' &&
92
86
  'override-background',
93
- ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '92706fef0545ba24e3f943d731bffa1e844ec154', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
87
+ ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '35af5f49e65bb8cf93d538fa741302b41887da67', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
94
88
  }
95
89
  static get is() { return "zonos-button"; }
96
90
  static get encapsulation() { return "shadow"; }
package/dist/components/zonos-button2.js CHANGED
@@ -4,7 +4,6 @@ import { c as classes } from './classes.js';
4
4
  import { g as getBorderRadius } from './getBorderRadius.js';
5
5
  import { i as isColorVariable } from './isColorVariable.js';
6
6
  import { i as isDarkColor } from './isDarkColor.js';
7
- import { g as getContrastColor } from './getContrastColor.js';
8
7
  import { d as defineCustomElement$1 } from './zonos-spinner2.js';
9
8
 
10
9
  /**
@@ -34,7 +33,7 @@ const styles = (props) => {
34
33
  }, {});
35
34
  };
36
35
 
37
- 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;border-radius:var(--border-radius, var(--amino-radius-10))}: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));margin:1px;}: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(--subtle-hover-color, 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}";
36
+ 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;border-radius:var(--border-radius, var(--amino-radius-10))}: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));margin:1px;}: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-500)}: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}";
38
37
  const ZonosButtonStyle0 = zonosButtonCss;
39
38
 
40
39
  const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends HTMLElement {
@@ -94,24 +93,18 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
94
93
  // only set theme for button to change text color if variant is standard and override background is set
95
94
  const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
96
95
  const borderStyle = getBorderRadius(this.borderStyle);
97
- const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
98
- return (h(Host, { key: '75f5e6900c6e0eb468ea639460d55f251b580200', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
96
+ const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
97
+ ? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
98
+ : overrideBackground;
99
+ const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
100
+ ? 'white'
101
+ : 'black';
102
+ return (h(Host, { key: '284820ccca8e757e0223e3cc5fb13b7ed89a1eba', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
99
103
  '--background-color': overrideBackground,
100
104
  '--border-radius': borderStyle,
101
105
  '--color': color,
102
106
  '--font-family': zonosStoreFontFamily(),
103
- '--subtle-hover-color': this.buttonColor
104
- ? // for the subtle variant, the hover background should contrast with the text color
105
- getContrastColor({
106
- backgroundColor: 'white',
107
- color: isColorVariable(this.buttonColor)
108
- ? window
109
- .getComputedStyle(this.ele)
110
- .getPropertyValue(`--amino-${this.buttonColor}`)
111
- : this.buttonColor,
112
- })
113
- : undefined,
114
- }) }, h("button", { key: 'fd1323ac24be622182f9b60d8b026fb0ea47fa40', class: classes([
107
+ }) }, h("button", { key: '635799fed660c88d0a2a3f3b6f5490149bb5edc3', class: classes([
115
108
  this.hasIcon && 'has-icon',
116
109
  this.hasContent && 'has-content',
117
110
  this.noBackground && 'no-background',
@@ -124,7 +117,7 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
124
117
  overrideBackground &&
125
118
  variant === 'standard' &&
126
119
  'override-background',
127
- ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '92706fef0545ba24e3f943d731bffa1e844ec154', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
120
+ ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '35af5f49e65bb8cf93d538fa741302b41887da67', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
128
121
  }
129
122
  get ele() { return this; }
130
123
  static get watchers() { return {
package/dist/components/zonos-checkout-progress-tabs2.js CHANGED
@@ -2,11 +2,26 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
2
2
  import { c as cartStore, t as translate } from './stripe.js';
3
3
  import { z as zonosStore } from './zonosStore.js';
4
4
  import { c as classes } from './classes.js';
5
- import { g as getContrastColor } from './getContrastColor.js';
5
+ import { t as tinycolor, i as isDarkColor } from './isDarkColor.js';
6
6
  import { i as isColorVariable } from './isColorVariable.js';
7
7
  import { d as defineCustomElement$2 } from './zonos-icon2.js';
8
8
  import { d as defineCustomElement$1 } from './zonos-text2.js';
9
9
 
10
+ const getContrastColor = ({ backgroundColor, color, }) => {
11
+ // get readibility of the color
12
+ const colorReadibilityValue = tinycolor.readability(color, backgroundColor);
13
+ if (colorReadibilityValue > 2.5) {
14
+ // no need to change the color if it's already contrast enough
15
+ return color;
16
+ }
17
+ if (isDarkColor(color)) {
18
+ return '#ffffff';
19
+ }
20
+ else {
21
+ return tinycolor(color).darken(25).toHexString();
22
+ }
23
+ };
24
+
10
25
  const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
11
26
  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.289 7.40424C18.618 7.65585 18.6808 8.12656 18.4291 8.4556L11.9291 16.9556C11.7978 17.1273 11.5988 17.234 11.383 17.2484C11.1673 17.2627 10.9559 17.1832 10.803 17.0303L6.80304 13.0303C6.51015 12.7374 6.51015 12.2626 6.80304 11.9697C7.09594 11.6768 7.57081 11.6768 7.8637 11.9697L11.258 15.3639L17.2376 7.54442C17.4892 7.21539 17.9599 7.15263 18.289 7.40424Z" fill="currentColor"/>
12
27
  </svg>
package/dist/esm/zonos-button_2.entry.js CHANGED
@@ -4,7 +4,6 @@ import { c as classes } from './classes-0d95c529.js';
4
4
  import { g as getBorderRadius } from './getBorderRadius-a89e45fb.js';
5
5
  import { i as isColorVariable } from './isColorVariable-fbf2d80d.js';
6
6
  import { i as isDarkColor } from './isDarkColor-6bf71e51.js';
7
- import { g as getContrastColor } from './getContrastColor-5fbc4746.js';
8
7
 
9
8
  /**
10
9
  * Get theme for button text based on background color
@@ -33,7 +32,7 @@ const styles = (props) => {
33
32
  }, {});
34
33
  };
35
34
 
36
- 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;border-radius:var(--border-radius, var(--amino-radius-10))}: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));margin:1px;}: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(--subtle-hover-color, 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}";
35
+ 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;border-radius:var(--border-radius, var(--amino-radius-10))}: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));margin:1px;}: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-500)}: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}";
37
36
  const ZonosButtonStyle0 = zonosButtonCss;
38
37
 
39
38
  const ZonosButton = class {
@@ -91,24 +90,18 @@ const ZonosButton = class {
91
90
  // only set theme for button to change text color if variant is standard and override background is set
92
91
  const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
93
92
  const borderStyle = getBorderRadius(this.borderStyle);
94
- const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
95
- return (h(Host, { key: '75f5e6900c6e0eb468ea639460d55f251b580200', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
93
+ const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
94
+ ? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
95
+ : overrideBackground;
96
+ const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
97
+ ? 'white'
98
+ : 'black';
99
+ return (h(Host, { key: '284820ccca8e757e0223e3cc5fb13b7ed89a1eba', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
96
100
  '--background-color': overrideBackground,
97
101
  '--border-radius': borderStyle,
98
102
  '--color': color,
99
103
  '--font-family': zonosStoreFontFamily(),
100
- '--subtle-hover-color': this.buttonColor
101
- ? // for the subtle variant, the hover background should contrast with the text color
102
- getContrastColor({
103
- backgroundColor: 'white',
104
- color: isColorVariable(this.buttonColor)
105
- ? window
106
- .getComputedStyle(this.ele)
107
- .getPropertyValue(`--amino-${this.buttonColor}`)
108
- : this.buttonColor,
109
- })
110
- : undefined,
111
- }) }, h("button", { key: 'fd1323ac24be622182f9b60d8b026fb0ea47fa40', class: classes([
104
+ }) }, h("button", { key: '635799fed660c88d0a2a3f3b6f5490149bb5edc3', class: classes([
112
105
  this.hasIcon && 'has-icon',
113
106
  this.hasContent && 'has-content',
114
107
  this.noBackground && 'no-background',
@@ -121,7 +114,7 @@ const ZonosButton = class {
121
114
  overrideBackground &&
122
115
  variant === 'standard' &&
123
116
  'override-background',
124
- ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '92706fef0545ba24e3f943d731bffa1e844ec154', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
117
+ ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '35af5f49e65bb8cf93d538fa741302b41887da67', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
125
118
  }
126
119
  get ele() { return getElement(this); }
127
120
  static get watchers() { return {
package/dist/esm/zonos-cart-items_10.entry.js CHANGED
@@ -6,9 +6,8 @@ import { g as getBorderRadius } from './getBorderRadius-a89e45fb.js';
6
6
  import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
7
7
  import { c as classes } from './classes-0d95c529.js';
8
8
  import { l as languages } from './ILanguage-97790bee.js';
9
- import { g as getContrastColor } from './getContrastColor-5fbc4746.js';
9
+ import { t as tinycolor, i as isDarkColor } from './isDarkColor-6bf71e51.js';
10
10
  import { i as isColorVariable } from './isColorVariable-fbf2d80d.js';
11
- import './isDarkColor-6bf71e51.js';
12
11
 
13
12
  const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
14
13
  ? `${new Intl.NumberFormat('en-US', {
@@ -345,6 +344,21 @@ const ZonosCheckoutPayment = class {
345
344
  };
346
345
  ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
347
346
 
347
+ const getContrastColor = ({ backgroundColor, color, }) => {
348
+ // get readibility of the color
349
+ const colorReadibilityValue = tinycolor.readability(color, backgroundColor);
350
+ if (colorReadibilityValue > 2.5) {
351
+ // no need to change the color if it's already contrast enough
352
+ return color;
353
+ }
354
+ if (isDarkColor(color)) {
355
+ return '#ffffff';
356
+ }
357
+ else {
358
+ return tinycolor(color).darken(25).toHexString();
359
+ }
360
+ };
361
+
348
362
  const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
349
363
  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.289 7.40424C18.618 7.65585 18.6808 8.12656 18.4291 8.4556L11.9291 16.9556C11.7978 17.1273 11.5988 17.234 11.383 17.2484C11.1673 17.2627 10.9559 17.1832 10.803 17.0303L6.80304 13.0303C6.51015 12.7374 6.51015 12.2626 6.80304 11.9697C7.09594 11.6768 7.57081 11.6768 7.8637 11.9697L11.258 15.3639L17.2376 7.54442C17.4892 7.21539 17.9599 7.15263 18.289 7.40424Z" fill="currentColor"/>
350
364
  </svg>
package/dist/esm-es5/zonos-button_2.entry.js CHANGED
@@ -1 +1 @@
1
- import{r as registerInstance,h,H as Host,d as getElement}from"./index-dd40cc85.js";import{z as zonosStore,d as zonosStoreFontFamily}from"./zonosStore-c4c45591.js";import{c as classes}from"./classes-0d95c529.js";import{g as getBorderRadius}from"./getBorderRadius-a89e45fb.js";import{i as isColorVariable}from"./isColorVariable-fbf2d80d.js";import{i as isDarkColor}from"./isDarkColor-6bf71e51.js";import{g as getContrastColor}from"./getContrastColor-5fbc4746.js";var getButtonTheme=function(o){var t=o||zonosStore.appearance.colorSecondary;var r=t&&isColorVariable(t)?"var(--amino-".concat(t,")"):t;var n=r&&isDarkColor(r)?"DARK":"LIGHT";return n};var styles=function(o){return Object.entries(o).reduce((function(o,t){var r=t[0],n=t[1];if(n){o[r]=n}return o}),{})};var 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;border-radius:var(--border-radius, var(--amino-radius-10))}: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));margin:1px;}: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(--subtle-hover-color, 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}";var ZonosButtonStyle0=zonosButtonCss;var ZonosButton=function(){function o(o){var t=this;registerInstance(this,o);this.handleSlotChange=function(){t.hasContent=true};this.buttonColor=undefined;this.backgroundColor=undefined;this.borderStyle=undefined;this.isDisabled=false;this.icon=null;this.iconRight=false;this.size="sm";this.variant="standard";this.noBackground=false;this.noPaddingLeft=false;this.noPaddingRight=false;this.loading=false;this.theme=undefined;this.hasIcon=!!this.icon;this.hasContent=false}o.prototype.iconChangeHandler=function(){this.hasIcon=!!this.icon};o.prototype.clickHandler=function(o){if(this.loading||this.isDisabled){o.preventDefault();o.stopPropagation()}};o.prototype.componentWillLoad=function(){this.iconChangeHandler()};o.prototype.render=function(){var o=this.loading||this.isDisabled;var t=this.variant||"standard";var r=this.buttonColor&&isColorVariable(this.buttonColor)?"var(--amino-".concat(this.buttonColor,")"):this.buttonColor;var n=this.backgroundColor||zonosStore.appearance.colorSecondary;var a=t==="standard"?getButtonTheme(n):undefined;var e=getBorderRadius(this.borderStyle);var s=a==="LIGHT"?"white":"black";return h(Host,{key:"75f5e6900c6e0eb468ea639460d55f251b580200",class:classes(["zonos--elements"]),"data-theme":this.theme||a,disabled:o,style:styles({"--background-color":n,"--border-radius":e,"--color":r,"--font-family":zonosStoreFontFamily(),"--subtle-hover-color":this.buttonColor?getContrastColor({backgroundColor:"white",color:isColorVariable(this.buttonColor)?window.getComputedStyle(this.ele).getPropertyValue("--amino-".concat(this.buttonColor)):this.buttonColor}):undefined})},h("button",{key:"fd1323ac24be622182f9b60d8b026fb0ea47fa40",class:classes([this.hasIcon&&"has-icon",this.hasContent&&"has-content",this.noBackground&&"no-background",this.noPaddingLeft&&"no-padding-left",this.noPaddingRight&&"no-padding-right",this.iconRight&&"icon-right",t,this.size,n&&t==="standard"&&"override-background"]),disabled:o},this.loading&&h("div",{class:"zonos--spinner-wrapper"},h("zonos-spinner",{size:16,spinnerColor:s})),!this.loading&&!this.iconRight&&this.icon,h("slot",{key:"92706fef0545ba24e3f943d731bffa1e844ec154",onSlotchange:this.handleSlotChange}),!this.loading&&this.iconRight&&this.icon))};Object.defineProperty(o.prototype,"ele",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(o,"watchers",{get:function(){return{icon:["iconChangeHandler"]}},enumerable:false,configurable:true});return o}();ZonosButton.style=ZonosButtonStyle0;var 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)}";var ZonosSpinnerStyle0=zonosSpinnerCss;var ZonosSpinner=function(){function o(o){registerInstance(this,o);this.size=32;this.spinnerColor=undefined}o.prototype.render=function(){if(!this.el.shadowRoot){return null}return h(Host,{class:classes(["zonos--elements",this.spinnerColor]),style:{"--size":"".concat(this.size,"px")}},h("svg",{viewBox:"0 0 50 50"},h("circle",{class:"track",cx:"25",cy:"25",fill:"none",id:"loading-spinner-circle",r:"20","stroke-width":"5"}),h("circle",{cx:"25",cy:"25",fill:"none",id:"loading-spinner-circle",r:"20","stroke-width":"5"})))};Object.defineProperty(o.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return o}();ZonosSpinner.style=ZonosSpinnerStyle0;export{ZonosButton as zonos_button,ZonosSpinner as zonos_spinner};
1
+ import{r as registerInstance,h,H as Host,d as getElement}from"./index-dd40cc85.js";import{z as zonosStore,d as zonosStoreFontFamily}from"./zonosStore-c4c45591.js";import{c as classes}from"./classes-0d95c529.js";import{g as getBorderRadius}from"./getBorderRadius-a89e45fb.js";import{i as isColorVariable}from"./isColorVariable-fbf2d80d.js";import{i as isDarkColor}from"./isDarkColor-6bf71e51.js";var getButtonTheme=function(o){var r=o||zonosStore.appearance.colorSecondary;var t=r&&isColorVariable(r)?"var(--amino-".concat(r,")"):r;var n=t&&isDarkColor(t)?"DARK":"LIGHT";return n};var styles=function(o){return Object.entries(o).reduce((function(o,r){var t=r[0],n=r[1];if(n){o[t]=n}return o}),{})};var 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;border-radius:var(--border-radius, var(--amino-radius-10))}: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));margin:1px;}: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-500)}: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}";var ZonosButtonStyle0=zonosButtonCss;var ZonosButton=function(){function o(o){var r=this;registerInstance(this,o);this.handleSlotChange=function(){r.hasContent=true};this.buttonColor=undefined;this.backgroundColor=undefined;this.borderStyle=undefined;this.isDisabled=false;this.icon=null;this.iconRight=false;this.size="sm";this.variant="standard";this.noBackground=false;this.noPaddingLeft=false;this.noPaddingRight=false;this.loading=false;this.theme=undefined;this.hasIcon=!!this.icon;this.hasContent=false}o.prototype.iconChangeHandler=function(){this.hasIcon=!!this.icon};o.prototype.clickHandler=function(o){if(this.loading||this.isDisabled){o.preventDefault();o.stopPropagation()}};o.prototype.componentWillLoad=function(){this.iconChangeHandler()};o.prototype.render=function(){var o=this.loading||this.isDisabled;var r=this.variant||"standard";var t=this.buttonColor&&isColorVariable(this.buttonColor)?"var(--amino-".concat(this.buttonColor,")"):this.buttonColor;var n=this.backgroundColor||zonosStore.appearance.colorSecondary;var a=r==="standard"?getButtonTheme(n):undefined;var e=getBorderRadius(this.borderStyle);var i=isColorVariable(n)&&n?window.getComputedStyle(this.ele).getPropertyValue(n):n;var s=i&&isDarkColor(i)?"white":"black";return h(Host,{key:"284820ccca8e757e0223e3cc5fb13b7ed89a1eba",class:classes(["zonos--elements"]),"data-theme":this.theme||a,disabled:o,style:styles({"--background-color":n,"--border-radius":e,"--color":t,"--font-family":zonosStoreFontFamily()})},h("button",{key:"635799fed660c88d0a2a3f3b6f5490149bb5edc3",class:classes([this.hasIcon&&"has-icon",this.hasContent&&"has-content",this.noBackground&&"no-background",this.noPaddingLeft&&"no-padding-left",this.noPaddingRight&&"no-padding-right",this.iconRight&&"icon-right",r,this.size,n&&r==="standard"&&"override-background"]),disabled:o},this.loading&&h("div",{class:"zonos--spinner-wrapper"},h("zonos-spinner",{size:16,spinnerColor:s})),!this.loading&&!this.iconRight&&this.icon,h("slot",{key:"35af5f49e65bb8cf93d538fa741302b41887da67",onSlotchange:this.handleSlotChange}),!this.loading&&this.iconRight&&this.icon))};Object.defineProperty(o.prototype,"ele",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(o,"watchers",{get:function(){return{icon:["iconChangeHandler"]}},enumerable:false,configurable:true});return o}();ZonosButton.style=ZonosButtonStyle0;var 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)}";var ZonosSpinnerStyle0=zonosSpinnerCss;var ZonosSpinner=function(){function o(o){registerInstance(this,o);this.size=32;this.spinnerColor=undefined}o.prototype.render=function(){if(!this.el.shadowRoot){return null}return h(Host,{class:classes(["zonos--elements",this.spinnerColor]),style:{"--size":"".concat(this.size,"px")}},h("svg",{viewBox:"0 0 50 50"},h("circle",{class:"track",cx:"25",cy:"25",fill:"none",id:"loading-spinner-circle",r:"20","stroke-width":"5"}),h("circle",{cx:"25",cy:"25",fill:"none",id:"loading-spinner-circle",r:"20","stroke-width":"5"})))};Object.defineProperty(o.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return o}();ZonosSpinner.style=ZonosSpinnerStyle0;export{ZonosButton as zonos_button,ZonosSpinner as zonos_spinner};