@zonos/elements 1.3.201 → 1.3.202

package/dist/cjs/zonos-stripe-input.cjs.entry.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-c466b127.js');
+const zonosStore = require('./zonosStore-9264749e.js');
 const helpers = require('./helpers-5bdbb68c.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-3d0a563e.js');
-const isDarkColor = require('./isDarkColor-92a10a85.js');
+const getBorderRadius = require('./getBorderRadius-8d3b1049.js');
+const isDarkColor = require('./isDarkColor-bcf49625.js');
+require('./VarianceTest-0cb1e118.js');
 
 const zonosStripeInputCss = ".sc-zonos-stripe-input-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-stripe-input-h *.sc-zonos-stripe-input{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-stripe-input-h img.sc-zonos-stripe-input{max-width:100%}.sc-zonos-stripe-input-h dl.sc-zonos-stripe-input,.sc-zonos-stripe-input-h dd.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h1.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h2.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h3.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h4.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h5.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h6.sc-zonos-stripe-input,.sc-zonos-stripe-input-h hr.sc-zonos-stripe-input,.sc-zonos-stripe-input-h figure.sc-zonos-stripe-input,.sc-zonos-stripe-input-h p.sc-zonos-stripe-input,.sc-zonos-stripe-input-h pre.sc-zonos-stripe-input{margin:0}.sc-zonos-stripe-input-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-stripe-input-h{--zonos--background-color:#f1f1f1;--zonos--local-glowing-color:0 0 0 3px hsla(0, 0%, 100%, 25%),\n    0 0 0 1px var(--zonos--primary-color);--zonos--border:1px solid #e8e8e8}.dark.sc-zonos-stripe-input-h{color-scheme:dark;--zonos--background-color:#30313d;--zonos--local-glowing-color:0px 2px 4px rgba(0, 0, 0, 0.5),\n    0px 1px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px hsla(0, 0%, 100%, 25%),\n    0 1px 1px 0 rgba(255, 255, 255, 0.12);--zonos--border:1px solid var(--zonos--primary-color)}.sc-zonos-stripe-input-h{margin:1px}.sc-zonos-stripe-input-h .zonos--label-wrapper.sc-zonos-stripe-input{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%;background:var(--zonos--background-color);border-radius:var(--zonos--border-radius);border:var(--zonos--border);outline-offset:0;outline-width:2px;height:calc(var(--zonos-elements-size-xl) - 2px)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0 16px;outline:none;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);width:100%;border-radius:var(--zonos--border-radius);background:var(--zonos--background-color);border:var(--zonos--border);-ms-flex-order:2;order:2;font-weight:400;font-size:var(--zonos--font-size);color:var(--zonos-elements-text-color)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input .sc-zonos-stripe-input:-internal-autofill-selected{border-radius:var(--zonos-elements-radius-6) 0 0 var(--zonos-elements-radius-6)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input .sc-zonos-stripe-input:-internal-autofill-selected+label.sc-zonos-stripe-input+div.sc-zonos-stripe-input{background-color:#e8f0fe}.sc-zonos-stripe-input-h .zonos--floated-input.has-label.sc-zonos-stripe-input{padding:24px 4px 2px 16px}.sc-zonos-stripe-input-h .zonos--floated-input.has-label.has-input-prefix.sc-zonos-stripe-input{padding-left:0}.sc-zonos-stripe-input-h .zonos--floated-input.has-label.has-input-prefix.sc-zonos-stripe-input~.zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input{margin-left:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label):-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::-webkit-input-placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::-moz-placeholder{-moz-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus{outline:none;border:var(--zonos--border)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus~.zonos--floated-label.sc-zonos-stripe-input::after{-webkit-box-shadow:var(--zonos--glowing-color, var(--zonos--local-glowing-color));box-shadow:var(--zonos--glowing-color, var(--zonos--local-glowing-color))}.sc-zonos-stripe-input-h .zonos--floated-input.has-error.sc-zonos-stripe-input~.zonos--floated-label.sc-zonos-stripe-input::after{-webkit-box-shadow:0 0 0 2px #df1b41;box-shadow:0 0 0 2px #df1b41}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::-webkit-input-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::-moz-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input:-ms-input-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus:-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::-ms-input-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input~.zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus~.zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input{top:11px;-webkit-transform:scale(0.8);transform:scale(0.8)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:-webkit-autofill,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:-moz-autofill{background-color:var(--zonos-elements-input-background);color:var(--zonos-elements-text-color)}.sc-zonos-stripe-input-h .zonos--floated-label.sc-zonos-stripe-input{display:block;max-height:0;pointer-events:none;-ms-flex-order:1;order:1}.sc-zonos-stripe-input-h .zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input{color:var(--zonos-elements-gray-800);position:absolute;font-size:16px;line-height:16px;display:inline-block;-webkit-filter:blur(0);filter:blur(0);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);margin-left:16px;top:calc(50% - 8px);z-index:1}.sc-zonos-stripe-input-h .zonos--floated-label.sc-zonos-stripe-input::after{content:\"\";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:var(--zonos--border-radius)}.sc-zonos-stripe-input-h .disabled.sc-zonos-stripe-input .zonos--floated-label.sc-zonos-stripe-input{pointer-events:inherit}.sc-zonos-stripe-input-h .disabled.sc-zonos-stripe-input .zonos--floated-label.sc-zonos-stripe-input::after{cursor:not-allowed;z-index:1}.dark.sc-zonos-stripe-input-h .zonos--label-wrapper.sc-zonos-stripe-input{background:#30313d}";
 const ZonosStripeInputStyle0 = zonosStripeInputCss;
