@zonos/elements 1.3.11-alpha.0 → 1.3.11-alpha.1

package/dist/cjs/zonos-country-select_3.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const cart = require('./cart-7e28f026.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
+const cart = require('./cart-d9e9ecfc.js');
+const zonosStore = require('./zonosStore-21334303.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
-const isDarkColor = require('./isDarkColor-33fb96a7.js');
+const isDarkColor = require('./isDarkColor-a68274cf.js');
 const ILanguage = require('./ILanguage-d247b45b.js');
-require('./getBorderRadius-d795f526.js');
+require('./getBorderRadius-9d619bf6.js');
 
 /**
  * Fuse.js v6.6.2 - Lightweight fuzzy-search (http://fusejs.io)
@@ -1830,9 +1830,9 @@ const ZonosCountrySelect = class {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (index.h(index.Host, { key: '2b8e15643f92ac489706aff7623b1d1efdebce70', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '0024a7061a593cf3c92fd7f6b5916aaac3a835c9', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '06b0c7765d8144ca102c9033e74cf1edb14743ac', class: "zonos--country-select" }, index.h("zonos-v-stack", { key: 'f2af99575f518acb753448f7cb1f7aecd790de9d', class: "zonos--country-select-header", spacing: 8 }, index.h("zonos-select-dialog-header", { key: '296b92c476439aace00f6817b452a3fd3e1d353d', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, index.h("input", { key: 'd988b856392f88a66bcc3016ccf55107bda4a411', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), index.h("div", { key: '4376bec824141dd7d2dbfb84f465ac4a48e1d050', class: "zonos--country-select-content" }, filteredCountries.map(country => (index.h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), index.h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === cart.localizationStore.selectedCountryCode && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, index.h("div", { key: 'e6ef5d8cc13e731c94ee5ef037c02eac36d9bce6', class: "zonos--country-select" }, index.h("zonos-v-stack", { key: 'f698da7688757b6728e99e0cecb21ac4ce586d30', class: "zonos--country-select-header", spacing: 8 }, index.h("zonos-select-dialog-header", { key: 'd37801e6023262a582d3ecc6e3a39f505f7e82b8', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, index.h("input", { key: '6f053c963f5e25b5285a94070336650537bbdad3', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), index.h("div", { key: '3d3e180b204bf9fa0893fec7839f1d0d5c4740c1', class: "zonos--country-select-content" }, filteredCountries.map(country => (index.h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), index.h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === cart.localizationStore.selectedCountryCode && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     get ele() { return index.getElement(this); }
 };
@@ -1849,7 +1849,7 @@ const ZonosCustomMessage = class {
     }
     render() {
         const messageWithLinks = formatStringWithLinks.formatStringWithLinks(this.message);
-        return (index.h(index.Host, { key: '73091a3267f0989e8820800054aebc75168dc5d6', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'b09b7025fb55c4323aaa24ccb7e410d1638bed8a', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
             } }, this.message && (index.h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Custom message icon", content: this.icon }), index.h("zonos-text", { innerHTML: messageWithLinks }))))));
     }
@@ -1883,9 +1883,9 @@ const ZonosHelloDialogFooter = class {
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor.isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = ILanguage.languages.find(x => x.code === cart.localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (index.h(index.Host, { key: 'f97688788d9f6d1a640f054a2a22dbae6955b83c', class: "zonos--elements" }, index.h("div", { key: '3539323f9044acef3890fc072bdd981e2495fc18', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (index.h(index.Host, { key: 'ae185b9859f64fea077e093af2decc170f24170b', class: "zonos--elements" }, index.h("div", { key: 'c472973505ab6cde075af193df735d0524fc35a0', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
                 '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-            } }, index.h("a", { key: '5e30052240f87211c6f0092ef6a27c217f3ecefb', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: 'c60142bcd26086c2944ac3464885ca1f96e5cfbe', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), index.h("div", { key: '67297b4c557ee5b49a4406a459588f2924183195', class: "zonos--hello-locale-wrapper" }, index.h("zonos-button", { key: '9348bff826187730f36d191f7e01f516f2b9785c', buttonColor: "gray-1200", icon: index.h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), index.h("zonos-button", { key: 'ecf1a8639e8e92a07a0e774abb560de53c19587c', buttonColor: "gray-1200", icon: index.h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: cart.localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, cart.localizationStore.selectedCountryCode)))));
+            } }, index.h("a", { key: '95cb8c09a3a3f566365f0044d6fcdcf6a82facee', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: 'e11df129f087f9de259c2f24bd294f8d0a881e0d', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), index.h("div", { key: 'df26ef41d24395a2db6d8e3c9dc83a62e0e707ef', class: "zonos--hello-locale-wrapper" }, index.h("zonos-button", { key: '9b1797c3fdd17044fecb6ae4526d3c053d1ab59a', buttonColor: "gray-1200", icon: index.h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), index.h("zonos-button", { key: 'eac17e7e84dc2a80abfcbaed3753512e6358f8db', buttonColor: "gray-1200", icon: index.h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: cart.localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, cart.localizationStore.selectedCountryCode)))));
     }
 };
 ZonosHelloDialogFooter.style = ZonosHelloDialogFooterStyle0;

package/dist/cjs/zonos-elements.cjs.js

@@ -19,7 +19,7 @@ const patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["zonos-checkout.cjs",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"domesticRedirectedBtnSelector":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged"],"mobile":["handleMobileChange"]}]]],["zonos-hello.cjs",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64],"openHelloDialog":[64]},[[9,"resize","handleResize"]]]]],["zonos-controller.cjs",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-link.cjs",[[1,"zonos-link",{"href":[1],"rel":[1],"target":[1],"linkTitle":[1,"link-title"]}]]],["zonos-logo.cjs",[[1,"zonos-logo",{"theme":[1],"width":[1]}]]],["zonos-text.cjs",[[1,"zonos-text",{"textColor":[1,"text-color"],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-hello-dialog.cjs",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32],"showLanguageSelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"notificationArray":[32],"showNotification":[64]}]]],["zonos-payment.cjs",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio.cjs",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"selectedItem":[32]}]]],["zonos-badge_2.cjs",[[1,"zonos-badge",{"bold":[4],"badgeColor":[1,"badge-color"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4]}],[1,"zonos-tooltip",{"label":[1],"subtitle":[1],"showTooltip":[32]}]]],["zonos-country-flag.cjs",[[1,"zonos-country-flag",{"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"hasContent":[32]}]]],["zonos-button_3.cjs",[[1,"zonos-button",{"buttonColor":[1,"button-color"],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"variant":[1],"noBackground":[4,"no-background"],"noPaddingLeft":[4,"no-padding-left"],"noPaddingRight":[4,"no-padding-right"],"loading":[4],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"iconColor":[1,"icon-color"],"content":[1],"size":[2]}],[1,"zonos-spinner",{"size":[2],"spinnerColor":[1,"spinner-color"]}]]],["zonos-select-dialog-header_2.cjs",[[1,"zonos-select-dialog-header",{"handleOnClose":[16],"label":[1]}],[1,"zonos-v-stack",{"spacing":[2]}]]],["zonos-card_2.cjs",[[1,"zonos-language-select",{"handleOnClose":[16]}],[1,"zonos-card",{"actions":[16],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}]]],["zonos-country-select_3.cjs",[[1,"zonos-country-select",{"handleOnClose":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16],"setShowLanguageSelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}]]],["zonos-address_4.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"hasInvalidCharacters":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-checkbox",{"backgroundColor":[1,"background-color"],"label":[1],"isChecked":[4,"is-checked"],"isDisabled":[4,"is-disabled"],"size":[2],"fontSize":[1,"font-size"],"borderStyle":[1,"border-style"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32],"iframe":[32]}]]],["zonos-cart-items_9.cjs",[[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32],"hasInvalidShippingCharacters":[32],"hasInvalidBillingCharacters":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-checkout-footer",{"showDialog":[32]},[[4,"click","handleGlobalClick"]]],[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-cart-subtotal"],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"footerRightAction":[16],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}]]]], options);
+  return index.bootstrapLazy([["zonos-checkout.cjs",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"domesticRedirectedBtnSelector":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged"],"mobile":["handleMobileChange"]}]]],["zonos-hello.cjs",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64],"openHelloDialog":[64]},[[9,"resize","handleResize"]]]]],["zonos-controller.cjs",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-link.cjs",[[1,"zonos-link",{"href":[1],"rel":[1],"target":[1],"linkTitle":[1,"link-title"]}]]],["zonos-logo.cjs",[[1,"zonos-logo",{"theme":[1],"width":[1]}]]],["zonos-text.cjs",[[1,"zonos-text",{"textColor":[1,"text-color"],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-hello-dialog.cjs",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32],"showLanguageSelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"notificationArray":[32],"showNotification":[64]}]]],["zonos-payment.cjs",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio.cjs",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"initialSelectedValue":[8,"initial-selected-value"],"selectedItem":[32]}]]],["zonos-badge_2.cjs",[[1,"zonos-badge",{"bold":[4],"badgeColor":[1,"badge-color"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4]}],[1,"zonos-tooltip",{"label":[1],"subtitle":[1],"showTooltip":[32]}]]],["zonos-country-flag.cjs",[[1,"zonos-country-flag",{"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"hasContent":[32]}]]],["zonos-icon.cjs",[[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"iconColor":[1,"icon-color"],"content":[1],"size":[2]}]]],["zonos-button_2.cjs",[[1,"zonos-button",{"buttonColor":[1,"button-color"],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"variant":[1],"noBackground":[4,"no-background"],"noPaddingLeft":[4,"no-padding-left"],"noPaddingRight":[4,"no-padding-right"],"loading":[4],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-spinner",{"size":[2],"spinnerColor":[1,"spinner-color"]}]]],["zonos-select-dialog-header_2.cjs",[[1,"zonos-select-dialog-header",{"handleOnClose":[16],"label":[1]}],[1,"zonos-v-stack",{"spacing":[2]}]]],["zonos-card_2.cjs",[[1,"zonos-language-select",{"handleOnClose":[16]}],[1,"zonos-card",{"actions":[16],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}]]],["zonos-country-select_3.cjs",[[1,"zonos-country-select",{"handleOnClose":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16],"setShowLanguageSelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}]]],["zonos-address_4.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"hasInvalidCharacters":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-checkbox",{"backgroundColor":[1,"background-color"],"label":[1],"isChecked":[4,"is-checked"],"isDisabled":[4,"is-disabled"],"size":[2],"fontSize":[1,"font-size"],"borderStyle":[1,"border-style"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32],"iframe":[32]}]]],["zonos-cart-items_10.cjs",[[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32],"hasInvalidShippingCharacters":[32],"hasInvalidBillingCharacters":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-checkout-footer",{"mobile":[4],"dataTheme":[1,"data-theme"],"showLanguageDialog":[32],"isMobile":[32]},[[4,"click","handleGlobalClick"]],{"mobile":["handleMobileChange"]}],[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"isSelecting":[32],"disabled":[32],"serviceLevels":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-cart-subtotal"],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-checkout-progress-tabs",{"tabColor":[1,"tab-color"],"backgroundColor":[1,"background-color"],"setTabItems":[64],"setTabSelected":[64]}],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const cart = require('./cart-7e28f026.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
+const cart = require('./cart-d9e9ecfc.js');
+const zonosStore = require('./zonosStore-21334303.js');
 const classes = require('./classes-b7918f56.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
-require('./isDarkColor-33fb96a7.js');
-require('./getBorderRadius-d795f526.js');
+require('./isDarkColor-a68274cf.js');
+require('./getBorderRadius-9d619bf6.js');
 
 const getHasMoreSpaceAbove = (ref) => {
     const componentRect = ref.getBoundingClientRect();
@@ -122,7 +122,7 @@ const ZonosHelloDialog = class {
         const defaultMessage = formatStringWithLinks.formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (index.h(index.Host, { key: 'd5ac86955cf9f9a22e47fe2154dee6e10f6a9361', class: "zonos--elements" }, index.h("div", { key: 'd34dd3f937330cd5fdd2d7a11dc321c215983146', "aria-hidden": "true", class: classes.classes([
+        return (index.h(index.Host, { key: 'a9e9d5946604f86ea0680af79ece9e079d4d00d7', class: "zonos--elements" }, index.h("div", { key: '47ed38de794c10b5689778257d134006c109c101', "aria-hidden": "true", class: classes.classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
-const cart = require('./cart-7e28f026.js');
+const zonosStore = require('./zonosStore-21334303.js');
+const cart = require('./cart-d9e9ecfc.js');
 const classes = require('./classes-b7918f56.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
-require('./isDarkColor-33fb96a7.js');
-require('./getBorderRadius-d795f526.js');
+require('./isDarkColor-a68274cf.js');
+require('./getBorderRadius-9d619bf6.js');
 
 var root = zonosStore._root;
 

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-564fe383.js');
+const zonosStore = require('./zonosStore-21334303.js');
+const isColorVariable = require('./isColorVariable-fff5e469.js');
+
+const zonosIconCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";
+const ZonosIconStyle0 = zonosIconCss;
+
+const ZonosIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.autoHeight = false;
+        this.iconColor = 'gray-1200';
+        this.content = undefined;
+        this.size = 24;
+    }
+    render() {
+        if (!this.content || !this.el.shadowRoot) {
+            return null;
+        }
+        const iconColor = isColorVariable.isColorVariable(this.iconColor)
+            ? `var(--amino-${this.iconColor})`
+            : this.iconColor;
+        this.el.shadowRoot.innerHTML = this.content;
+        return (index.h(index.Host, { class: "zonos--elements", style: {
+                '--color': iconColor,
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+                '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
+                '--width': `${this.size}px`,
+            } }));
+    }
+    get el() { return index.getElement(this); }
+};
+ZonosIcon.style = ZonosIconStyle0;
+
+exports.zonos_icon = ZonosIcon;

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

@@ -16,7 +16,7 @@ const ZonosLink = class {
         this.linkTitle = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '99bf9ff46cf84f424739b76d3da8a8c770c0a88f', class: "zonos--elements" }, index.h("a", { key: 'bd3553a33f27b4815a7b0573a34862093242b456', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: 'ad80829c1ca5cd9b0e2dd62542025eeecf436196' }))));
+        return (index.h(index.Host, { key: 'b4def20f1c697c437e98c35e7355e84bfea88be2', class: "zonos--elements" }, index.h("a", { key: '8bb78fc9f3a38256cc3e7cda104c7eec1c93d185', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '897301f324059f6917a71f9ed444ddae32535485' }))));
     }
 };
 ZonosLink.style = ZonosLinkStyle0;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
+const zonosStore = require('./zonosStore-21334303.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosLogoCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
@@ -19,11 +19,11 @@ const ZonosLogo = class {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (index.h(index.Host, { key: 'b93db6ec62ecaacb3ded0ab07dd2f38ed488f8d1', class: classes.classes(['zonos--elements zonos--logo']), style: {
+        return (index.h(index.Host, { key: '483016f5ffe43ea7742e895b5335212da6ec1d18', class: classes.classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, index.h("img", { key: '026162477b24250e4204318fa3018b1cfd383ab5', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
+            } }, index.h("img", { key: 'aed23717de194da43d48ee7b068f3e7568c0bbb3', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
+const zonosStore = require('./zonosStore-21334303.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosNotificationCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:var(--amino-space-24);gap:var(--amino-space-8);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:var(--amino-space-8);border-radius:var(--border-radius, var(--amino-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--amino-green-700)}:host .zonos--notification-item.error{background-color:var(--amino-red-700)}:host .zonos--notification-item.warning{background-color:var(--amino-orange-700)}";

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const cart = require('./cart-7e28f026.js');
-require('./zonosStore-d3f0173b.js');
-require('./isDarkColor-33fb96a7.js');
-require('./getBorderRadius-d795f526.js');
+const cart = require('./cart-d9e9ecfc.js');
+require('./zonosStore-21334303.js');
+require('./isDarkColor-a68274cf.js');
+require('./getBorderRadius-9d619bf6.js');
 
 const zonosPaymentCss = ".sc-zonos-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-payment-h *.sc-zonos-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:var(--amino-space-16)}";
 const ZonosPaymentStyle0 = zonosPaymentCss;
@@ -44,7 +44,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: 'e10a4ce1a9ecf05ad8efaceeb861284a92e475d2', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: 'a1b52de6a2cec2f707e00c39ebcd7752ad191af6', class: "zonos--payment-component" })));
+        return (index.h(index.Host, { key: 'db50fedad509b3bc972cfe02d5973a3c93a6eb23', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: 'a773ce78377a70c57577eb1efdac9d2563d1a60d', class: "zonos--payment-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/zonos-select-dialog-header_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
+const zonosStore = require('./zonosStore-21334303.js');
 const classes = require('./classes-b7918f56.js');
 
 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>`;
@@ -18,9 +18,9 @@ const ZonosSelectDialogHeader = class {
         this.label = '';
     }
     render() {
-        return (index.h(index.Host, { key: 'd0882c22934d6f9635bd0b31af5703283cd0a1be', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'e7867deee86e4a155c21db2618eafd6f3c6cea3b', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("zonos-v-stack", { key: '2e227c5bdeeeb0fa772847267007df5aea2e0824', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: 'c43b72c938069ff1a99a985b3b388a785f94d100', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: 'b1008e43ca022ca1e1b63a60ab5c347d1228396e', type: "boldLabel" }, this.label), index.h("zonos-button", { key: '4722586c58eac765ded4a7baeeca8eb58d44dd0a', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: '36babf745ea5de00c82823520134b1dfcfc9d16d' }))));
+            } }, index.h("zonos-v-stack", { key: 'f7aedb0f819b61da26afd53add628bcddcca5d8a', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '7ec77c24a440a5d42965f657502506c769d3098c', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: 'bab0ffc53edd20840438e82c0067c1eae8f13ec7', type: "boldLabel" }, this.label), index.h("zonos-button", { key: 'a85fc2b745b25c07bcccfe60eb1f1e722c7999c2', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: 'fe932e62edd5f679061c76a62650885d4337363c' }))));
     }
 };
 ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;
@@ -34,9 +34,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: 'a5d1a84d5b25d1a49abec676731eaf76f703e998', style: {
+        return (index.h(index.Host, { key: '3d9977f4c55f7f1047ec94dcc3a3c40105559c00', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '456c8e1865a752dd258989888c45dfbdfd2c4f66', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '2d3260c6b74d3def822acb98733f70a97a79f3fa' }))));
+            } }, index.h("div", { key: 'aa910d4f9a11d3d1a66836aed442726241b73273', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'ec50cc05f71018b4b6fef1288f1371ddde030a3a' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
+const zonosStore = require('./zonosStore-21334303.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-d795f526.js');
-const isColorVariable = require('./isColorVariable-41cacd82.js');
+const getBorderRadius = require('./getBorderRadius-9d619bf6.js');
+const isColorVariable = require('./isColorVariable-fff5e469.js');
 
 const zonosShippingRichRadioCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--amino-space-16);-ms-flex-align:center;align-items:center;gap:var(--amino-space-16);cursor:pointer;border:1px solid var(--amino-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--amino-radius-10));border-top-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--amino-radius-10));border-bottom-left-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--amino-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";
 const ZonosShippingRichRadioStyle0 = zonosShippingRichRadioCss;
@@ -34,11 +34,20 @@ const ZonosShippingRichRadio = class {
         this.borderColor = undefined;
         this.borderStyle = undefined;
         this.theme = undefined;
+        this.initialSelectedValue = undefined;
         this.selectedItem = null;
     }
+    componentWillLoad() {
+        // Set initial selected item
+        if (this.initialSelectedValue) {
+            this.selectedItem =
+                this.items.find(item => item.value === this.initialSelectedValue) ||
+                    null;
+        }
+    }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '0dc36a16b2f51816755010c46b416b8b1f4b4744', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStore.zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+        return (index.h(index.Host, { key: '3633e3be9f679c54647d475c9d1831428410302b', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStore.zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             var _a;
             const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
             return (index.h("div", { "aria-hidden": "true", class: classes.classes([

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
+const zonosStore = require('./zonosStore-21334303.js');
 const classes = require('./classes-b7918f56.js');
+const isColorVariable = require('./isColorVariable-fff5e469.js');
 
 const textOptions = {
     pageHeader: {
@@ -130,6 +131,9 @@ const ZonosText = class {
         const textSize = this.size || size || defaultSize;
         const textWeight = this.weight || weight || defaultWeight;
         const textTag = tag || defaultTag;
+        const actualTextColor = isColorVariable.isColorVariable(this.textColor)
+            ? `var(--amino-${this.textColor})`
+            : this.textColor;
         const renderText = () => {
             switch (textTag) {
                 case 'h2':
@@ -149,7 +153,7 @@ const ZonosText = class {
                 `zonos--text-size-${textSize}`,
                 `zonos--text-weight-${textWeight}`,
             ]), style: {
-                '--color': this.textColor ? `var(--amino-${this.textColor})` : '',
+                '--color': actualTextColor,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
             } }, renderText()));
     }

package/dist/cjs/{zonosStore-d3f0173b.js → zonosStore-21334303.js}

@@ -2761,7 +2761,7 @@ const mergeConfig = (defaultObj, fetchedObj, ...overrideObj) => {
 
 const { reset, state: zonosStore } = createStore(() => ({
     appearance: {
-        colorPrimary: 'purple',
+        colorPrimary: 'white',
         fontFamily: 'Inter',
         logoUrl: '',
         style: 'ROUNDED',

package/dist/collection/collection-manifest.json

@@ -18,6 +18,7 @@
     "components/common/zonos-button/zonos-button.js",
     "components/common/zonos-card/zonos-card.js",
     "components/common/zonos-checkbox/zonos-checkbox.js",
+    "components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js",
     "components/common/zonos-collapse/zonos-collapse.js",
     "components/common/zonos-country-flag/zonos-country-flag.js",
     "components/common/zonos-country-select/zonos-country-select.js",

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

@@ -31,18 +31,23 @@
   -webkit-font-smoothing: antialiased;
 }
 
-:host .zonos--checkout-footer {
+:host {
   position: absolute;
-  bottom: 0;
+  bottom: -50px;
   left: 0;
   right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+}
+:host .zonos--checkout-footer {
+  width: calc(90vw - 22px);
   gap: var(--amino-space-16);
   display: flex;
   justify-content: space-between;
-  border-top: var(--amino-border);
   padding: var(--amino-space-12);
   align-items: center;
-  background: var(--amino-surface-color-secondary);
 }
 :host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper {
   display: flex;
@@ -50,7 +55,7 @@
   gap: var(--amino-space-8);
 }
 :host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper a {
-  line-height: 0px;
+  line-height: 0;
 }
 :host .zonos--checkout-footer zonos-button button.outline {
   outline: 1px solid var(--amino-gray-800);
@@ -106,21 +111,26 @@
   opacity: 1;
   transform: scale(1);
 }
-@media (max-width: 768px) {
-  :host .zonos--checkout-footer {
-    flex-direction: column;
-    gap: var(--amino-space-32);
-    background-color: var(--amino-surface-color);
-    border-top: none;
-    position: relative;
-    padding-top: var(--amino-space-24);
-  }
-  :host .zonos--checkout-footer .zonos--checkout-footer-dialog {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transform-origin: bottom center;
-    width: 100vw;
-  }
+
+:host(.mobile) {
+  flex-direction: column;
+  gap: var(--amino-space-32);
+  background: var(--amino-gray-0);
+  position: relative;
+  padding-top: var(--amino-space-24);
+  bottom: 0;
+}
+:host(.mobile) .zonos--checkout-footer {
+  flex-direction: column;
+}
+:host(.mobile) .zonos--checkout-locale-wrapper {
+  flex-direction: column;
+}
+:host(.mobile) .zonos--checkout-footer-dialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform-origin: bottom center;
+  width: 100vw;
 }

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

@@ -1,8 +1,7 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { localizationStore } from "../../../store/hello/localization";
-import { zonosStore } from "../../../store/zonosStore";
+import { isCheckoutMobile } from "../../../utils/checkout/isCheckoutMobile";
 import { classes } from "../../../utils/classes";
-import { isDarkColor } from "../../../utils/isDarkColor";
 import { languages } from "../../../../types/ILanguage";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import Globe from "./assets/globe.svg";
@@ -10,25 +9,34 @@ import Globe from "./assets/globe.svg";
 import ZonosIcon from "./assets/zonosIcon.svg";
 export class ZonosCheckoutFooter {
     constructor() {
-        this.showDialog = false;
+        this.mobile = false;
+        this.dataTheme = undefined;
+        this.showLanguageDialog = false;
+        this.isMobile = false;
     }
     handleGlobalClick(e) {
-        if (!this.el.contains(e.target) && this.showDialog) {
-            this.showDialog = false;
+        if (!this.el.contains(e.target) && this.showLanguageDialog) {
+            this.showLanguageDialog = false;
         }
     }
-    toggleDialog() {
-        this.showDialog = !this.showDialog;
+    toggleLanguageDialog() {
+        this.showLanguageDialog = !this.showLanguageDialog;
+    }
+    handleMobileChange() {
+        this.isMobile = isCheckoutMobile(this.mobile);
+    }
+    componentWillLoad() {
+        this.isMobile = isCheckoutMobile(this.mobile);
     }
     render() {
-        var _a, _b;
-        const primaryColor = (_a = zonosStore.appearance) === null || _a === void 0 ? void 0 : _a.colorPrimary;
-        const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
-        const languageLabel = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.label;
-        return (h(Host, { key: 'cadd2ef8877c716cdeb1f5f40642e41cabc2a55d', class: "zonos--elements" }, h("div", { key: '480995fd1ca7bc41702d15dd40d64e02a9ba09dd', class: "zonos--checkout-footer", "data-theme": footerTheme, style: { '--primary-color': primaryColor } }, h("div", { key: 'b83ebb3203542f7f4a227b50b26010cbeb914294', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '66ad21d85629d159b4ff3341e82c92d6bd19ceca', class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: "gray-700" }), onClick: () => this.toggleDialog(), variant: "subtle" }, languageLabel), h("div", { key: '1e8dce34f3866570f267233644c6d5549cf02c9b', class: classes([
+        var _a;
+        const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
+        // reverse color when on desktop. With the coversheet backdrop, the color should be white
+        const colorDesktop = this.dataTheme === 'LIGHT' && !this.mobile ? 'gray-0' : 'gray-1200';
+        return (h(Host, { key: '2ce26e27b7c90b4d37f26197821ed1a39ddb9fae', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: '5f52ec7b5ad1659ceb9d2edb4661e5995b72afaf', class: "zonos--checkout-footer" }, h("div", { key: '5d127f033702bff94cc2db76b4695a03055ec783', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '701b5014848ea716f7dcc22221b453146af92962', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'e2a319113905bd76473aef822780521f2be58405', class: classes([
                 'zonos--checkout-footer-dialog',
-                this.showDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, h("zonos-language-select", { key: '194aeb20273058577d2cbf3b72eef5f7152129e6', handleOnClose: () => this.toggleDialog() }))), h("div", { key: '56b5f28d98eeb5390b59da3dfbc072f967e945a0', class: "zonos--checkout-footer-icon-wrapper" }, h("zonos-text", { key: 'b098a9c89d4855d388372b20c94ee3582cc4e9df', type: "caption" }, "Powered by"), h("a", { key: '0652328fc74701168e5ddec2e0662208498e4557', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '826323504ca56c3216524d3a9a49f820162aeb85', autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 }))))));
+                this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
+            ]) }, h("zonos-language-select", { key: '4fb9860a4547541f3947d349ab6056e899335952', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '0a348521a7ccecc23a7a69019940c2421bb8420c', class: "zonos--checkout-footer-icon-wrapper" }, h("zonos-text", { key: '9adf4c24fcf1b5d0827556e9e68006860b0bb9c4', textColor: colorDesktop, type: "caption" }, "Powered by"), h("a", { key: 'a3f957e10d14d68d3973169470a21fdabb2f7a06', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '49592d8302447d007dc840de18fa78af7898f382', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 }))))));
     }
     static get is() { return "zonos-checkout-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -42,12 +50,64 @@ export class ZonosCheckoutFooter {
             "$": ["zonos-checkout-footer.css"]
         };
     }
+    static get properties() {
+        return {
+            "mobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override mobile mode"
+                },
+                "attribute": "mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dataTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiTheme",
+                    "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\" | undefined",
+                    "references": {
+                        "ElementsUiTheme": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::ElementsUiTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme to change the color of the logo"
+                },
+                "attribute": "data-theme",
+                "reflect": false
+            }
+        };
+    }
     static get states() {
         return {
-            "showDialog": {}
+            "showLanguageDialog": {},
+            "isMobile": {}
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "mobile",
+                "methodName": "handleMobileChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",