@zonos/elements 1.3.204 → 1.3.205

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const debounce = require('./debounce-94e1b7ff.js');
-const localization = require('./localization-2f17c95f.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const debounce = require('./debounce-0b9c0f8a.js');
+const localization = require('./localization-88da0959.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const classes = require('./classes-b7918f56.js');
 const handleFetch = require('./handleFetch-969d05d8.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
@@ -127,6 +127,31 @@ const PEEK_MESSAGE_CLOSE_DELAY_MS = 3000;
 const ZonosHello = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.showPeekMessage = false;
+        this.zonosStoreHelloSettings = zonosStore.zonosStore.helloSettings;
+        this.showDialog = false;
+        this.peekMessage = '';
+        this.initialUrl = '';
+        /**
+         * This array will hold all restricted items handled by Hello thus far
+         */
+        this.allRestrictedItems = [];
+        /**
+         * This array will hold all products handled by Hello thus far
+         */
+        this.allFoundProducts = [];
+        /**
+         * This array will hold all products currently on the page
+         */
+        this.productsOnPage = [];
+        /**
+         * Hello widget is rendered on the screen, this should only triggered once
+         */
+        this.isHelloWidgetRendered = false;
+        /**
+         * Determine if the window is mobile
+         */
+        this.isMobile = false;
         this.getHelloPeekMessage = (organizationName) => {
             const isRestrictionPage = zonosStore.zonosStore.currentHelloPage === 'productDetail' ||
                 zonosStore.zonosStore.currentHelloPage === 'productList';
@@ -301,19 +326,6 @@ const ZonosHello = class {
             }
             return showForCountries === null || showForCountries === void 0 ? void 0 : showForCountries.includes(localization.localizationStore.selectedCountryCode || '');
         };
-        this.mobileLocationOverride = undefined;
-        this.animateFromLeftOverride = undefined;
-        this.appearanceSettingsOverride = undefined;
-        this.showPeekMessage = false;
-        this.zonosStoreHelloSettings = zonosStore.zonosStore.helloSettings;
-        this.showDialog = false;
-        this.peekMessage = '';
-        this.initialUrl = '';
-        this.allRestrictedItems = [];
-        this.allFoundProducts = [];
-        this.productsOnPage = [];
-        this.isHelloWidgetRendered = false;
-        this.isMobile = false;
     }
     /**
      * Get the country list the hello widget's country select is using

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-8d3b1049.js');
+const getBorderRadius = require('./getBorderRadius-c424eb05.js');
 require('./VarianceTest-0cb1e118.js');
 
 const zonosInputCss = ":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{margin:1px;}:host .zonos--label-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;width:100%;background:var(--zonos-elements-input-background);border-radius:var(--zonos--border-radius);border:var(--zonos-elements-border)}:host .zonos--label-wrapper:hover{border:1px solid var(--zonos-elements-gray-300)}:host .zonos--floated-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-elements-input-background);border:0;-ms-flex-order:2;order:2;font-weight:500}:host .zonos--floated-input :-internal-autofill-selected{border-radius:var(--zonos-elements-radius-6) 0 0 var(--zonos-elements-radius-6)}:host .zonos--floated-input :-internal-autofill-selected+label+div{background-color:#e8f0fe}:host .zonos--floated-input.has-label{padding:16px 4px 8px 16px}:host .zonos--floated-input.has-label.has-input-prefix{padding-left:0}:host .zonos--floated-input.has-label.has-input-prefix+.zonos--floated-label::before{margin-left:0}:host .zonos--floated-input:not(.has-label)::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label):-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input::-webkit-input-placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::-moz-placeholder{-moz-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input:-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input:focus{outline:none}:host .zonos--floated-input:focus+.zonos--floated-label::after{-webkit-box-shadow:var(--zonos-elements-glow-blue);box-shadow:var(--zonos-elements-glow-blue)}:host .zonos--floated-input.has-error+.zonos--floated-label::after{-webkit-box-shadow:var(--zonos-elements-glow-error);box-shadow:var(--zonos-elements-glow-error)}:host .zonos--floated-input.has-content::-webkit-input-placeholder,:host .zonos--floated-input:focus::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::-moz-placeholder,:host .zonos--floated-input:focus::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content:-ms-input-placeholder,:host .zonos--floated-input:focus:-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::-ms-input-placeholder,:host .zonos--floated-input:focus::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::placeholder,:host .zonos--floated-input:focus::placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content+.zonos--floated-label::before,:host .zonos--floated-input:focus+.zonos--floated-label::before{top:11px;-webkit-transform:scale(0.8);transform:scale(0.8)}:host .zonos--floated-input:-webkit-autofill,:host .zonos--floated-input:-moz-autofill{background-color:var(--zonos-elements-input-background);color:var(--zonos-elements-text-color)}:host .zonos--floated-label{display:block;max-height:0;pointer-events:none;-ms-flex-order:1;order:1}:host .zonos--floated-label::before{content:attr(data-label);color:var(--zonos-elements-gray-800);position:absolute;font-size:var(--zonos-elements-font-size-base);line-height:var(--zonos-elements-font-size-base);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% - var(--zonos-elements-font-size-base) / 2);z-index:1}:host .zonos--floated-label::after{content:\"\";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:var(--zonos--border-radius)}:host .disabled .zonos--floated-label{pointer-events:inherit}:host .disabled .zonos--floated-label::after{cursor:not-allowed;z-index:1}:host(.sm){height:calc(var(--zonos-elements-size-sm) - 2px)}:host(.sm) .zonos--floated-input.has-label{padding-top:13px;padding-bottom:0}:host(.sm) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.sm) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:2px}:host(.md){height:calc(var(--zonos-elements-size-md) - 2px)}:host(.md) .zonos--floated-input.has-label{padding-top:20px}:host(.md) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.md) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:6px}:host(.lg){height:calc(var(--zonos-elements-size-lg) - 2px)}:host(.lg) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.lg) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:10px}:host(.xl){height:calc(var(--zonos-elements-size-xl) - 2px)}:host(.xl) .zonos--floated-input.has-label{padding-bottom:2px}";
@@ -15,11 +15,25 @@ const ZonosInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.inputChange = index.createEvent(this, "inputChange", 7);
+        /**
+         * Value of the input
+         */
         this.inputValue = '';
-        this.inputLabel = undefined;
+        /**
+         * Input size
+         */
         this.inputSize = 'md';
+        /**
+         * Disables the input
+         */
         this.isDisabled = false;
+        /**
+         * Error state of the input
+         */
         this.isError = false;
+        /**
+         * Placeholder for the input
+         */
         this.inputPlaceholder = '';
         this.value = this.inputValue;
     }

package/dist/cjs/zonos-language-select_2.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const localization = require('./localization-2f17c95f.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const localization = require('./localization-88da0959.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./handleFetch-969d05d8.js');
 require('./VarianceTest-0cb1e118.js');
@@ -21,12 +21,16 @@ const ZonosLanguageSelectStyle0 = zonosLanguageSelectCss;
 const ZonosLanguageSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Function to close the language select
+         * @default () => {}
+         */
+        this.handleOnClose = () => { };
         this.languageSelected = (languageCode) => {
             // mutate the selected language code in store
             void localization.localizationStoreUpdateSelectedLocale(languageCode);
             this.handleOnClose();
         };
-        this.handleOnClose = () => { };
     }
     render() {
         const { selectedLocale } = localization.localizationStore;
@@ -45,7 +49,14 @@ const ZonosSelectDialogHeaderStyle0 = zonosSelectDialogHeaderCss;
 const ZonosSelectDialogHeader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Callback to do something on close
+         * @default () => {}
+         */
         this.handleOnClose = () => { };
+        /**
+         * The label for the select dialog
+         */
         this.label = '';
     }
     render() {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
+const index = require('./index-1c710d00.js');
 
 const zonosLinkCss = ":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:inline-block}:host a{padding-bottom:2px;color:var(--zonos-elements-primary);-webkit-box-shadow:none;box-shadow:none;text-decoration:none;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word}:host a:link,:host a:visited{color:var(--zonos-elements-primary);-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}:host a:hover,:host a:active{color:var(--zonos-elements-primary);-webkit-box-shadow:0 1px 0 var(--zonos-elements-primary);box-shadow:0 1px 0 var(--zonos-elements-primary)}";
 const ZonosLinkStyle0 = zonosLinkCss;
@@ -10,10 +10,10 @@ const ZonosLinkStyle0 = zonosLinkCss;
 const ZonosLink = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * The href for the link
+         */
         this.href = '';
-        this.rel = undefined;
-        this.target = undefined;
-        this.linkTitle = undefined;
     }
     render() {
         return (index.h(index.Host, { key: '41f0a757a334338631250764599ac99e28c41ed2', class: "zonos--elements" }, index.h("a", { key: 'b6e84f40141e8de85d005c05426f885f242ffc53', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: 'dd5ed33f163d7958fb7806992e003d2279ee1f5b' }))));

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-0cb1e118.js');
 
@@ -13,7 +13,13 @@ const ZonosLogoStyle0 = zonosLogoCss;
 const ZonosLogo = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Theme to change the color of the logo
+         */
         this.theme = 'LIGHT';
+        /**
+         * The width of the logo
+         */
         this.width = 'auto';
     }
     render() {

package/dist/cjs/zonos-shipping-rich-radio.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-8d3b1049.js');
+const getBorderRadius = require('./getBorderRadius-c424eb05.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 require('./VarianceTest-0cb1e118.js');
 
@@ -16,6 +16,11 @@ const ZonosShippingRichRadio = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.radioSelected = index.createEvent(this, "radioSelected", 7);
+        /**
+         * Selected item
+         * @default {null|firstItem}
+         */
+        this.selectedItem = null;
         this.handleRichRadioSelect = (item) => {
             var _a;
             (_a = this.radioSelected) === null || _a === void 0 ? void 0 : _a.emit(item);
@@ -32,11 +37,6 @@ const ZonosShippingRichRadio = class {
                 '--zonos--selected-border-color': secondaryColor || 'unset',
             };
         };
-        this.items = undefined;
-        this.borderColor = undefined;
-        this.borderStyle = undefined;
-        this.theme = undefined;
-        this.selectedItem = null;
     }
     render() {
         var _a;

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const helpers = require('./helpers-5bdbb68c.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-8d3b1049.js');
-const isDarkColor = require('./isDarkColor-bcf49625.js');
+const getBorderRadius = require('./getBorderRadius-c424eb05.js');
+const isDarkColor = require('./isDarkColor-35e8daec.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}";
@@ -23,17 +23,33 @@ const ZonosStripeInput = class {
          */
         this.inheritedAttributes = {};
         this.inputId = `zonos--input-${++inputId}`;
-        this.name = undefined;
-        this.autoComplete = undefined;
+        /**
+         * Value of the stripeInput
+         */
         this.inputValue = '';
-        this.inputLabel = undefined;
-        this.overridePrimaryColor = undefined;
-        this.overrideSecondaryColor = undefined;
+        /**
+         * Disables the input
+         */
         this.isDisabled = false;
+        /**
+         * Error state of the input
+         */
         this.isError = false;
+        /**
+         * Error message of the input
+         */
         this.error = '';
+        /**
+         * Placeholder for the input
+         */
         this.inputPlaceholder = '';
+        /**
+         * The value of the input.
+         */
         this.value = '';
+        /**
+         * Whether the input is required
+         */
         this.required = false;
         this.internalValue = this.inputValue;
     }

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const classes = require('./classes-b7918f56.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 const styles = require('./styles-d1e64fb9.js');
@@ -115,10 +115,17 @@ const ZonosTextStyle0 = zonosTextCss;
 const ZonosText = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * The icon element to display
+         */
         this.textColor = 'gray-1000';
-        this.size = undefined;
+        /**
+         * Type of the text to display
+         */
         this.type = 'body';
-        this.weight = undefined;
+        /**
+         * Whether or not the component is ready
+         */
         this.ready = false;
     }
     componentDidRender() {

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-0cb1e118.js');
 
@@ -14,8 +14,10 @@ const ZonosToggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.toggleChanged = index.createEvent(this, "toggleChanged", 7);
+        /**
+         * Options for the toggle
+         */
         this.options = [];
-        this.value = undefined;
     }
     render() {
         return (index.h(index.Host, { key: '9a526e8fee8e4c5af558442c82f7acbc634706c3', class: classes.classes(['zonos--elements zonos--toggle']), style: {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
+const index = require('./index-1c710d00.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosTooltipCss = ":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 .zonos--tooltip{position:relative}:host .zonos--tooltip .zonos--tooltip-content{position:absolute;bottom:100%;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:12px;background-color:var(--zonos-elements-gray-1000);opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--zonos-elements-radius-4);z-index:100;-webkit-box-shadow:var(--zonos-elements-v3-shadow-large);box-shadow:var(--zonos-elements-v3-shadow-large)}:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
@@ -11,7 +11,13 @@ const ZonosTooltipStyle0 = zonosTooltipCss;
 const ZonosTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * The title of the tooltip
+         */
         this.label = '';
+        /**
+         * The subtitle of the tooltip
+         */
         this.subtitle = '';
         this.showTooltip = false;
     }

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0993f42d.js');
-const zonosStore = require('./zonosStore-9264749e.js');
+const index = require('./index-1c710d00.js');
+const zonosStore = require('./zonosStore-7c1e1bc1.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-0cb1e118.js');
 
@@ -13,6 +13,10 @@ const ZonosVStackStyle0 = zonosVStackCss;
 const VStack = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * The spacing between elements in the stack
+         * @default 24
+         */
         this.spacing = 24;
     }
     render() {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-0993f42d.js');
+const index = require('./index-1c710d00.js');
 const VarianceTest = require('./VarianceTest-0cb1e118.js');
 
 const appendToMap = (map, propName, value) => {
@@ -39,7 +39,7 @@ const cleanupElements = debounce((map) => {
     for (let key of map.keys()) {
         map.set(key, map.get(key).filter(isConnected));
     }
-}, 2000);
+}, 2_000);
 const stencilSubscription = () => {
     if (typeof index.getRenderingRef !== 'function') {
         // If we are not in a stencil project, we do nothing.
@@ -72,7 +72,7 @@ const stencilSubscription = () => {
 const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
     const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    let states = new Map(Object.entries(unwrappedState ?? {}));
     const handlers = {
         dispose: [],
         get: [],
@@ -80,10 +80,9 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         reset: [],
     };
     const reset = () => {
-        var _a;
         // When resetting the state, the default state may be a function - unwrap it to invoke it.
         // otherwise, the state won't be properly reset
-        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {

package/dist/collection/collection-manifest.json

@@ -60,7 +60,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.23.0",
+    "version": "4.27.2",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-display/zonos-address-display.js

@@ -3,10 +3,6 @@ import { localizationStore } from "../../../../store/hello/localization";
 import { translate } from "../../../../store/translationStore";
 import { isTextContainsNonLatinChars } from "../../../../utils/containsNonLatinChars";
 export class ZonosAddressDisplay {
-    constructor() {
-        this.currentAddress = undefined;
-        this.addressType = undefined;
-    }
     render() {
         var _a;
         const { city, country, email, line1, line2, name, phone, postal_code, state, } = this.currentAddress;

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-form/zonos-address-form.js

@@ -3,13 +3,13 @@ import { translate } from "../../../../store/translationStore";
 import { isTextContainsNonLatinChars } from "../../../../utils/containsNonLatinChars";
 export class ZonosAddressForm {
     constructor() {
+        /**
+         * Local address to update
+         */
+        this.localAddress = this.currentAddress;
         this.onInputChange = ({ key, value, }) => {
             this.addressChange.emit(Object.assign(Object.assign({}, this.localAddress), { [key]: value }));
         };
-        this.currentAddress = undefined;
-        this.translatedAddress = undefined;
-        this.addressType = undefined;
-        this.localAddress = this.currentAddress;
     }
     watchCurrentAddress() {
         var _a, _b, _c, _d, _e, _f;

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-update-dialog.js

@@ -7,6 +7,30 @@ import { containsNonLatinChars } from "../../../utils/containsNonLatinChars";
 import RemoveIcon from "./../assets/RemoveIcon.svg";
 export class ZonosAddressUpdateDialog {
     constructor() {
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        /**
+         * Whether or not the dialog is open
+         */
+        this.dialogOpen = false;
+        /**
+         * Whether or not the dialog is open
+         */
+        this.isMobile = false;
+        /**
+         * Due to Stripe's validation difficulties, we need to show a banner when users hasn't filled out the form correctly but clicked continue
+         */
+        this.showErrorBanner = false;
+        /**
+         * State of shipping address input fields
+         */
+        this.translatedShippingAddressState = {};
+        /**
+         * State of billing address input fields
+         */
+        this.translatedBillingAddressState = {};
         /**
          * handler for close button click
          */
@@ -108,19 +132,6 @@ export class ZonosAddressUpdateDialog {
                 },
             };
         };
-        this.continueLoading = false;
-        this.dialogLoading = undefined;
-        this.dialogOpen = false;
-        this.submitBtnType = undefined;
-        this.submitBtnColor = undefined;
-        this.isMobile = false;
-        this.shippingAddress = undefined;
-        this.billingAddress = undefined;
-        this.translatedShippingAddress = undefined;
-        this.translatedBillingAddress = undefined;
-        this.showErrorBanner = false;
-        this.translatedShippingAddressState = {};
-        this.translatedBillingAddressState = {};
     }
     watchTranslatedShippingAddress() {
         this.translatedShippingAddressState = this.translatedShippingAddress;

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-restricted-items/zonos-cart-restricted-items.js

@@ -7,9 +7,15 @@ import { classes } from "../../../utils/classes";
 import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
 export class ZonosCartRestrictedItems {
     constructor() {
+        /**
+         * This is to hide the section when the parent collapse on mobile
+         */
         this.hide = false;
         this.errorImages = [];
         this.internalCollapsed = true;
+        /**
+         * Should do something after the component is loaded
+         */
         this.firstRender = true;
     }
     componentDidLoad() {

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.js

@@ -5,8 +5,9 @@ import { translate } from "../../../store/translationStore";
 import { renderCheckoutCurrency } from "../../../utils/checkout/renderCheckoutCurrency";
 export class ZonosCartSubtotal {
     constructor() {
-        this.submitBtnType = undefined;
-        this.submitBtnColor = undefined;
+        /**
+         * Loading state for apply promo code button
+         */
         this.loading = false;
     }
     render() {

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

@@ -25,6 +25,20 @@ import SuccessIcon from "./assets/SuccessIcon.svg";
 const MAX_RETRIES = 30;
 export class ZonosCheckoutFinish {
     constructor() {
+        /**
+         * The border radius style of the dialog
+         */
+        this.borderRadius = 'ROUNDED';
+        this.isLoading = true;
+        this.notificationType = 'success';
+        this.notificationTitle = '';
+        this.notificationMessages = [];
+        this.notificationActionText = translate('Keep shopping');
+        this.order = null;
+        /**
+         * Is waiting to redirect to a different page
+         */
+        this.isWaitingToRedirect = true;
         this.pullOrder = async () => {
             var _a, _b;
             const checkoutSessionId = storageStore.checkoutSessionId;
@@ -355,16 +369,6 @@ export class ZonosCheckoutFinish {
             };
             localStorage.setItem('zonos--placed-order-info', JSON.stringify(placedOrderTime));
         };
-        this.borderRadius = 'ROUNDED';
-        this.storybookForceStatus = undefined;
-        this.overrideNotification = undefined;
-        this.isLoading = true;
-        this.notificationType = 'success';
-        this.notificationTitle = '';
-        this.notificationMessages = [];
-        this.notificationActionText = translate('Keep shopping');
-        this.order = null;
-        this.isWaitingToRedirect = true;
     }
     componentDidLoad() {
         // Reset local storage for placed order info

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

@@ -9,8 +9,10 @@ import Globe from "./assets/globe.svg";
 import ZonosIcon from "./assets/zonosIcon.svg";
 export class ZonosCheckoutFooter {
     constructor() {
+        /**
+         * Override mobile mode
+         */
         this.mobile = false;
-        this.dataTheme = undefined;
         this.showLanguageDialog = false;
         this.isMobile = false;
     }