@zonos/elements 1.3.11 → 1.3.12-alpha.1

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 (39) hide show
  1. package/dist/cjs/zonos-address_4.cjs.entry.js +5 -1
  2. package/dist/cjs/zonos-button_2.cjs.entry.js +10 -17
  3. package/dist/cjs/zonos-cart-items_10.cjs.entry.js +17 -3
  4. package/dist/collection/components/common/zonos-button/zonos-button.css +1 -1
  5. package/dist/collection/components/common/zonos-button/zonos-button.js +10 -16
  6. package/dist/collection/components/utils/containsNonLatinChars.js +5 -1
  7. package/dist/components/zonos-address2.js +5 -1
  8. package/dist/components/zonos-button2.js +10 -17
  9. package/dist/components/zonos-checkout-progress-tabs2.js +16 -1
  10. package/dist/esm/zonos-address_4.entry.js +5 -1
  11. package/dist/esm/zonos-button_2.entry.js +10 -17
  12. package/dist/esm/zonos-cart-items_10.entry.js +16 -2
  13. package/dist/esm-es5/zonos-address_4.entry.js +1 -1
  14. package/dist/esm-es5/zonos-button_2.entry.js +1 -1
  15. package/dist/esm-es5/zonos-cart-items_10.entry.js +1 -1
  16. package/dist/scripts/loadZonos.js +1 -1
  17. package/dist/scripts/zonos.js +1 -1
  18. package/dist/scripts/zonosBase.js +1 -1
  19. package/dist/zonos-elements/p-0679e872.system.entry.js +1 -0
  20. package/dist/zonos-elements/p-09dbb0e9.entry.js +1 -0
  21. package/dist/zonos-elements/p-5c9c2973.system.entry.js +1 -0
  22. package/dist/zonos-elements/p-5dbb80df.system.entry.js +1 -0
  23. package/dist/zonos-elements/p-5f662cf2.entry.js +1 -0
  24. package/dist/zonos-elements/p-6e81adba.system.js +1 -1
  25. package/dist/zonos-elements/p-6f5cc827.entry.js +1 -0
  26. package/dist/zonos-elements/zonos-elements.esm.js +1 -1
  27. package/package.json +1 -1
  28. package/dist/cjs/getContrastColor-c72796c6.js +0 -20
  29. package/dist/components/getContrastColor.js +0 -18
  30. package/dist/esm/getContrastColor-5fbc4746.js +0 -18
  31. package/dist/esm-es5/getContrastColor-5fbc4746.js +0 -1
  32. package/dist/zonos-elements/p-145dd34a.system.entry.js +0 -1
  33. package/dist/zonos-elements/p-223d72d8.entry.js +0 -1
  34. package/dist/zonos-elements/p-397d8268.entry.js +0 -1
  35. package/dist/zonos-elements/p-6484bf31.system.js +0 -1
  36. package/dist/zonos-elements/p-7575a42a.js +0 -1
  37. package/dist/zonos-elements/p-93dafeea.system.entry.js +0 -1
  38. package/dist/zonos-elements/p-e5b5cbfd.system.entry.js +0 -1
  39. package/dist/zonos-elements/p-fe8de89b.entry.js +0 -1
@@ -15,12 +15,16 @@ const isDarkColor = require('./isDarkColor-7faf0a82.js');
15
15
  * @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
16
16
  */
17
17
  const containsNonLatinChars = (params) => {
18
+ const specialCharacters = /[ʼˮ՚ߴߵ']{1}/u;
18
19
  /**
19
20
  * This regex matches any character that is not a latin character, punctuation, symbol, number, separator, control, or mark
20
21
  * I limited the character found to 1 in the regex, so that we can return early if we find any non-latin character
21
22
  **/
22
23
  const nonLatinRegex = /[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;
23
- const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
24
+ const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) &&
25
+ // allow special characters like web apostrophe and quotation mark
26
+ !specialCharacters.test(value)
27
+ ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
24
28
  return nonLatinValueList;
25
29
  };
26
30
 
@@ -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 {
@@ -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)
@@ -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);
@@ -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"; }
@@ -3,11 +3,15 @@
3
3
  * @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
4
4
  */
