@zonos/elements 1.3.204 → 1.3.206

package/dist/esm/zonos-hello-dialog.entry.js

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-a457c60c.js';
-import { t as translate, l as localizationStore, d as currencyFormat } from './localization-bf7224aa.js';
-import { z as zonosStore } from './zonosStore-d10a829f.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-5ea9f81d.js';
+import { l as localizationStore, d as currencyFormat, t as translate } from './localization-4c7f64e8.js';
+import { z as zonosStore } from './zonosStore-1e015fa5.js';
 import { c as classes } from './classes-0d95c529.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';
 import { g as getHasMoreSpaceOnRight } from './getHasMoreSpaceOnRight-70eb913a.js';
+import { e as euCountryCodes } from './TaxId-50d72254.js';
 import './handleFetch-621e45bc.js';
 import './VarianceTest-fef2d958.js';
 
@@ -50,17 +51,30 @@ const MoneyIcon = `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" x
 
 const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
 
-const zonosHelloDialogCss = ":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--hello-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center}:host .zonos--hello-dialog{position:absolute;background:var(--zonos-elements-surface-color);width:100vw;max-width:430px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-height:600px;border-radius:var(--zonos-elements-radius-12);outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);overflow-y:auto;top:-2px;right:-2px;opacity:0;-webkit-transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:top right;transform-origin:top right;z-index:1001}:host .zonos--hello-dialog .zonos--hello-dialog-header{text-align:center}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:top left;transform-origin:top left;right:unset;left:-2px}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom{-webkit-transform-origin:bottom right;transform-origin:bottom right;bottom:calc(100% - 32px);top:unset}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom left;transform-origin:bottom left}:host .zonos--hello-dialog::-webkit-scrollbar{width:12px;height:12px}:host .zonos--hello-dialog::-webkit-scrollbar-track{background:#f5f5f5;border-top-right-radius:var(--zonos-elements-radius-12);border-bottom-right-radius:var(--zonos-elements-radius-12)}:host .zonos--hello-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#ccc;border:4px solid transparent;background-clip:content-box}:host .zonos--hello-dialog::-webkit-scrollbar-thumb:hover{background:#999}:host .zonos--hello-dialog .zonos--animate-content{opacity:0;height:0;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}:host .zonos--hello-dialog .zonos--show-animate-content{opacity:1;height:100%}:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}:host .zonos--hello-dialog .zonos--close-button{position:absolute;right:8px;top:8px;width:var(--zonos-elements-size-md);height:var(--zonos-elements-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;z-index:10}:host .zonos--hello-dialog .zonos--close-button:hover{background:var(--zonos-elements-hover-color);border-radius:var(--zonos-elements-radius-6)}:host .zonos--hello-dialog .zonos--hello-dialog-content{padding:16px}:host .zonos--hello-dialog .zonos--hello-dialog-content .zonos--hello-country-flag{border-radius:var(--zonos-elements-radius-4);width:32px;height:24px}:host .zonos--hello-dialog .zonos--flex-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:500px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}@media (max-height: 600px){:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override{max-height:80vh}}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}@media (max-width: 768px){:host .zonos--hello-dialog{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:500px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}}@media (max-width: 768px) and (max-height: 600px){:host .zonos--hello-dialog{max-height:80vh}}@media (max-width: 768px){:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}}@media (max-width: 768px){:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}";
+const zonosHelloDialogCss = ":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--hello-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center}:host .zonos--hello-dialog{position:absolute;background:var(--zonos-elements-surface-color);width:100vw;max-width:430px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-height:600px;border-radius:var(--zonos-elements-radius-12);outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);overflow-y:auto;top:-2px;right:-2px;opacity:0;-webkit-transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:top right;transform-origin:top right;z-index:1001}:host .zonos--hello-dialog .zonos--hello-dialog-header{text-align:center}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:top left;transform-origin:top left;right:unset;left:-2px}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom{-webkit-transform-origin:bottom right;transform-origin:bottom right;bottom:calc(100% - 32px);top:unset}:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-bottom.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom left;transform-origin:bottom left}:host .zonos--hello-dialog::-webkit-scrollbar{width:12px;height:12px}:host .zonos--hello-dialog::-webkit-scrollbar-track{background:#f5f5f5;border-top-right-radius:var(--zonos-elements-radius-12);border-bottom-right-radius:var(--zonos-elements-radius-12)}:host .zonos--hello-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#ccc;border:4px solid transparent;background-clip:content-box}:host .zonos--hello-dialog::-webkit-scrollbar-thumb:hover{background:#999}:host .zonos--hello-dialog .zonos--animate-content{opacity:0;height:0;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}:host .zonos--hello-dialog .zonos--show-animate-content{opacity:1;height:100%}:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}:host .zonos--hello-dialog .zonos--close-button{position:absolute;right:8px;top:8px;width:var(--zonos-elements-size-md);height:var(--zonos-elements-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;z-index:10}:host .zonos--hello-dialog .zonos--close-button:hover{background:var(--zonos-elements-hover-color);border-radius:var(--zonos-elements-radius-6)}:host .zonos--hello-dialog .zonos--hello-dialog-content{padding:16px}:host .zonos--hello-dialog .zonos--hello-dialog-content .zonos--hello-country-flag{border-radius:var(--zonos-elements-radius-4);width:32px;height:24px}:host .zonos--hello-dialog .zonos--flex-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:500px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}@media (max-height: 600px){:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override{max-height:80vh}}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-mobile-override.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}@media (max-width: 768px){:host .zonos--hello-dialog{position:-webkit-sticky;position:sticky;top:unset;left:unset;right:unset;bottom:0;width:100vw;max-width:100vw;max-height:500px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;-webkit-transform:scaleY(0);transform:scaleY(0);border-radius:0;-webkit-transform-origin:bottom;transform-origin:bottom}}@media (max-width: 768px) and (max-height: 600px){:host .zonos--hello-dialog{max-height:80vh}}@media (max-width: 768px){:host .zonos--hello-dialog.zonos--hello-dialog-animate-from-left{-webkit-transform-origin:bottom;transform-origin:bottom}:host .zonos--hello-dialog.zonos--hello-dialog-open{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1)}}";
 const ZonosHelloDialogStyle0 = zonosHelloDialogCss;
 
-const dutyTaxMessage_AU_lowValueGST = `${translate('The low-value GST law passed July 1st, 2018 applies to this retailer.')} ${wrapStringWithLink({
-    href: 'https://zonos.com/docs/global-ecommerce/landed-cost/tax-remittance/australia-gst',
-    text: translate('Learn more.'),
-})}`;
 const ZonosHelloDialog = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.closeDialog = createEvent(this, "closeDialog", 7);
+        /**
+         * Whether or not the dialog is open
+         */
+        this.isOpen = false;
+        /**
+         * The function to set the open state
+         * @default () => {}
+         */
+        this.setIsOpen = () => { };
+        /**
+         * Item restrictions array if any
+         * @default []
+         */
+        this.restrictedItems = [];
+        this.welcomeMessage = 'Welcome to our Demo App!';
+        this.showCountrySelect = false;
+        this.showLanguageSelect = false;
         this.clickOutsideDialogHandler = (e) => {
             if (!e.composedPath().includes(this.dialogRef) && this.isOpen) {
                 this.setIsOpen(false);
@@ -105,18 +119,25 @@ const ZonosHelloDialog = class {
             if (!countryCode || !this.hasTaxId()) {
                 return false;
             }
-            return ['AU'].includes(countryCode);
+            const countryCodes = [
+                'AU',
+                'NZ',
+                'GB',
+                'NO',
+                'SG',
+                ...euCountryCodes,
+            ];
+            return countryCodes.includes(countryCode);
         };
         this.getDutyMessage = () => {
-            const { countryLandedCost } = localizationStore;
+            const countryLandedCost = localizationStore.countryLandedCost;
             // Our Robby API spells deminimis wrong here
             const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
                 ? currencyFormat({ amount: countryLandedCost.dutyDeminimus })
                 : null;
             // If deminimis is undefined or null, assume it's $0
-            return dutyDeminimis &&
-                !this.isNoThresholdCountry(countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.countryCode)
-                ? translate('Spend [threshold] duty free.', {
+            return dutyDeminimis
+                ? translate('Spend up to [threshold] duty free.', {
                     threshold: dutyDeminimis,
                 })
                 : translate('Duties will apply to all orders.');
@@ -129,15 +150,31 @@ const ZonosHelloDialog = class {
                 : null;
             return taxDeminimis &&
                 !this.isNoThresholdCountry(countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.countryCode)
-                ? translate('Spend [threshold] tax free.', {
+                ? translate('Spend up to [threshold] tax free.', {
                     threshold: taxDeminimis,
                 })
                 : translate('Taxes will apply to all orders.');
         };
+        this.getEuDutyTaxMessage = (landedCost) => {
+            return [
+                `${translate('Due to the IOSS tax law, all orders will be assessed at [percentage] VAT regardless of order total.', {
+                    percentage: `${landedCost.vatTaxRate * 100}%`,
+                })} ${wrapStringWithLink({
+                    href: 'https://zonos.com/docs/global-ecommerce/landed-cost/tax-remittance/european-ioss',
+                    text: translate('Learn more.'),
+                })}`,
+            ];
+        };
         this.getUkDutyTaxMessage = (landedCost) => {
             if (landedCost.allowLowValueOrders) {
-                // show nothing if low value orders are allowed
-                return null;
+                return [
+                    `${translate('Due to the UK tax law, all orders will be assessed at [percentage] VAT regardless of order total.', {
+                        percentage: `${landedCost.vatTaxRate * 100}%`,
+                    })} ${wrapStringWithLink({
+                        href: 'https://zonos.com/docs/global-ecommerce/landed-cost/tax-remittance/european-ioss',
+                        text: translate('Learn more.'),
+                    })}`,
+                ];
             }
             const dutyDeminimis = landedCost.dutyDeminimus;
             return [
@@ -149,13 +186,15 @@ const ZonosHelloDialog = class {
         };
         this.getAustraliaDutyTaxMessage = (landedCost) => {
             if (this.hasInclusivePrices()) {
-                return [dutyTaxMessage_AU_lowValueGST];
+                return [];
             }
             return [
-                translate('Duties & taxes in Australia, VAT or GST is [percentage] and is due on all orders.', {
+                `${translate('Due to the Australia tax law, all orders will be assessed at [percentage] GST regardless of order total.', {
                     percentage: `${landedCost.vatTaxRate * 100}%`,
-                }),
-                dutyTaxMessage_AU_lowValueGST,
+                })} ${wrapStringWithLink({
+                    href: 'https://zonos.com/docs/global-ecommerce/landed-cost/tax-remittance/australia-gst',
+                    text: translate('Learn more.'),
+                })}`,
             ];
         };
         this.getNewZealandDutyTaxMessge = (landedCost) => {
@@ -163,10 +202,38 @@ const ZonosHelloDialog = class {
                 return null;
             }
             return [
-                translate('[percentage] GST due on any order above [threshold] along with an import entry transaction fee and MPI levy.', {
+                `${translate('Due to the New Zealand tax law, all orders will be assessed at [percentage] GST regardless of order total.', {
                     percentage: `${landedCost.vatTaxRate * 100}%`,
-                    threshold: currencyFormat({ amount: landedCost.vatTaxDeminimus }),
-                }),
+                })} ${wrapStringWithLink({
+                    href: 'https://zonos.com/docs/guides/country-guides/new-zealand/new-zealand-import-taxes',
+                    text: translate('Learn more.'),
+                })}`,
+            ];
+        };
+        this.getNorwayDutyTaxMessage = (landedCost) => {
+            if (this.hasInclusivePrices()) {
+                return null;
+            }
+            return [
+                `${translate('Due to the VOEC tax law, all orders will be assessed at [percentage] VAT regardless of order total.', {
+                    percentage: `${landedCost.vatTaxRate * 100}%`,
+                })} ${wrapStringWithLink({
+                    href: 'https://zonos.com/docs/guides/country-guides/norway-voec-scheme',
+                    text: translate('Learn more.'),
+                })}`,
+            ];
+        };
+        this.getSingaporeDutyTaxMessage = (landedCost) => {
+            if (this.hasInclusivePrices()) {
+                return null;
+            }
+            return [
+                `${translate('Due to the Singapore tax law, all orders will be assessed at [percentage] GST regardless of order total.', {
+                    percentage: `${landedCost.vatTaxRate * 100}%`,
+                })} ${wrapStringWithLink({
+                    href: 'https://zonos.com/docs/global-ecommerce/landed-cost/tax-remittance/singapore-gst-settings',
+                    text: translate('Learn more.'),
+                })}`,
             ];
         };
         this.getInclusivePriceMessage = () => {
@@ -220,20 +287,19 @@ const ZonosHelloDialog = class {
                     return this.getAustraliaDutyTaxMessage(localizationStore.countryLandedCost);
                 case 'NZ':
                     return this.getNewZealandDutyTaxMessge(localizationStore.countryLandedCost);
+                case 'NO':
+                    return this.getNorwayDutyTaxMessage(localizationStore.countryLandedCost);
+                case 'SG':
+                    return this.getSingaporeDutyTaxMessage(localizationStore.countryLandedCost);
                 default:
+                    // show EU duty tax message if country is in EU
+                    if (euCountryCodes.includes(localizationStore.countryLandedCost.countryCode)) {
+                        return this.getEuDutyTaxMessage(localizationStore.countryLandedCost);
+                    }
                     // show nothing
                     return null;
             }
         };
-        this.isOpen = false;
-        this.setIsOpen = () => { };
-        this.mobileLocationOverride = undefined;
-        this.animateFromLeftOverride = undefined;
-        this.appearanceSettings = undefined;
-        this.restrictedItems = [];
-        this.welcomeMessage = 'Welcome to our Demo App!';
-        this.showCountrySelect = false;
-        this.showLanguageSelect = false;
     }
     globalClickHandler(e) {
         this.clickOutsideDialogHandler(e);
@@ -267,18 +333,18 @@ const ZonosHelloDialog = class {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '7b6752f327fdefb40d272d30d50a5fd208ff69a6', class: "zonos--elements" }, h("div", { key: 'b03b78ddfb3a0d6cedb156161fd82ebe45926773', class: classes([
+        return (h(Host, { key: '0830447fd72c987521c1790936f64948c28e368a', class: "zonos--elements" }, h("div", { key: '945b144257ac98cd3e18484b5df7c656967ed4bb', class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '367b5a0158679001cb3004d5d965a518cdc3b8ce' }, h("div", { key: '01dd9b2df5b20e61764274a6405118a7b42019f3', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'ed49fe9a95fd6ace11669ee194d90eaae951d938', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '23d391b8f4a13a1b077333f7ac788306dbeb98d6', spacing: 24 }, h("zonos-country-flag", { key: '24c6682b66fe5aa5061bab0b260d6c6fed724f52', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'fcb2717fa3403337b507f64adb557bd300841a41', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '013fbda529816a2a1f22fc9d524d087fd69145c8', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '2134a015a6e22f6e02db8935150055b04620eed8', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '67030faaca46fea72230037b594eb3d0abb18acb', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'd4281bee820f6f1c0128a27a68637d9cf14bb9df' }, h("div", { key: '2eb86efbcf9a69fcad628fff00d6f4834026f720', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '54c1db50880af58304586091a2c96b63d21939b9', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '4814c176342c0a81379e499c9e9c9fff2611ca30', spacing: 24 }, h("zonos-country-flag", { key: 'a96e2f98b8d34d9c9b85e7b1989e6c29a9efb319', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'bdfcfa7d339c007df770101d8a63433d40be6ce2', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '7bebb2baef3b43444325b8755d9de41f7617a30a', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'cc5e7c2dda01e545a1d85bbbb1e5cab53ab27574', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: 'dbd3743ea89e59796b8f0a7c90eb4bf2564212ad', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), h("zonos-card", { key: '21d50e218fd560e137b68e6d2a16edf118d18148', spacing: "12px" }, h("zonos-v-stack", { key: '70c333afd352aee4a92b47b58c267ec5c6ff122c', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '7fa2a3e7646668c37ad2026dcfe0d59d6fd350b8', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '9a59a41f8ffbef2361ada0d5390708232c829026' }, h("zonos-country-select", { key: '3f10795b4eb5695e9848e2c69611f1a4953f5370', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'c4aa8b2d533e6735a587fc8c7eb217f52e1fc5c9' }, h("zonos-language-select", { key: 'eb75fbe3e7de95b0459d559ac7ee233b77873545', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: '428f00f603d782b9496d40049571e3ea9dad57ba', spacing: "12px" }, h("zonos-v-stack", { key: '1433a878c9782cb57cbe85d83bdbe090d0e5d610', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis icon", content: ImportIcon }), h("zonos-text", { "aria-label": "Duty de minimis message" }, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis icon", content: MoneyIcon }), h("zonos-text", { "aria-label": "Tax de minimis message" }, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country icon", content: BagIcon }), h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '09e8b05e240cd995e16c0f736df6ef66d9fff511', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '1ed01c7f23d1b1f5a1e95d39e614e748ea407d6f' }, h("zonos-country-select", { key: 'b8c249f2e9f902e444b22371e9581be7ab34f07a', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'cc6066e1e0eba08130342cef80ecdcd8c2e53e49' }, h("zonos-language-select", { key: 'c803df7ce92321f72d48a39eddcf1bbd3e279738', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as debounce_1 } from './debounce-3a9f27a0.js';
-import { l as localizationStore, i as isValidSelector, t as translate, g as getZCountryUrlParam, h as setZCountryUrlParam, j as currencyDisplay, k as currencyConvertAndFormat, m as currencyConvert, d as currencyFormat } from './localization-bf7224aa.js';
-import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-d10a829f.js';
+import { r as registerInstance, h, H as Host } from './index-5ea9f81d.js';
+import { d as debounce_1 } from './debounce-eaee3a94.js';
+import { l as localizationStore, i as isValidSelector, t as translate, g as getZCountryUrlParam, h as setZCountryUrlParam, j as currencyDisplay, k as currencyConvertAndFormat, m as currencyConvert, d as currencyFormat } from './localization-4c7f64e8.js';
+import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-1e015fa5.js';
 import { c as classes } from './classes-0d95c529.js';
 import { h as handleFetch, b as logError, l as log } from './handleFetch-621e45bc.js';
 import { g as getHasMoreSpaceOnRight } from './getHasMoreSpaceOnRight-70eb913a.js';
@@ -123,6 +123,31 @@ const PEEK_MESSAGE_CLOSE_DELAY_MS = 3000;
 const ZonosHello = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.showPeekMessage = false;
+        this.zonosStoreHelloSettings = 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.currentHelloPage === 'productDetail' ||
                 zonosStore.currentHelloPage === 'productList';
@@ -297,19 +322,6 @@ const ZonosHello = class {
             }
             return showForCountries === null || showForCountries === void 0 ? void 0 : showForCountries.includes(localizationStore.selectedCountryCode || '');
         };
-        this.mobileLocationOverride = undefined;
-        this.animateFromLeftOverride = undefined;
-        this.appearanceSettingsOverride = undefined;
-        this.showPeekMessage = false;
-        this.zonosStoreHelloSettings = 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/esm/zonos-input.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-5ea9f81d.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
+import { g as getBorderRadius } from './getBorderRadius-b18c924f.js';
 import './VarianceTest-fef2d958.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}";
@@ -11,11 +11,25 @@ const ZonosInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.inputChange = 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/esm/zonos-language-select_2.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { p as localizationStoreUpdateSelectedLocale, t as translate, l as localizationStore } from './localization-bf7224aa.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
+import { r as registerInstance, h, H as Host } from './index-5ea9f81d.js';
+import { p as localizationStoreUpdateSelectedLocale, t as translate, l as localizationStore } from './localization-4c7f64e8.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
 import './handleFetch-621e45bc.js';
 import './VarianceTest-fef2d958.js';
@@ -17,12 +17,16 @@ const ZonosLanguageSelectStyle0 = zonosLanguageSelectCss;
 const ZonosLanguageSelect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Function to close the language select
+         * @default () => {}
+         */
+        this.handleOnClose = () => { };
         this.languageSelected = (languageCode) => {
             // mutate the selected language code in store
             void localizationStoreUpdateSelectedLocale(languageCode);
             this.handleOnClose();
         };
-        this.handleOnClose = () => { };
     }
     render() {
         const { selectedLocale } = localizationStore;
@@ -41,7 +45,14 @@ const ZonosSelectDialogHeaderStyle0 = zonosSelectDialogHeaderCss;
 const ZonosSelectDialogHeader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Callback to do something on close
+         * @default () => {}
+         */
         this.handleOnClose = () => { };
+        /**
+         * The label for the select dialog
+         */
         this.label = '';
     }
     render() {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
+import { r as registerInstance, h, H as Host } from './index-5ea9f81d.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;
@@ -6,10 +6,10 @@ const ZonosLinkStyle0 = zonosLinkCss;
 const ZonosLink = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * The href for the link
+         */
         this.href = '';
-        this.rel = undefined;
-        this.target = undefined;
-        this.linkTitle = undefined;
     }
     render() {
         return (h(Host, { key: '41f0a757a334338631250764599ac99e28c41ed2', class: "zonos--elements" }, h("a", { key: 'b6e84f40141e8de85d005c05426f885f242ffc53', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'dd5ed33f163d7958fb7806992e003d2279ee1f5b' }))));

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, a as getAssetPath, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
+import { r as registerInstance, h, a as getAssetPath, H as Host } from './index-5ea9f81d.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
 import { c as classes } from './classes-0d95c529.js';
 import './VarianceTest-fef2d958.js';
 
@@ -9,7 +9,13 @@ const ZonosLogoStyle0 = zonosLogoCss;
 const ZonosLogo = class {
     constructor(hostRef) {
         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/esm/zonos-shipping-rich-radio.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore-d10a829f.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5ea9f81d.js';
+import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore-1e015fa5.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
+import { g as getBorderRadius } from './getBorderRadius-b18c924f.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
 import './VarianceTest-fef2d958.js';
 
@@ -12,6 +12,11 @@ const ZonosShippingRichRadio = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.radioSelected = 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);
@@ -28,11 +33,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/esm/zonos-stripe-input.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore-d10a829f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-5ea9f81d.js';
+import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore-1e015fa5.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './helpers-2f6955b1.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
-import { i as isDarkColor } from './isDarkColor-31dd7dff.js';
+import { g as getBorderRadius } from './getBorderRadius-b18c924f.js';
+import { i as isDarkColor } from './isDarkColor-d8bb8659.js';
 import './VarianceTest-fef2d958.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}";
@@ -19,17 +19,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/esm/zonos-text.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore-d10a829f.js';
+import { r as registerInstance, h, H as Host } from './index-5ea9f81d.js';
+import { d as zonosStoreFontFamily, z as zonosStore } from './zonosStore-1e015fa5.js';
 import { c as classes } from './classes-0d95c529.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
 import { s as styles } from './styles-6fc2fad9.js';
@@ -111,10 +111,17 @@ const ZonosTextStyle0 = zonosTextCss;
 const ZonosText = class {
     constructor(hostRef) {
         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/esm/zonos-toggle.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5ea9f81d.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1e015fa5.js';
 import { c as classes } from './classes-0d95c529.js';
 import './VarianceTest-fef2d958.js';
 
@@ -10,8 +10,10 @@ const ZonosToggle = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.toggleChanged = createEvent(this, "toggleChanged", 7);
+        /**
+         * Options for the toggle
+         */
         this.options = [];
-        this.value = undefined;
     }
     render() {
         return (h(Host, { key: '9a526e8fee8e4c5af558442c82f7acbc634706c3', class: classes(['zonos--elements zonos--toggle']), style: {