@zonos/elements 1.2.4-alpha.1 → 1.2.4-alpha.10

package/README.md

@@ -19,4 +19,18 @@
   - `tsconfig`: will include all folders to have all of the intellisense throughout the project.
   - `tsconfig.build`: stencil building process
   - `tsconfig.demo-script`: script for demo script
-  - `tsconfig.scripts`: rollup bundling for loading script.
+  - `tsconfig.scripts`: rollup bundling for loading script.
+
+## Developing/Release process
+
+### Merging strategy
+The github action would bump the version conditionally on qa and main branch merged event. 
++ qa branch merge flow: Only bump, publish version and create CDN when the version has alpha word.
++ main branch merge flow: Create a branch against qa and run pnpm version:[patch|major|minor], have it merged to qa, it would not trigger the publish version and create CDN until the changes on qa get merged to main.
+
+### Steps
+1. Each PR against qa will need to be prerelease pumped by running pnpm version:alpha.
+2. PR get merged to qa will trigger the github action to publish to npm with alpha tag and create a cdn domain alpha.js.zonos.com - alpha cdn doesn’t need to be versioned, so that when rolling back, the changes will be affected right away. 
+3. The release process would happen on qa. If we want to release, a new branch named build/v1.x.x will need to be checkout from qa. Bump the version (major, minor or patch), and then merge to qa.  
+4. Create a new branch with the same name build/v1.x.xoff of main, pull from qa and just create PR and merge to main. 
+5. PR get merged to `main` will trigger the github action to publish to npm with major, minor or patch tag and create a cdn domain v1.2.3.js.zonos.com.