5
5
  export const containsNonLatinChars = (params) => {
6
+ const specialCharacters = /[ʼˮ՚ߴߵ']{1}/u;
6
7
  /**
7
8
  * This regex matches any character that is not a latin character, punctuation, symbol, number, separator, control, or mark
8
9
  * I limited the character found to 1 in the regex, so that we can return early if we find any non-latin character
9
10
  **/
10
11
  const nonLatinRegex = /[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;
11
- const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
12
+ const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) &&
13
+ // allow special characters like web apostrophe and quotation mark
14
+ !specialCharacters.test(value)
15
+ ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
12
16
  return nonLatinValueList;
13
17
  };
@@ -10,12 +10,16 @@ import { d as defineCustomElement$1 } from './zonos-text2.js';
10
10
  * @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
11
11
  */
12
12
  const containsNonLatinChars = (params) => {
13
+ const specialCharacters = /[ʼˮ՚ߴߵ']{1}/u;
13
14
  /**
14
15
  * This regex matches any character that is not a latin character, punctuation, symbol, number, separator, control, or mark
15
16
  * I limited the character found to 1 in the regex, so that we can return early if we find any non-latin character
16
17
  **/
17
18
  const nonLatinRegex = /[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;
18
- const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
19
+ const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) &&
20
+ // allow special characters like web apostrophe and quotation mark
21
+ !specialCharacters.test(value)
22
+ ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
19
23
  return nonLatinValueList;
20
24
  };
21
25
 
@@ -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 {
@@ -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>
@@ -11,12 +11,16 @@ import { i as isDarkColor } from './isDarkColor-6bf71e51.js';
11
11
  * @returns an object with the same keys as the input object, and a boolean value indicating if the value contains non-latin characters
12
12
  */
13
13
  const containsNonLatinChars = (params) => {
14
+ const specialCharacters = /[ʼˮ՚ߴߵ']{1}/u;
14
15
  /**
15
16
  * This regex matches any character that is not a latin character, punctuation, symbol, number, separator, control, or mark
16
17
  * I limited the character found to 1 in the regex, so that we can return early if we find any non-latin character
17
18
  **/
18
19
  const nonLatinRegex = /[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;
19
- const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
20
+ const nonLatinValueList = Object.entries(params).reduce((prev, [key, value]) => nonLatinRegex.test(value) &&
21
+ // allow special characters like web apostrophe and quotation mark
22
+ !specialCharacters.test(value)
23
+ ? Object.assign(Object.assign({}, prev), { [key]: true }) : prev, {});
20
24
  return nonLatinValueList;
21
25
  };
22
26
 
@@ -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 {
@@ -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>
@@ -1 +1 @@
1
- var __awaiter=this&&this.__awaiter||function(t,e,o,s){function n(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,i){function a(t){try{c(s.next(t))}catch(t){i(t)}}function r(t){try{c(s["throw"](t))}catch(t){i(t)}}function c(t){t.done?o(t.value):n(t.value).then(a,r)}c((s=s.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},s,n,i,a;return a={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function r(t){return function(e){return c([t,e])}}function c(r){if(s)throw new TypeError("Generator is already executing.");while(a&&(a=0,r[0]&&(o=0)),o)try{if(s=1,n&&(i=r[0]&2?n["return"]:r[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,r[1])).done)return i;if(n=0,i)r=[r[0]&2,i.value];switch(r[0]){case 0:case 1:i=r;break;case 4:o.label++;return{value:r[1],done:false};case 5:o.label++;n=r[1];r=[0];continue;case 7:r=o.ops.pop();o.trys.pop();continue;default:if(!(i=o.trys,i=i.length>0&&i[i.length-1])&&(r[0]===6||r[0]===2)){o=0;continue}if(r[0]===3&&(!i||r[1]>i[0]&&r[1]<i[3])){o.label=r[1];break}if(r[0]===6&&o.label<i[1]){o.label=i[1];i=r;break}if(i&&o.label<i[2]){o.label=i[2];o.ops.push(r);break}if(i[2])o.ops.pop();o.trys.pop();continue}r=e.call(t,o)}catch(t){r=[6,t];n=0}finally{s=i=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,d as getElement}from"./index-dd40cc85.js";import{j as stripeStore,d as logError,l as localizationStore,t as translate,n as stripeStorePrefetchLandedCost}from"./cart-228e1ef7.js";import{z as zonosStore,d as zonosStoreFontFamily}from"./zonosStore-c4c45591.js";import{i as isCheckoutMobile}from"./isCheckoutMobile-8846dccb.js";import{c as classes}from"./classes-0d95c529.js";import{g as getBorderRadius}from"./getBorderRadius-a89e45fb.js";import{i as isDarkColor}from"./isDarkColor-6bf71e51.js";var containsNonLatinChars=function(t){var e=/[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;var o=Object.entries(t).reduce((function(t,o){var s;var n=o[0],i=o[1];return e.test(i)?Object.assign(Object.assign({},t),(s={},s[n]=true,s)):t}),{});return o};var zonosAddressCss=".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:var(--amino-space-8)}";var ZonosAddressStyle0=zonosAddressCss;var ZonosAddress=function(){function t(t){registerInstance(this,t);this.invalidCharacters=createEvent(this,"invalidCharacters",7);this.type=undefined;this.titleText=undefined;this.defaultAddress=null;this.stripe=window.Zonos.stripe;this.hasInvalidCharacters=false;this.isDirtyAddress=false}t.prototype.getStripeAddressInstance=function(){if(this.type==="billing"){return{stripeAddressElement:stripeStore.stripeBillingAddressElement,stripeAddressEventData:stripeStore.stripeBillingAddressEventData,stripeElements:stripeStore.stripeElementsForBillingAddress}}return{stripeAddressElement:stripeStore.stripeAddressElement,stripeAddressEventData:stripeStore.stripeAddressEventData,stripeElements:stripeStore.stripeElements}};t.prototype.updateAddressEventData=function(t){var e=t.event,o=t.type;switch(o){case"billing":stripeStore.stripeBillingAddressEventData=e;break;default:stripeStore.stripeAddressEventData=e;break}var s=this.checkInvalidCharacters(e);this.invalidCharacters.emit(s);this.hasInvalidCharacters=s;if(s){return}};t.prototype.updateAddressElement=function(t){var e=t.stripeAddressElement,o=t.type;if(o==="shipping"){stripeStore.stripeAddressElement=e;return}stripeStore.stripeBillingAddressElement=e};t.prototype.checkInvalidCharacters=function(t){if(!t.complete||zonosStore.checkoutSettings.allowedCharacterSets==="ALL"){return false}var e=t.value,o=e.address,s=e.firstName,n=e.lastName,i=e.name;var a=o.city,r=o.country,c=o.line1,h=o.line2,l=o.postal_code,d=o.state;var u=containsNonLatinChars({city:a,country:r,line1:c,line2:h||"",name:i||"".concat(s," ").concat(n),postal_code:l,state:d});if(Object.keys(u).length){return true}return false};t.prototype.watchInitStripe=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,o,s,n,i,a,r,c;var h=this;return __generator(this,(function(l){this.stripe=window.Zonos.stripe;o=this.getStripeAddressInstance(),s=o.stripeAddressEventData,n=o.stripeElements;if(!this.stripe||!n){logError("Stripe is not initialized. Couldn't load stripe element.");return[2]}i=(t=this.defaultAddress)===null||t===void 0?void 0:t.phone;if(!i){(e=this.defaultAddress)===null||e===void 0?true:delete e.phone}a=localizationStore.shippingZoneCountries;r=a?Object.values(a).map((function(t){return t.code})):[];c=n.create("address",{allowedCountries:this.type==="shipping"?r:[],contacts:this.defaultAddress&&!s?[this.defaultAddress]:[],defaultValues:{address:Object.assign(Object.assign({},s===null||s===void 0?void 0:s.value.address),{country:(s===null||s===void 0?void 0:s.value.address.country)||localizationStore.selectedCountryCode||"AL"}),firstName:s===null||s===void 0?void 0:s.value.firstName,lastName:s===null||s===void 0?void 0:s.value.lastName,phone:s===null||s===void 0?void 0:s.value.phone},display:{name:"split"},fields:{phone:"always"},mode:this.type,validation:{phone:{required:"always"}}});c.mount(this.el.querySelector(".zonos--address-component"));c.on("change",(function(t){var e=t.value;if(!h.isDirtyAddress&&e.address.line1.length>=3){h.isDirtyAddress=true;setTimeout((function(){if(isCheckoutMobile()){h.el.scrollIntoView({behavior:"smooth",block:"end"})}else{var t=h.type==="shipping"?100:600;var e=h.el.closest(".zonos--group");var o=h.el.getBoundingClientRect().top+t;e===null||e===void 0?void 0:e.scrollTo({behavior:"smooth",top:o})}}),600)}h.updateAddressEventData({event:Object.assign(Object.assign({},t),{elementMode:h.type,elementType:"address",value:Object.assign(Object.assign({},e),{firstName:e.firstName||e.name.split(" ")[0],lastName:e.lastName||e.name.split(" ")[1]})}),type:h.type})}));this.updateAddressElement({stripeAddressElement:c,type:this.type});return[2]}))}))};t.prototype.disconnectedCallback=function(){var t=this.getStripeAddressInstance().stripeAddressElement;t===null||t===void 0?void 0:t.destroy()};t.prototype.componentDidLoad=function(){var t=this;var e=this.getStripeAddressInstance().stripeAddressEventData;this.isDirtyAddress=!!e&&e.value.address.line1.length>0;void this.watchInitStripe();setTimeout((function(){var e=t.getStripeAddressInstance().stripeAddressEventData;if(e){t.checkInvalidCharacters(e)}}),500)};t.prototype.render=function(){return h(Host,{key:"81b9d2e822eea4eb85a3d7d21ff645c9f0841f30",class:"zonos--address zonos--elements"},h("zonos-text",{key:"cd180e130f161233fd05365f9250913214846ced",class:"zonos--title",type:"semiBoldLabel"},this.titleText),h("div",{key:"b4d15f56e1215305367c071c4d9be985b09245b8",class:"zonos--address-component"}),this.hasInvalidCharacters&&h("zonos-banner",{bannerTitle:translate("Please ensure your text uses the Latin alphabet only (A-Z, a-z)."),intent:"error"}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}();ZonosAddress.style=ZonosAddressStyle0;var colorPrefixes=["blue","cyan","green","orange","purple","red","gray","glass"];var zonosCheckboxCss=":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:var(--amino-space-8);-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--size);width:var(--size);background-color:transparent;border:1.5px solid var(--amino-gray-400);position:relative;border-radius:var(--border-radius, var(--amino-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;width:calc(100% + 3px);-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--background-color);border-radius:var(--border-radius, var(--amino-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";var ZonosCheckboxStyle0=zonosCheckboxCss;var ZonosCheckbox=function(){function t(t){registerInstance(this,t);this.checkboxSelected=createEvent(this,"checkboxSelected",7);this.backgroundColor="blue";this.label=undefined;this.isChecked=false;this.isDisabled=false;this.size=12;this.fontSize="base";this.borderStyle=undefined}t.prototype.render=function(){var t=this;var e=colorPrefixes.includes(this.backgroundColor);var o=e?"var(--amino-".concat(this.backgroundColor,"-600)"):this.backgroundColor;var s=e?"var(--amino-".concat(this.backgroundColor,"-200)"):!isDarkColor(o)?"var(--amino-gray-800)":"var(--amino-gray-0)";var n=getBorderRadius(this.borderStyle,"4px");return h(Host,{key:"2ae2a0d33d34aafe96cc91e1cd7c7ee530dede4b",class:classes(["zonos--elements zonos--checkbox"]),style:{"--background-color":o,"--border-radius":n,"--font-family":zonosStoreFontFamily(),"--size":"".concat(this.size,"px")}},h("label",{key:"b9630027581a9f20374c2dfe88faa94cb50203c9",class:classes([this.isDisabled&&"disabled"])},h("input",{key:"d1b2411d9f906692f18514a15df1bb290f662164",checked:this.isChecked,disabled:this.isDisabled,hidden:true,onChange:function(e){t.checkboxSelected.emit(e.target.checked)},type:"checkbox"}),h("span",{key:"8fc3cda232615f446aff5db71cd992de5327b8e7",class:"checkmark-container"},h("svg",{key:"5b91a7a26abfd80850eb3c2bb2e045ef73abfd7a",class:"checkmark",color:s,fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},h("path",{key:"2046a40a75da63ac288c5def90d82ab0d0e0523c","clip-rule":"evenodd",d:"M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z",fill:"currentColor","fill-rule":"evenodd"}))),this.label&&h("zonos-text",{size:this.fontSize},this.label)))};return t}();ZonosCheckbox.style=ZonosCheckboxStyle0;var zonosCollapseCss=":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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";var ZonosCollapseStyle0=zonosCollapseCss;var ZonosCollapse=function(){function t(t){registerInstance(this,t);this.collapsed=false;this.collapseSize=0;this.height=this.el.scrollHeight;this.iframe=null}t.prototype.getElementHeight=function(){var t="".concat(this.height,"px");var e="".concat(this.collapseSize,"px");return this.collapsed?e:t};t.prototype.componentDidLoad=function(){this.height=this.el.scrollHeight};t.prototype.componentDidRender=function(){var t=this;var e,o,s;this.iframe=((e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector("iframe"))||null;(s=(o=this.iframe)===null||o===void 0?void 0:o.contentWindow)===null||s===void 0?void 0:s.addEventListener("resize",(function(){if(!t.iframe){return}t.height=parseFloat(getComputedStyle(t.iframe).height)}))};t.prototype.render=function(){var t=this;if(!this.collapsed){setTimeout((function(){if(!t.collapsed){t.el.style.overflow="visible"}}),300)}else{this.el.style.overflow="hidden"}return h(Host,{key:"032f5818dd8394b5111927907c8fa135a55fef5c",class:"zonos--elements zonos--collapse",style:{"--font-family":zonosStoreFontFamily(),height:this.getElementHeight()}},h("div",{key:"5ddbf406c93f37c9e23375f11dd8439934c0d2a5"},h("iframe",{key:"b3efa8bc198918dbb3284e8ce658ffca6249eaa8",class:"height-change-listener",tabindex:"-1",title:"collapse-height-change-listener"}),h("slot",{key:"ffcd123c3a046e62855a650da9972cde94a7774c"})))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();ZonosCollapse.style=ZonosCollapseStyle0;var zonosLinkAuthenticationCss=".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";var ZonosLinkAuthenticationStyle0=zonosLinkAuthenticationCss;var ZonosLinkAuthentication=function(){function t(t){registerInstance(this,t);this.titleText=undefined;this.stripe=stripeStore.stripe}t.prototype.watchInitStripe=function(){if(!this.stripe||!stripeStore.stripeElements){return}var t=stripeStore.stripeLinkElement||stripeStore.stripeElements.create("linkAuthentication");var e=this.el.querySelector(".zonos--link-authentication-component");if(!e){logError("Cannot find container element for linkAuthenticationElement");return}t.mount(e);t.on("change",(function(t){stripeStore.stripeLinkEventData=t;void stripeStorePrefetchLandedCost()}));stripeStore.stripeLinkElement=t};t.prototype.componentDidLoad=function(){this.watchInitStripe()};t.prototype.render=function(){return h(Host,{key:"a434761e3f237cd44971e458512c7649f214eb4d",class:"zonos--link-authentication zonos--elements"},h("zonos-text",{key:"0c350ff6dabb1c71376e4e6539a68613d7174189",class:"zonos--title",type:"semiBoldLabel"},this.titleText),h("div",{key:"e9cc2bd1e68b64e2fed41851a0d2f2be40583337",class:"zonos--link-authentication-component"}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}();ZonosLinkAuthentication.style=ZonosLinkAuthenticationStyle0;export{ZonosAddress as zonos_address,ZonosCheckbox as zonos_checkbox,ZonosCollapse as zonos_collapse,ZonosLinkAuthentication as zonos_link_authentication};
1
+ var __awaiter=this&&this.__awaiter||function(t,e,o,s){function n(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,i){function a(t){try{c(s.next(t))}catch(t){i(t)}}function r(t){try{c(s["throw"](t))}catch(t){i(t)}}function c(t){t.done?o(t.value):n(t.value).then(a,r)}c((s=s.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},s,n,i,a;return a={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function r(t){return function(e){return c([t,e])}}function c(r){if(s)throw new TypeError("Generator is already executing.");while(a&&(a=0,r[0]&&(o=0)),o)try{if(s=1,n&&(i=r[0]&2?n["return"]:r[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,r[1])).done)return i;if(n=0,i)r=[r[0]&2,i.value];switch(r[0]){case 0:case 1:i=r;break;case 4:o.label++;return{value:r[1],done:false};case 5:o.label++;n=r[1];r=[0];continue;case 7:r=o.ops.pop();o.trys.pop();continue;default:if(!(i=o.trys,i=i.length>0&&i[i.length-1])&&(r[0]===6||r[0]===2)){o=0;continue}if(r[0]===3&&(!i||r[1]>i[0]&&r[1]<i[3])){o.label=r[1];break}if(r[0]===6&&o.label<i[1]){o.label=i[1];i=r;break}if(i&&o.label<i[2]){o.label=i[2];o.ops.push(r);break}if(i[2])o.ops.pop();o.trys.pop();continue}r=e.call(t,o)}catch(t){r=[6,t];n=0}finally{s=i=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,d as getElement}from"./index-dd40cc85.js";import{j as stripeStore,d as logError,l as localizationStore,t as translate,n as stripeStorePrefetchLandedCost}from"./cart-228e1ef7.js";import{z as zonosStore,d as zonosStoreFontFamily}from"./zonosStore-c4c45591.js";import{i as isCheckoutMobile}from"./isCheckoutMobile-8846dccb.js";import{c as classes}from"./classes-0d95c529.js";import{g as getBorderRadius}from"./getBorderRadius-a89e45fb.js";import{i as isDarkColor}from"./isDarkColor-6bf71e51.js";var containsNonLatinChars=function(t){var e=/[ʼˮ՚ߴߵ']{1}/u;var o=/[^\p{Script=Latin}\p{P}\p{S}\p{N}\p{Z}\p{C}\p{M}]{1}/u;var s=Object.entries(t).reduce((function(t,s){var n;var i=s[0],a=s[1];return o.test(a)&&!e.test(a)?Object.assign(Object.assign({},t),(n={},n[i]=true,n)):t}),{});return s};var zonosAddressCss=".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:var(--amino-space-8)}";var ZonosAddressStyle0=zonosAddressCss;var ZonosAddress=function(){function t(t){registerInstance(this,t);this.invalidCharacters=createEvent(this,"invalidCharacters",7);this.type=undefined;this.titleText=undefined;this.defaultAddress=null;this.stripe=window.Zonos.stripe;this.hasInvalidCharacters=false;this.isDirtyAddress=false}t.prototype.getStripeAddressInstance=function(){if(this.type==="billing"){return{stripeAddressElement:stripeStore.stripeBillingAddressElement,stripeAddressEventData:stripeStore.stripeBillingAddressEventData,stripeElements:stripeStore.stripeElementsForBillingAddress}}return{stripeAddressElement:stripeStore.stripeAddressElement,stripeAddressEventData:stripeStore.stripeAddressEventData,stripeElements:stripeStore.stripeElements}};t.prototype.updateAddressEventData=function(t){var e=t.event,o=t.type;switch(o){case"billing":stripeStore.stripeBillingAddressEventData=e;break;default:stripeStore.stripeAddressEventData=e;break}var s=this.checkInvalidCharacters(e);this.invalidCharacters.emit(s);this.hasInvalidCharacters=s;if(s){return}};t.prototype.updateAddressElement=function(t){var e=t.stripeAddressElement,o=t.type;if(o==="shipping"){stripeStore.stripeAddressElement=e;return}stripeStore.stripeBillingAddressElement=e};t.prototype.checkInvalidCharacters=function(t){if(!t.complete||zonosStore.checkoutSettings.allowedCharacterSets==="ALL"){return false}var e=t.value,o=e.address,s=e.firstName,n=e.lastName,i=e.name;var a=o.city,r=o.country,c=o.line1,h=o.line2,l=o.postal_code,d=o.state;var u=containsNonLatinChars({city:a,country:r,line1:c,line2:h||"",name:i||"".concat(s," ").concat(n),postal_code:l,state:d});if(Object.keys(u).length){return true}return false};t.prototype.watchInitStripe=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,o,s,n,i,a,r,c;var h=this;return __generator(this,(function(l){this.stripe=window.Zonos.stripe;o=this.getStripeAddressInstance(),s=o.stripeAddressEventData,n=o.stripeElements;if(!this.stripe||!n){logError("Stripe is not initialized. Couldn't load stripe element.");return[2]}i=(t=this.defaultAddress)===null||t===void 0?void 0:t.phone;if(!i){(e=this.defaultAddress)===null||e===void 0?true:delete e.phone}a=localizationStore.shippingZoneCountries;r=a?Object.values(a).map((function(t){return t.code})):[];c=n.create("address",{allowedCountries:this.type==="shipping"?r:[],contacts:this.defaultAddress&&!s?[this.defaultAddress]:[],defaultValues:{address:Object.assign(Object.assign({},s===null||s===void 0?void 0:s.value.address),{country:(s===null||s===void 0?void 0:s.value.address.country)||localizationStore.selectedCountryCode||"AL"}),firstName:s===null||s===void 0?void 0:s.value.firstName,lastName:s===null||s===void 0?void 0:s.value.lastName,phone:s===null||s===void 0?void 0:s.value.phone},display:{name:"split"},fields:{phone:"always"},mode:this.type,validation:{phone:{required:"always"}}});c.mount(this.el.querySelector(".zonos--address-component"));c.on("change",(function(t){var e=t.value;if(!h.isDirtyAddress&&e.address.line1.length>=3){h.isDirtyAddress=true;setTimeout((function(){if(isCheckoutMobile()){h.el.scrollIntoView({behavior:"smooth",block:"end"})}else{var t=h.type==="shipping"?100:600;var e=h.el.closest(".zonos--group");var o=h.el.getBoundingClientRect().top+t;e===null||e===void 0?void 0:e.scrollTo({behavior:"smooth",top:o})}}),600)}h.updateAddressEventData({event:Object.assign(Object.assign({},t),{elementMode:h.type,elementType:"address",value:Object.assign(Object.assign({},e),{firstName:e.firstName||e.name.split(" ")[0],lastName:e.lastName||e.name.split(" ")[1]})}),type:h.type})}));this.updateAddressElement({stripeAddressElement:c,type:this.type});return[2]}))}))};t.prototype.disconnectedCallback=function(){var t=this.getStripeAddressInstance().stripeAddressElement;t===null||t===void 0?void 0:t.destroy()};t.prototype.componentDidLoad=function(){var t=this;var e=this.getStripeAddressInstance().stripeAddressEventData;this.isDirtyAddress=!!e&&e.value.address.line1.length>0;void this.watchInitStripe();setTimeout((function(){var e=t.getStripeAddressInstance().stripeAddressEventData;if(e){t.checkInvalidCharacters(e)}}),500)};t.prototype.render=function(){return h(Host,{key:"81b9d2e822eea4eb85a3d7d21ff645c9f0841f30",class:"zonos--address zonos--elements"},h("zonos-text",{key:"cd180e130f161233fd05365f9250913214846ced",class:"zonos--title",type:"semiBoldLabel"},this.titleText),h("div",{key:"b4d15f56e1215305367c071c4d9be985b09245b8",class:"zonos--address-component"}),this.hasInvalidCharacters&&h("zonos-banner",{bannerTitle:translate("Please ensure your text uses the Latin alphabet only (A-Z, a-z)."),intent:"error"}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}();ZonosAddress.style=ZonosAddressStyle0;var colorPrefixes=["blue","cyan","green","orange","purple","red","gray","glass"];var zonosCheckboxCss=":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:var(--amino-space-8);-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--size);width:var(--size);background-color:transparent;border:1.5px solid var(--amino-gray-400);position:relative;border-radius:var(--border-radius, var(--amino-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;width:calc(100% + 3px);-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--background-color);border-radius:var(--border-radius, var(--amino-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";var ZonosCheckboxStyle0=zonosCheckboxCss;var ZonosCheckbox=function(){function t(t){registerInstance(this,t);this.checkboxSelected=createEvent(this,"checkboxSelected",7);this.backgroundColor="blue";this.label=undefined;this.isChecked=false;this.isDisabled=false;this.size=12;this.fontSize="base";this.borderStyle=undefined}t.prototype.render=function(){var t=this;var e=colorPrefixes.includes(this.backgroundColor);var o=e?"var(--amino-".concat(this.backgroundColor,"-600)"):this.backgroundColor;var s=e?"var(--amino-".concat(this.backgroundColor,"-200)"):!isDarkColor(o)?"var(--amino-gray-800)":"var(--amino-gray-0)";var n=getBorderRadius(this.borderStyle,"4px");return h(Host,{key:"2ae2a0d33d34aafe96cc91e1cd7c7ee530dede4b",class:classes(["zonos--elements zonos--checkbox"]),style:{"--background-color":o,"--border-radius":n,"--font-family":zonosStoreFontFamily(),"--size":"".concat(this.size,"px")}},h("label",{key:"b9630027581a9f20374c2dfe88faa94cb50203c9",class:classes([this.isDisabled&&"disabled"])},h("input",{key:"d1b2411d9f906692f18514a15df1bb290f662164",checked:this.isChecked,disabled:this.isDisabled,hidden:true,onChange:function(e){t.checkboxSelected.emit(e.target.checked)},type:"checkbox"}),h("span",{key:"8fc3cda232615f446aff5db71cd992de5327b8e7",class:"checkmark-container"},h("svg",{key:"5b91a7a26abfd80850eb3c2bb2e045ef73abfd7a",class:"checkmark",color:s,fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},h("path",{key:"2046a40a75da63ac288c5def90d82ab0d0e0523c","clip-rule":"evenodd",d:"M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z",fill:"currentColor","fill-rule":"evenodd"}))),this.label&&h("zonos-text",{size:this.fontSize},this.label)))};return t}();ZonosCheckbox.style=ZonosCheckboxStyle0;var zonosCollapseCss=":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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";var ZonosCollapseStyle0=zonosCollapseCss;var ZonosCollapse=function(){function t(t){registerInstance(this,t);this.collapsed=false;this.collapseSize=0;this.height=this.el.scrollHeight;this.iframe=null}t.prototype.getElementHeight=function(){var t="".concat(this.height,"px");var e="".concat(this.collapseSize,"px");return this.collapsed?e:t};t.prototype.componentDidLoad=function(){this.height=this.el.scrollHeight};t.prototype.componentDidRender=function(){var t=this;var e,o,s;this.iframe=((e=this.el.shadowRoot)===null||e===void 0?void 0:e.querySelector("iframe"))||null;(s=(o=this.iframe)===null||o===void 0?void 0:o.contentWindow)===null||s===void 0?void 0:s.addEventListener("resize",(function(){if(!t.iframe){return}t.height=parseFloat(getComputedStyle(t.iframe).height)}))};t.prototype.render=function(){var t=this;if(!this.collapsed){setTimeout((function(){if(!t.collapsed){t.el.style.overflow="visible"}}),300)}else{this.el.style.overflow="hidden"}return h(Host,{key:"032f5818dd8394b5111927907c8fa135a55fef5c",class:"zonos--elements zonos--collapse",style:{"--font-family":zonosStoreFontFamily(),height:this.getElementHeight()}},h("div",{key:"5ddbf406c93f37c9e23375f11dd8439934c0d2a5"},h("iframe",{key:"b3efa8bc198918dbb3284e8ce658ffca6249eaa8",class:"height-change-listener",tabindex:"-1",title:"collapse-height-change-listener"}),h("slot",{key:"ffcd123c3a046e62855a650da9972cde94a7774c"})))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();ZonosCollapse.style=ZonosCollapseStyle0;var zonosLinkAuthenticationCss=".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";var ZonosLinkAuthenticationStyle0=zonosLinkAuthenticationCss;var ZonosLinkAuthentication=function(){function t(t){registerInstance(this,t);this.titleText=undefined;this.stripe=stripeStore.stripe}t.prototype.watchInitStripe=function(){if(!this.stripe||!stripeStore.stripeElements){return}var t=stripeStore.stripeLinkElement||stripeStore.stripeElements.create("linkAuthentication");var e=this.el.querySelector(".zonos--link-authentication-component");if(!e){logError("Cannot find container element for linkAuthenticationElement");return}t.mount(e);t.on("change",(function(t){stripeStore.stripeLinkEventData=t;void stripeStorePrefetchLandedCost()}));stripeStore.stripeLinkElement=t};t.prototype.componentDidLoad=function(){this.watchInitStripe()};t.prototype.render=function(){return h(Host,{key:"a434761e3f237cd44971e458512c7649f214eb4d",class:"zonos--link-authentication zonos--elements"},h("zonos-text",{key:"0c350ff6dabb1c71376e4e6539a68613d7174189",class:"zonos--title",type:"semiBoldLabel"},this.titleText),h("div",{key:"e9cc2bd1e68b64e2fed41851a0d2f2be40583337",class:"zonos--link-authentication-component"}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}();ZonosLinkAuthentication.style=ZonosLinkAuthenticationStyle0;export{ZonosAddress as zonos_address,ZonosCheckbox as zonos_checkbox,ZonosCollapse as zonos_collapse,ZonosLinkAuthentication as zonos_link_authentication};