@@ -57,7 +58,7 @@ const ZonosStripeInput = class {
         const secondaryColor = this.overrideSecondaryColor || zonosStore.zonosStore.appearance.colorSecondary;
         const isDark = primaryColor && isDarkColor.isDarkColor(primaryColor);
         const fontSize = zonosStore.zonosStore.appearance.fontSizeInputValue || 16;
-        return (index.h(index.Host, { key: 'e6fbf3c60f08e70e9523f4d9fd38c757512af919', class: classes.classes([
+        return (index.h(index.Host, { key: 'ce50e8c3f41abc7f7605a4423dc21c5fce755c9a', class: classes.classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
                 (this.isError || !!this.error) && 'has-error',
@@ -66,10 +67,10 @@ const ZonosStripeInput = class {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--font-size': `${fontSize}px`,
                 '--zonos--primary-color': secondaryColor,
-            } }, index.h("div", { key: '0c10d623ec27ac18a321e2675e18cbb98224fe54', class: classes.classes([
+            } }, index.h("div", { key: '8953c4cf31d9de771ef8f6351476d5db9de5655a', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("input", Object.assign({ key: '8eb4653690896a81ee5436303b8555c07038a579' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
+            ]) }, index.h("input", Object.assign({ key: 'c66c0e5787191ab6bb804755da7477e222b3ff40' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.internalValue && 'has-content',
@@ -79,7 +80,7 @@ const ZonosStripeInput = class {
                 this.inputChange.emit(input.value);
                 this.el.inputValue = input.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), index.h("div", { key: '7388dd7c3ca24bd1a40246215fa9b51c76ab519f', class: "zonos--floated-label" }, index.h("label", { key: 'c975933f597d145c8b9edbeb9ac417603922de9a', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: '5fc0639cba176f02152bf689caec623c821abdeb', textColor: "red-600", type: "caption" }, this.error))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), index.h("div", { key: '17c7fa7ef87bf765203cadb3ff24ead25ac45332', class: "zonos--floated-label" }, index.h("label", { key: '4d7c8e503bd0dc0081b13a36c2a1c5f976ee93e3', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: '1352d1d09b05a25ced56d31b16cf1f203b0eaaec', textColor: "red-600", type: "caption" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/zonos-text.cjs.entry.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-c466b127.js');
+const zonosStore = require('./zonosStore-9264749e.js');
 const classes = require('./classes-b7918f56.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 const styles = require('./styles-d1e64fb9.js');
+require('./VarianceTest-0cb1e118.js');
 
 const textOptions = {
     pageHeader: {

package/dist/cjs/zonos-toggle.cjs.entry.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-c466b127.js');
+const zonosStore = require('./zonosStore-9264749e.js');
 const classes = require('./classes-b7918f56.js');
+require('./VarianceTest-0cb1e118.js');
 
 const zonosToggleCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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 .wrapper{position:relative;border-radius:6px;background-color:var(--zonos-elements-gray-50);display:-ms-flexbox;display:flex}:host .zonos--toggle-selected-slider{z-index:1;position:absolute;background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}:host .zonos--option{background:transparent;border:0;z-index:2;cursor:pointer;padding:4px 12px;border-radius:6px;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);font-size:var(--zonos-elements-font-size-base);font-weight:500;color:var(--zonos-elements-text-color-secondary)}:host .zonos--option:focus{outline:none}:host .zonos--option:hover:not(.selected){color:var(--zonos-elements-text-color)}:host .zonos--option.selected{color:var(--zonos-elements-text-color);background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}";
 const ZonosToggleStyle0 = zonosToggleCss;
@@ -17,9 +18,9 @@ const ZonosToggle = class {
         this.value = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '8426e15a4596ecd6fc2cab945cdb2f0c4fe1ac79', class: classes.classes(['zonos--elements zonos--toggle']), style: {
+        return (index.h(index.Host, { key: '9a526e8fee8e4c5af558442c82f7acbc634706c3', class: classes.classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'e26f354255febe40918b30100ed5d42410a30413', class: "wrapper" }, this.options.map(option => {
+            } }, index.h("div", { key: '97ca281e8e782c3b08231c6ba705325bbf16d402', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (index.h("button", { class: classes.classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);

package/dist/cjs/zonos-tooltip.cjs.entry.js

@@ -16,10 +16,10 @@ const ZonosTooltip = class {
         this.showTooltip = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'fbd7f669ae886586c2512b00975fc5acf1e40eca', class: "zonos--elements" }, index.h("div", { key: '618d6ff79308540f5eeb3d8a23e7c520fb35a91a', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '303eaf31b4b3dc9fd35ed0db252be84274b7d46c' }), index.h("div", { key: '7429949912c8e3fb683ab4cbc4958d8fb6b2fd81', class: classes.classes([
+        return (index.h(index.Host, { key: 'd984faacc8d79f2001c84fb69c30f3665dca44aa', class: "zonos--elements" }, index.h("div", { key: '327f9d077f2400f05ff3c4337b566c461a2d05cf', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '24315359176ca625f18a856d781624850d05de17' }), index.h("div", { key: '296041bbebddd0250c6d5d9649e6502571a08533', class: classes.classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, index.h("zonos-text", { key: '31704a564bb877fac16c1ab11a686e9ba72940ea', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '1e2cafbfaf769b30256c8d4609953961bcd10a06', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, index.h("zonos-text", { key: '5a2828baf420acb666eb1f0029c8d0b9eadd55ce', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '1bd8bf5085edfdc3d42db03e460062bf744c174b', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
 };
 ZonosTooltip.style = ZonosTooltipStyle0;

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-c466b127.js');
+const zonosStore = require('./zonosStore-9264749e.js');
 const classes = require('./classes-b7918f56.js');
+require('./VarianceTest-0cb1e118.js');
 
 const zonosVStackCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
 const ZonosVStackStyle0 = zonosVStackCss;
@@ -15,9 +16,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: 'b591378d641a09bac2c4fab00c8c1977ae21a14c', style: {
+        return (index.h(index.Host, { key: '558218f6135d5fcc9f3649b76c568a9f514aa8e8', style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'c9f3b482ace4b36813fa5412dd497c0deea7e3c0', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '75cf9b483367945bc57279b76519205c8f0901eb' }))));
+            } }, index.h("div", { key: '86af63aa01214db20cc094ddcbfd05b3ee28f1ed', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '4786fb44cbf865a548c900b752f9b13709f1f935' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/cjs/{zonosStore-c466b127.js → zonosStore-9264749e.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 const index = require('./index-0993f42d.js');
+const VarianceTest = require('./VarianceTest-0cb1e118.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -2759,7 +2760,11 @@ const mergeConfig = (defaultObj, fetchedObj, ...overrideObj) => {
     return merge_1.apply(null, overrideArgs);
 };
 
-const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(() => ({
+const isInAvailableTestKey = (testKey) => {
+    return testKey in VarianceTest.availableTestKeys;
+};
+
+const { dispose: zonosStoreDispose, onChange: zonosStoreOnChange, reset, state: zonosStore, } = createStore(() => ({
     appearance: {
         colorPrimary: 'white',
         fontFamily: 'Inter',
@@ -2810,6 +2815,7 @@ const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(()
     },
     currentHelloPage: '',
     disabledCountries: [],
+    enabledVariantTestKeys: [],
     helloSettings: {
         anchorElementSelector: '',
         cartUrlPattern: '',
@@ -2870,7 +2876,7 @@ const getZonosStoreTheme = (theme) => {
  * Init setting from zonos setting
  */
 const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     reset();
     if (zonosSettings) {
         // save zonos settings to be used later
@@ -2897,9 +2903,13 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
         null);
     // set flag to true to indicate that config is ready
     zonosStore.loadedConfig = true;
-    zonosStore.organizationId = ((_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _b === void 0 ? void 0 : _b.id) || '';
-    zonosStore.organizationName = ((_c = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _c === void 0 ? void 0 : _c.name) || '';
-    zonosStore.storeId = ((_e = (_d = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _d === void 0 ? void 0 : _d.references) === null || _e === void 0 ? void 0 : _e.storeId) || null;
+    // initialize variant test keys
+    zonosStore.enabledVariantTestKeys =
+        // Only map and filter the test keys that the current code supports
+        ((_c = (_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.checkoutSettings) === null || _b === void 0 ? void 0 : _b.varianceTestRegistrations) === null || _c === void 0 ? void 0 : _c.flatMap(({ testKey }) => (isInAvailableTestKey(testKey) ? testKey : []))) || [];
+    zonosStore.organizationId = ((_d = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _d === void 0 ? void 0 : _d.id) || '';
+    zonosStore.organizationName = ((_e = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _e === void 0 ? void 0 : _e.name) || '';
+    zonosStore.storeId = ((_g = (_f = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _f === void 0 ? void 0 : _f.references) === null || _g === void 0 ? void 0 : _g.storeId) || null;
     zonosStore.currencyConverter = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.currencyConverter;
     zonosStore.onCountryChange = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.onCountryChange;
     zonosStore.overrideCurrencyFormat = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.overrideCurrencyFormat;

package/dist/collection/collection-manifest.json

@@ -34,6 +34,7 @@
     "components/common/zonos-input/zonos-input.js",
     "components/common/zonos-language-select/zonos-language-select.js",
     "components/common/zonos-link/zonos-link.js",
+    "components/common/zonos-loading-overlay/zonos-loading-overlay.js",
     "components/common/zonos-logo/zonos-logo.js",
     "components/common/zonos-rest-state/zonos-rest-state.js",
     "components/common/zonos-select-dialog-header/zonos-select-dialog-header.js",

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

@@ -2,6 +2,7 @@ import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
 import { paypalStore, paypalStoreReset, } from "../../../store/checkout/paypal";
 import { stripeStore, stripeStoreMessageBasedOnStatus, stripeStoreReset, stripeStoreResetPromoCode, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
+import { storageStore } from "../../../store/storageStore";
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
@@ -26,7 +27,7 @@ export class ZonosCheckoutFinish {
     constructor() {
         this.pullOrder = async () => {
             var _a, _b;
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             const searchParams = new URLSearchParams();
             searchParams.set('checkoutSessionId', checkoutSessionId || '');
             const { baseUrl, errors, json } = await handleFetch(`/api/zonos-elements/get-order?${searchParams.toString()}`);
@@ -49,7 +50,7 @@ export class ZonosCheckoutFinish {
         this.redirectToUrl = (url) => {
             // reset store and checkout session id before redirecting
             stripeStoreReset();
-            cartStore.checkoutSessionId = null;
+            storageStore.checkoutSessionId = null;
             // If it is iframed, redirect the parent window
             if (window.parent) {
                 window.parent.location.href = url;
@@ -155,7 +156,7 @@ export class ZonosCheckoutFinish {
             const { baseUrl, order } = await this.pullOrder();
             const { isLegacyCheckout } = window.Zonos;
             const foundLegacyOrderNumber = !!((_b = (_a = order === null || order === void 0 ? void 0 : order.references) === null || _a === void 0 ? void 0 : _a.find(entry => (entry === null || entry === void 0 ? void 0 : entry.key) === 'zonosOrderNumber')) === null || _b === void 0 ? void 0 : _b.value);
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             const maxRetries = parseFloat(new URLSearchParams(window.location.search).get('maxPollingRetries') ||
                 '0') || MAX_RETRIES;
             log(`=== Polling order (${attempts} attemps)`, 'info');
@@ -176,7 +177,7 @@ export class ZonosCheckoutFinish {
                         ],
                         metadata: {
                             allLogs,
-                            checkoutSessionId: cartStore.checkoutSessionId || '',
+                            checkoutSessionId: storageStore.checkoutSessionId || '',
                             orderId: order.id,
                             storeId: zonosStore.storeId,
                         },
@@ -190,7 +191,7 @@ export class ZonosCheckoutFinish {
                         errors: [`Order found after ${attempts} attempts`],
                         metadata: {
                             allLogs,
-                            checkoutSessionId: cartStore.checkoutSessionId || '',
+                            checkoutSessionId: storageStore.checkoutSessionId || '',
                             orderId: order.id,
                             storeId: zonosStore.storeId,
                         },
@@ -209,7 +210,7 @@ export class ZonosCheckoutFinish {
                     errors: [`Order not found after ${maxRetries} attempts`],
                     metadata: {
                         allLogs,
-                        checkoutSessionId: cartStore.checkoutSessionId || '',
+                        checkoutSessionId: storageStore.checkoutSessionId || '',
                         storeId: zonosStore.storeId,
                     },
                 });
@@ -258,7 +259,7 @@ export class ZonosCheckoutFinish {
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
-                            `Payment intent "${paymentIntentId}" status: ${status} - checkout session: ${cartStore.checkoutSessionId}`,
+                            `Payment intent "${paymentIntentId}" status: ${status} - checkout session: ${storageStore.checkoutSessionId}`,
                         ],
                         metadata: {
                             allLogs,
@@ -270,7 +271,7 @@ export class ZonosCheckoutFinish {
                     // Save new order info in case the user reloads before we get order info
                     this.saveOrderIdForDuplicationIssue();
                     submitGtag('zonos-checkout-success');
-                    const checkoutSessionId = cartStore.checkoutSessionId;
+                    const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
                         eventName: 'checkout_orderCompleted',
@@ -288,7 +289,7 @@ export class ZonosCheckoutFinish {
             // reset promo when checkout is finished
             stripeStoreResetPromoCode();
             stripeStoreReset();
-            cartStore.checkoutSessionId = null;
+            storageStore.checkoutSessionId = null;
         };
         this.checkStagingOrderStatus = async () => {
             this.notificationType = 'success';
@@ -302,7 +303,7 @@ export class ZonosCheckoutFinish {
             stripeStoreResetPromoCode();
             stripeStoreReset();
             paypalStoreReset();
-            cartStore.checkoutSessionId = null;
+            storageStore.checkoutSessionId = null;
         };
         this.checkPaypalPaymentStatus = async () => {
             // render error message if there's an error
@@ -317,7 +318,7 @@ export class ZonosCheckoutFinish {
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
                 submitGtag('zonos-checkout-success');
-                const checkoutSessionId = cartStore.checkoutSessionId;
+                const checkoutSessionId = storageStore.checkoutSessionId;
                 void trackConversionEvent({
                     checkoutSessionId,
                     eventName: 'checkout_orderCompleted',
@@ -335,7 +336,7 @@ export class ZonosCheckoutFinish {
             stripeStoreResetPromoCode();
             stripeStoreReset();
             paypalStoreReset();
-            cartStore.checkoutSessionId = null;
+            storageStore.checkoutSessionId = null;
         };
         this.closeClickHandler = () => {
             this.closeClick.emit();
@@ -346,7 +347,7 @@ export class ZonosCheckoutFinish {
             const placedOrderTime = {
                 cartId: window.Zonos.cartId || null,
                 checkoutSessionId: (existingPlacedOrderInfo === null || existingPlacedOrderInfo === void 0 ? void 0 : existingPlacedOrderInfo.checkoutSessionId) ||
-                    cartStore.checkoutSessionId ||
+                    storageStore.checkoutSessionId ||
                     '',
                 orderId: ((_a = this.order) === null || _a === void 0 ? void 0 : _a.id) || null,
                 time: (existingPlacedOrderInfo === null || existingPlacedOrderInfo === void 0 ? void 0 : existingPlacedOrderInfo.time) || Date.now(),
@@ -388,11 +389,11 @@ export class ZonosCheckoutFinish {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: 'e8ae24f1668c71f405bf18de82e7703928b02a78', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '971e0f8daa53ce2f99b2d1d06088fa6a9a37686c', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: '6e92d1870eac3f644c3f26d85e3f0108f3cca097', class: "zonos--finish-details" }, h("div", { key: '6979d24f7570631baccdf844f83a85b6da781da7', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '2b422f086008ca3a9c9634e5cb34a230de51e890', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '9f4207e526d03fae6207eb7124358c418413c378', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: 'f6df9c924b93f9149db88a2963c63799549bdc49',
+            } }, !this.isLoading && (h("div", { key: '284fb3adcb71840ad3f5cd94e169c723e29e3c42', class: "zonos--finish-details" }, h("div", { key: '485b63dae4714360af0ee65314e65de8b54ab311', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'c73f31ed5a9690af97e1884d0bbfff93734f266d', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '126118933ea6863384d98bf8f013a4130ab411cd', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '95bdb39e56a16004cc3896531458d0e86fa38bb4',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -404,9 +405,9 @@ export class ZonosCheckoutFinish {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '8ec8365d0f3a541530e85318744fbb4c85dc385e', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '325fd258d5d71668ba190a24ddc0e231b4b75208', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: '2c91cb3d40eb585513656bcc09dc3144d854af5c', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '883827fbe550c0d9132c27e4a5b984d8d45aa2bc', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'aa3ebf41507ce95dd02778a4b55863b0e880af14', onClick: () => {
+            this.notificationType === 'success' && (h("div", { key: '00116d9f6380fa1f4547eb0cb6d229aca380bffb', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '5c5334198095729ae8e07e4868b6b248f0750ac3', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '76fb0725306246ac9b9c88a41bca1937d65e3f01', onClick: () => {
                 const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
                 this.redirectToUrl(isZonosDashboard
                     ? '/orders/all'