package/dist/cjs/{cart-4ddc2af5.js → cart-90f7c8c0.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-a0fa5b77.js');
-const localization = require('./localization-11360fed.js');
-const isDarkColor = require('./isDarkColor-261fcf3d.js');
-const getBorderRadius = require('./getBorderRadius-a97a5f75.js');
+const zonosStore = require('./zonosStore-b43ef5db.js');
+const localization = require('./localization-9caf3397.js');
+const isDarkColor = require('./isDarkColor-ff6ff183.js');
+const getBorderRadius = require('./getBorderRadius-bf4a4276.js');
 
 const prepCalculateLandedCost = () => {
     // maybe we don't need email now for prefetch the landed cost
@@ -34,9 +34,36 @@ const prepCalculateLandedCost = () => {
     };
 };
 
+const triggerBuildLandedCost = async (buildLandedCost) => {
+    var _a;
+    const data = prepCalculateLandedCost();
+    const landedCost = await buildLandedCost(data.checkoutSessionId, data.contact, data.shippingAddress);
+    if (!landedCost) {
+        throw new Error('Failed to build landed cost');
+    }
+    // Validate the landed cost object to make sure the returned value from buildLandedCost has a valid schema
+    const { errors, json } = await localization.handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/validate-landed-cost`, {
+        body: landedCost,
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        method: 'POST',
+    });
+    if (!json || errors.length) {
+        throw new Error(`Invalid landed cost object: ${((_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message) || 'Unknown error'}`);
+    }
+    return landedCost;
+};
+
 const calculateLandedCost = async (abortController) => {
+    // If buildLandedCost callback is supplied, use that instead of our regular request to '/calculate-landed-cost'
+    const buildLandedCost = zonosStore.zonosStore.checkoutSettings.buildLandedCost;
+    if (buildLandedCost) {
+        const json = await triggerBuildLandedCost(buildLandedCost);
+        return json;
+    }
     // request to get landed cost info
-    const url = `${"https://v1.route.js.zonos.com"}/api/calculate-landed-cost`;
+    const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/calculate-landed-cost`;
     const { errors, json } = await localization.handleFetch(url, {
         body: prepCalculateLandedCost(),
         method: 'POST',
@@ -91,6 +118,7 @@ const { onChange: onChange$1, reset: reset$1, state: stripeStore, } = zonosStore
     stripeAddressElement: null,
     stripeAddressEventData: null,
     stripeAddressUsedWhenFetchingLC: null,
+    stripeBillingAddressElement: null,
     stripeElements: null,
     stripeElementsOptions: null,
     stripeLinkElement: null,
@@ -336,7 +364,7 @@ const stripeStoreInitCheckoutSession = async () => {
         return false;
     }
     stripeStore.isFetchingSession = true;
-    const { errors, json } = await localization.handleFetch(`${"https://v1.route.js.zonos.com"}/api/create-checkout-session`, {
+    const { errors, json } = await localization.handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/create-checkout-session`, {
         body: {
             currency: ((_a = cartStore.items.find(Boolean)) === null || _a === void 0 ? void 0 : _a.currencyCode) || '',
             itemsAmount: total,
@@ -364,7 +392,7 @@ const stripeStoreInitCheckoutSession = async () => {
 const stripeStoreUpdateCheckoutSession = async ({ currency, id, itemsAmount, landedCostId, presentmentCountryCode, }) => {
     // No need to set loading state here because this function will be called under the hood to update
     // landed cost id for the section.
-    const { errors, json } = await localization.handleFetch(`${"https://v1.route.js.zonos.com"}/api/update-checkout-session`, {
+    const { errors, json } = await localization.handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/update-checkout-session`, {
         body: {
             currency,
             id,
@@ -476,7 +504,7 @@ const cartStoreReCalculateTotal = async ({ currency, itemsAmount, landedCostId,
     }
     // update checkout session
     if (!cartStore.checkoutSessionId) {
-        localization.logError('Could update cart total without checkout session id');
+        localization.logError('Could not update cart total without checkout session id');
         return false;
     }
     const { json } = await stripeStoreUpdateCheckoutSession({

package/dist/cjs/{getBorderRadius-a97a5f75.js → getBorderRadius-bf4a4276.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-a0fa5b77.js');
+const zonosStore = require('./zonosStore-b43ef5db.js');
 
 /**
  * Get the border radius for the elements based on the style

package/dist/cjs/{index-20cb112f.js → index-0dcccc22.js}

@@ -655,6 +655,9 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
             }
         }
     }
+    // This needs to always happen so we can hide nodes that are projected
+    // to another component but don't end up in a slot
+    elm['s-hn'] = hostTagName;
     return elm;
 };
 /**
@@ -779,8 +782,9 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
  * @param oldCh the old children of the parent node
  * @param newVNode the new VNode which will replace the parent
  * @param newCh the new children of the parent node
+ * @param isInitialRender whether or not this is the first render of the vdom
  */
-const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
+const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
     let idxInOld = 0;
@@ -807,25 +811,25 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
         else if (newEndVnode == null) {
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldStartVnode, newStartVnode)) {
+        else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
             // if the start nodes are the same then we should patch the new VNode
             // onto the old one, and increment our `newStartIdx` and `oldStartIdx`
             // indices to reflect that. We don't need to move any DOM Nodes around
             // since things are matched up in order.
-            patch(oldStartVnode, newStartVnode);
+            patch(oldStartVnode, newStartVnode, isInitialRender);
             oldStartVnode = oldCh[++oldStartIdx];
             newStartVnode = newCh[++newStartIdx];
         }
-        else if (isSameVnode(oldEndVnode, newEndVnode)) {
+        else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
             // likewise, if the end nodes are the same we patch new onto old and
             // decrement our end indices, and also likewise in this case we don't
             // need to move any DOM Nodes.
-            patch(oldEndVnode, newEndVnode);
+            patch(oldEndVnode, newEndVnode, isInitialRender);
             oldEndVnode = oldCh[--oldEndIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldStartVnode, newEndVnode)) {
-            patch(oldStartVnode, newEndVnode);
+        else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
+            patch(oldStartVnode, newEndVnode, isInitialRender);
             // We need to move the element for `oldStartVnode` into a position which
             // will be appropriate for `newEndVnode`. For this we can use
             // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a
@@ -847,8 +851,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             oldStartVnode = oldCh[++oldStartIdx];
             newEndVnode = newCh[--newEndIdx];
         }
-        else if (isSameVnode(oldEndVnode, newStartVnode)) {
-            patch(oldEndVnode, newStartVnode);
+        else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
+            patch(oldEndVnode, newStartVnode, isInitialRender);
             // We've already checked above if `oldStartVnode` and `newStartVnode` are
             // the same node, so since we're here we know that they are not. Thus we
             // can move the element for `oldEndVnode` _before_ the element for
@@ -885,7 +889,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
                     node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
                 }
                 else {
-                    patch(elmToMove, newStartVnode);
+                    patch(elmToMove, newStartVnode, isInitialRender);
                     // invalidate the matching old node so that we won't try to update it
                     // again later on
                     oldCh[idxInOld] = undefined;
@@ -936,16 +940,22 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
+ * @param isInitialRender whether or not this is the first render of the vdom
  * @returns whether they're equal or not
  */
-const isSameVnode = (leftVNode, rightVNode) => {
+const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
-        // this will be set if components in the build have `key` attrs set on them
-        {
+        // this will be set if JSX tags in the build have `key` attrs set on them
+        // we only want to check this if we're not on the first render since on
+        // first render `leftVNode.$key$` will always be `null`, so we can be led
+        // astray and, for instance, accidentally delete a DOM node that we want to
+        // keep around.
+        if (!isInitialRender) {
             return leftVNode.$key$ === rightVNode.$key$;
         }
+        return true;
     }
     return false;
 };
@@ -956,8 +966,9 @@ const isSameVnode = (leftVNode, rightVNode) => {
  *
  * @param oldVNode an old VNode whose DOM element and children we want to update
  * @param newVNode a new VNode representing an updated version of the old one
+ * @param isInitialRender whether or not this is the first render of the vdom
  */
-const patch = (oldVNode, newVNode) => {
+const patch = (oldVNode, newVNode, isInitialRender = false) => {
     const elm = (newVNode.$elm$ = oldVNode.$elm$);
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
@@ -982,7 +993,7 @@ const patch = (oldVNode, newVNode) => {
         if (oldChildren !== null && newChildren !== null) {
             // looks like there's child vnodes for both the old and new vnodes
             // so we need to call `updateChildren` to reconcile them
-            updateChildren(elm, oldChildren, newVNode, newChildren);
+            updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
         }
         else if (newChildren !== null) {
             // no old child vnodes, but there are new child vnodes to add
@@ -1072,7 +1083,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         scopeId = hostElm['s-sc'];
     }
     // synchronous patch
-    patch(oldVNode, rootVnode);
+    patch(oldVNode, rootVnode, isInitialLoad);
 };
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {

package/dist/cjs/index.cjs.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const cart = require('./cart-4ddc2af5.js');
-require('./zonosStore-a0fa5b77.js');
-require('./index-20cb112f.js');
-require('./localization-11360fed.js');
-require('./isDarkColor-261fcf3d.js');
-require('./getBorderRadius-a97a5f75.js');
+const cart = require('./cart-90f7c8c0.js');
+require('./zonosStore-b43ef5db.js');
+require('./index-0dcccc22.js');
+require('./localization-9caf3397.js');
+require('./isDarkColor-ff6ff183.js');
+require('./getBorderRadius-bf4a4276.js');
 
 
 

package/dist/cjs/{isDarkColor-261fcf3d.js → isDarkColor-ff6ff183.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-a0fa5b77.js');
+const zonosStore = require('./zonosStore-b43ef5db.js');
 
 var tinycolor = zonosStore.createCommonjsModule(function (module, exports) {
 // This file is autogenerated. It's used to publish CJS to npm.

package/dist/cjs/loader.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-20cb112f.js');
+const index = require('./index-0dcccc22.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return index.bootstrapLazy([["zonos-text.cjs",[[1,"zonos-text",{"class":[1],"color":[1],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["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],"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]},[[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]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-country-flag_4.cjs",[[1,"zonos-country-select",{"closeCountrySelect":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}],[1,"zonos-country-flag",{"class":[1],"countryCode":[1,"country-code"],"size":[2]}]]],["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]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"class":[1],"notificationArray":[32],"showNotification":[64]}]]],["zonos-badge.cjs",[[1,"zonos-badge",{"bold":[4],"color":[1],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4],"class":[1]}]]],["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-address_2.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"class":[1],"hasContent":[32]}]]],["zonos-card_2.cjs",[[1,"zonos-card",{"actions":[16],"class":[1],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}],[1,"zonos-v-stack",{"spacing":[2],"class":[1]}]]],["zonos-icon.cjs",[[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"color":[1],"content":[1],"size":[2]}]]],["zonos-button_2.cjs",[[1,"zonos-button",{"class":[1],"color":[1],"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],"color":[1]}]]],["zonos-cart-items_10.cjs",[[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-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"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-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32]}],[1,"zonos-cart-subtotal"],[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]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32]}],[1,"zonos-logo",{"theme":[1],"width":[1],"class":[1]}]]]], options);
+  return index.bootstrapLazy([["zonos-text.cjs",[[1,"zonos-text",{"class":[1],"color":[1],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["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],"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]},[[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]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-country-flag_4.cjs",[[1,"zonos-country-select",{"closeCountrySelect":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}],[1,"zonos-country-flag",{"class":[1],"countryCode":[1,"country-code"],"size":[2]}]]],["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]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"class":[1],"notificationArray":[32],"showNotification":[64]}]]],["zonos-badge.cjs",[[1,"zonos-badge",{"bold":[4],"color":[1],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4],"class":[1]}]]],["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-address_2.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"class":[1],"hasContent":[32]}]]],["zonos-card_2.cjs",[[1,"zonos-card",{"actions":[16],"class":[1],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}],[1,"zonos-v-stack",{"spacing":[2],"class":[1]}]]],["zonos-icon.cjs",[[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"color":[1],"content":[1],"size":[2]}]]],["zonos-button_2.cjs",[[1,"zonos-button",{"class":[1],"color":[1],"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],"color":[1]}]]],["zonos-cart-items_10.cjs",[[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-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"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-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-cart-subtotal"],[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]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32]}],[1,"zonos-logo",{"theme":[1],"width":[1],"class":[1]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{localization-11360fed.js → localization-9caf3397.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-a0fa5b77.js');
+const zonosStore = require('./zonosStore-b43ef5db.js');
 
 const stringsArabic = {
     'Above de minimis threshold for': {
@@ -3163,20 +3163,38 @@ const handleRequest = async (url, options) => {
         };
     }
 };
+function encodeString(text) {
+    try {
+        // encode the string, remove the "=" at the end of the encoded string
+        const encodedString = btoa(text).replace(/=/g, '');
+        return encodedString;
+    }
+    catch (error) {
+        // return the reverse string if the encoding failed
+        return text
+            .replace(/[^A-Za-z0-9]/g, '')
+            .split('')
+            .reverse()
+            .join('');
+    }
+}
 const handleFetch = async (url, _opts) => {
     const opts = __rest(_opts || {}, []);
     const body = opts.body ? JSON.stringify(opts.body) : undefined;
     const method = opts.method || 'GET';
+    // adding credentialtoken to the url so that the request will be cached differently for each store
+    const modifiedUrl = new URL(url);
+    modifiedUrl.searchParams.set('zToken', encodeString(window.location.hostname));
     // headers content type
     const headers = Object.assign({ 'Content-Type': 'application/json', 'Zonos-Is-BigCommerce': window.Zonos.isBigCommerce.toString(), 'Zonos-Referer': window.location.hostname, 'Zonos-Version': window.Zonos.version, credentialtoken: window.Zonos.zonosApiKey }, opts.headers);
     const options = Object.assign(Object.assign({}, opts), { body: method === 'GET' ? undefined : body, headers,
         method });
-    return handleRequest(url, options);
+    return handleRequest(modifiedUrl.toString(), options);
 };
 
 const getCountries = async () => {
     try {
-        const { errors, json } = await handleFetch(`${"https://v1.route.js.zonos.com"}/api/get-countries`, {
+        const { errors, json } = await handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/get-countries`, {
             method: 'GET',
         });
         if (errors.length || !json) {
@@ -3199,7 +3217,7 @@ const getCountryLandedCost = async (countryCode) => {
     if (!countryCode) {
         return null;
     }
-    const url = `${"https://v1.route.js.zonos.com"}/api/country-landed-cost/${countryCode}`;
+    const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/country-landed-cost/${countryCode}`;
     const { errors, json } = await handleFetch(url);
     if (errors.length || !json) {
         logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
@@ -3214,7 +3232,7 @@ const getExchangeRate = async ({ country, isGuaranteed, sourceCurrency, targetCu
     if (sourceCurrency === targetCurrency && !isGuaranteed) {
         return { exchangeRate: null, maxAge: null };
     }
-    const url = `${"https://v1.route.js.zonos.com"}/api/exchange-rates?sourceCurrency=${sourceCurrency}&targetCurrency=${targetCurrency}&isGuaranteed=${isGuaranteed}&country=${country}}`;
+    const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/exchange-rates?sourceCurrency=${sourceCurrency}&targetCurrency=${targetCurrency}&isGuaranteed=${isGuaranteed}&country=${country}`;
     const { errors, json } = await handleFetch(url);
     if (errors.length || !json) {
         logError(`Error fetching country landed cost: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
@@ -3231,7 +3249,7 @@ const getExchangeRate = async ({ country, isGuaranteed, sourceCurrency, targetCu
 
 const getLocaleMessages = async ({ countryCode, localeTo, storeId, }) => {
     var _a;
-    const url = `${"https://v1.route.js.zonos.com"}/api/locale-messages?countryCode=${countryCode}&storeId=${storeId}&localeTo=${localeTo}`;
+    const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/locale-messages?countryCode=${countryCode}&storeId=${storeId}&localeTo=${localeTo}`;
     const { errors, json } = await handleFetch(url);
     if (errors.length || !json) {
         // eslint-disable-next-line no-console
@@ -3253,7 +3271,7 @@ const getLocalization = async () => {
         // load and use country from session storage when zCountry query param is not present
         const countryLoadedSession = window.sessionStorage.getItem('zonos--country');
         const zCountry = getZCountryUrlParam(currentUrl.searchParams) || countryLoadedSession;
-        const localizationUrl = new URL(`${"https://v1.route.js.zonos.com"}/api/localization`);
+        const localizationUrl = new URL(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/localization`);
         if (zCountry) {
             localizationUrl.searchParams.set('zCountry', zCountry);
         }
@@ -3276,7 +3294,7 @@ const getLocalization = async () => {
 
 const getShippingZones = async () => {
     var _a, _b;
-    const url = `${"https://v1.route.js.zonos.com"}/api/shipping-zones`;
+    const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/shipping-zones`;
     const { errors, json } = await handleFetch(url);
     if (errors.length || !json) {
         logError(`Error fetching shipping zones: ${(_a = errors.find(Boolean)) === null || _a === void 0 ? void 0 : _a.message}`);
@@ -3354,10 +3372,30 @@ const isValidSelector = (selector) => {
 };
 
 const log = (message, type, ...additionalInfo) => {
+    var _a;
     // if type is error and debug is false, do not log
     if (!window.Zonos.debug) {
         return;
     }
+    let loggingIframe = document.querySelector('iframe#zonos---debug-logging-iframe');
+    if (!loggingIframe) {
+        // add a hidden iframe
+        loggingIframe = document.createElement('iframe');
+        loggingIframe.id = 'zonos---debug-logging-iframe';
+        loggingIframe.style.display = 'none';
+        loggingIframe.style.opacity = '0';
+        loggingIframe.style.position = 'absolute';
+        loggingIframe.style.top = '-9999px';
+        loggingIframe.style.left = '-9999px';
+        loggingIframe.style.width = '1px';
+        loggingIframe.style.height = '1px';
+        loggingIframe.style.border = 'none';
+        loggingIframe.style.overflow = 'hidden';
+        loggingIframe.style.visibility = 'hidden';
+        document.body.appendChild(loggingIframe);
+    }
+    // use the logging iframe's console to log just in case the console is disabled (overriden) by the site owner
+    const console = ((_a = loggingIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.window.console) || window.console;
     switch (type) {
         case 'warn':
             // eslint-disable-next-line no-console

package/dist/cjs/{submitGtag-bb093547.js → submitGtag-b141b45d.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-a0fa5b77.js');
-const localization = require('./localization-11360fed.js');
+const zonosStore = require('./zonosStore-b43ef5db.js');
+const localization = require('./localization-9caf3397.js');
 
 const checkoutBreakpoint = 890;
 const isCheckoutMobile = (isMobile) => {

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-20cb112f.js');
-const cart = require('./cart-4ddc2af5.js');
-const localization = require('./localization-11360fed.js');
-require('./zonosStore-a0fa5b77.js');
-require('./isDarkColor-261fcf3d.js');
-require('./getBorderRadius-a97a5f75.js');
+const index = require('./index-0dcccc22.js');
+const cart = require('./cart-90f7c8c0.js');
+const localization = require('./localization-9caf3397.js');
+require('./zonosStore-b43ef5db.js');
+require('./isDarkColor-ff6ff183.js');
+require('./getBorderRadius-bf4a4276.js');
 
-const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
+const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
 
 const ZonosAddress = class {
     constructor(hostRef) {
@@ -81,7 +81,7 @@ const ZonosAddress = class {
 };
 ZonosAddress.style = zonosAddressCss;
 
-const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";
+const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";
 
 const ZonosLinkAuthentication = class {
     constructor(hostRef) {

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-20cb112f.js');
-const zonosStore = require('./zonosStore-a0fa5b77.js');
+const index = require('./index-0dcccc22.js');
+const zonosStore = require('./zonosStore-b43ef5db.js');
 const classes = require('./classes-b7918f56.js');
 
-const zonosBadgeCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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 .zonos--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";
+const zonosBadgeCss = ":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 .zonos--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";
 
 const ZonosBadge = class {
     constructor(hostRef) {

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-20cb112f.js');
-const zonosStore = require('./zonosStore-a0fa5b77.js');
+const index = require('./index-0dcccc22.js');
+const zonosStore = require('./zonosStore-b43ef5db.js');
 const classes = require('./classes-b7918f56.js');
 
-const zonosBannerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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{border-radius:var(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:var(--amino-space-0);grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:var(--amino-space-4)}:host(.info){background-color:var(--amino-blue-100);border:1px solid var(--amino-blue-200)}:host(.success){background-color:var(--amino-green-100);border:1px solid var(--amino-green-200)}:host(.error){background-color:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host(.warning){background-color:var(--amino-orange-100);border:1px solid var(--amino-orange-200)}";
+const zonosBannerCss = ":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{border-radius:var(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:var(--amino-space-0);grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:var(--amino-space-4)}:host(.info){background-color:var(--amino-blue-100);border:1px solid var(--amino-blue-200)}:host(.success){background-color:var(--amino-green-100);border:1px solid var(--amino-green-200)}:host(.error){background-color:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host(.warning){background-color:var(--amino-orange-100);border:1px solid var(--amino-orange-200)}";
 
 const ZonosBanner = class {
     constructor(hostRef) {

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

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-20cb112f.js');
-const zonosStore = require('./zonosStore-a0fa5b77.js');
+const index = require('./index-0dcccc22.js');
+const zonosStore = require('./zonosStore-b43ef5db.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-a97a5f75.js');
+const getBorderRadius = require('./getBorderRadius-bf4a4276.js');
 const isColorVariable = require('./isColorVariable-41cacd82.js');
-const isDarkColor = require('./isDarkColor-261fcf3d.js');
+const isDarkColor = require('./isDarkColor-ff6ff183.js');
 
 /**
  * Get theme for button text based on background color
@@ -23,7 +23,7 @@ const getButtonTheme = (overrideBackground) => {
     return buttonTheme;
 };
 
-const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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 .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--amino-gray-200)}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-200)}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
+const zonosButtonCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--amino-gray-200)}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-200)}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
 
 const ZonosButton = class {
     constructor(hostRef) {
@@ -104,7 +104,7 @@ const ZonosButton = class {
 };
 ZonosButton.style = zonosButtonCss;
 
-const zonosSpinnerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}: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{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}:host.black{stroke:var(--amino-spinner-stroke-black)}:host.black circle.track{stroke:var(--amino-spinner-track-black)}:host.white{stroke:var(--amino-spinner-stroke-white)}:host.white circle.track{stroke:var(--amino-spinner-track-white)}:host.info{stroke:var(--amino-blue-600)}:host.info circle.track{stroke:var(--amino-blue-100)}:host.success{stroke:var(--amino-green-600)}:host.success circle.track{stroke:var(--amino-green-100)}:host.danger{stroke:var(--amino-red-600)}:host.danger circle.track{stroke:var(--amino-red-100)}:host.warning{stroke:var(--amino-orange-600)}:host.warning circle.track{stroke:var(--amino-orange-100)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}";
+const zonosSpinnerCss = ":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{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}:host.black{stroke:var(--amino-spinner-stroke-black)}:host.black circle.track{stroke:var(--amino-spinner-track-black)}:host.white{stroke:var(--amino-spinner-stroke-white)}:host.white circle.track{stroke:var(--amino-spinner-track-white)}:host.info{stroke:var(--amino-blue-600)}:host.info circle.track{stroke:var(--amino-blue-100)}:host.success{stroke:var(--amino-green-600)}:host.success circle.track{stroke:var(--amino-green-100)}:host.danger{stroke:var(--amino-red-600)}:host.danger circle.track{stroke:var(--amino-red-100)}:host.warning{stroke:var(--amino-orange-600)}:host.warning circle.track{stroke:var(--amino-orange-100)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}";
 
 const ZonosSpinner = class {
     constructor(hostRef) {