@zonos/elements 1.3.262 → 1.3.263

package/dist/cjs/zonos-invoice-finish_5.cjs.entry.js

@@ -3,24 +3,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const cart = require('./cart-d08c87e2.js');
-const paypal = require('./paypal-e278f405.js');
-const localization = require('./localization-a7fac4b4.js');
-const zonosStore = require('./zonosStore-1c517e55.js');
+const cart = require('./cart-02a93797.js');
+const paypal = require('./paypal-f8a0cca3.js');
+const localization = require('./localization-68ebf7c6.js');
+const zonosStore = require('./zonosStore-0662b95f.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
-const getBorderRadius = require('./getBorderRadius-db55a464.js');
+const getBorderRadius = require('./getBorderRadius-a91911e7.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const isInvoiceMobileTablet = require('./isInvoiceMobileTablet-dde41e4e.js');
 const classes = require('./classes-b7918f56.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const invoice = require('./invoice-e64f97c6.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-a374741a.js');
-const placeTestOrder = require('./placeTestOrder-aefd31e8.js');
+const invoice = require('./invoice-215b8d2b.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-d163c1c4.js');
+const placeTestOrder = require('./placeTestOrder-ce734b60.js');
 const renderFallback = require('./renderFallback-bc20ee20.js');
-require('./isDarkColor-bfe6d1eb.js');
-require('./isContrastColor-6a17f408.js');
-require('./submitGtag-4241212b.js');
+require('./isDarkColor-e317bb06.js');
+require('./isContrastColor-a02c4889.js');
+require('./submitGtag-07a3b09e.js');
 
 const RemoveIcon = `<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-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" data-is-secondary-color="true" fill="var(--zonos-elements-red-200)" fill-rule="evenodd"></path><path clip-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" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 

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

@@ -3,21 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const cart = require('./cart-d08c87e2.js');
-const invoice = require('./invoice-e64f97c6.js');
-const paypal = require('./paypal-e278f405.js');
-const localization = require('./localization-a7fac4b4.js');
-const zonosStore = require('./zonosStore-1c517e55.js');
+const cart = require('./cart-02a93797.js');
+const invoice = require('./invoice-215b8d2b.js');
+const paypal = require('./paypal-f8a0cca3.js');
+const localization = require('./localization-68ebf7c6.js');
+const zonosStore = require('./zonosStore-0662b95f.js');
 const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-edddbf4b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const isInvoiceMobileTablet = require('./isInvoiceMobileTablet-dde41e4e.js');
 const classes = require('./classes-b7918f56.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-require('./isDarkColor-bfe6d1eb.js');
-require('./getBorderRadius-db55a464.js');
-require('./isContrastColor-6a17f408.js');
-require('./submitGtag-4241212b.js');
+require('./isDarkColor-e317bb06.js');
+require('./getBorderRadius-a91911e7.js');
+require('./isContrastColor-a02c4889.js');
+require('./submitGtag-07a3b09e.js');
 
 const ChevronDownIcon = `<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const localization = require('./localization-a7fac4b4.js');
-const zonosStore = require('./zonosStore-1c517e55.js');
+const localization = require('./localization-68ebf7c6.js');
+const zonosStore = require('./zonosStore-0662b95f.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./handleFetch-954f30e1.js');
 require('./VarianceTest-bec00ea8.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const zonosStore = require('./zonosStore-1c517e55.js');
+const zonosStore = require('./zonosStore-0662b95f.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-bec00ea8.js');
 

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const zonosStore = require('./zonosStore-1c517e55.js');
+const zonosStore = require('./zonosStore-0662b95f.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-db55a464.js');
-const getContrastColor = require('./getContrastColor-8ed1cb48.js');
+const getBorderRadius = require('./getBorderRadius-a91911e7.js');
+const getContrastColor = require('./getContrastColor-68058615.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 require('./VarianceTest-bec00ea8.js');
-require('./isDarkColor-bfe6d1eb.js');
-require('./isContrastColor-6a17f408.js');
+require('./isDarkColor-e317bb06.js');
+require('./isContrastColor-a02c4889.js');
 
 const zonosShippingRichRadioCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--zonos--selected-border-color, var(--zonos-elements-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:16px;-ms-flex-align:center;align-items:center;gap:16px;cursor:pointer;border:1px solid var(--zonos-elements-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));border-top-right-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));border-bottom-left-radius:var(--zonos--border-radius, var(--zonos-elements-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(--zonos--selected-border-color, var(--zonos-elements-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;

package/dist/cjs/zonos-store-credit.cjs.entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const cart = require('./cart-d08c87e2.js');
-const localization = require('./localization-a7fac4b4.js');
-const zonosStore = require('./zonosStore-1c517e55.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-a374741a.js');
-const getBorderRadius = require('./getBorderRadius-db55a464.js');
+const cart = require('./cart-02a93797.js');
+const localization = require('./localization-68ebf7c6.js');
+const zonosStore = require('./zonosStore-0662b95f.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-d163c1c4.js');
+const getBorderRadius = require('./getBorderRadius-a91911e7.js');
 require('./VarianceTest-bec00ea8.js');
 require('./handleFetch-954f30e1.js');
-require('./isDarkColor-bfe6d1eb.js');
+require('./isDarkColor-e317bb06.js');
 
 const StoreCreditIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
   <path fill="currentColor" fill-rule="evenodd" d="M4 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H4Zm16 2H4a1 1 0 0 0-1 1v1h18V8a1 1 0 0 0-1-1ZM2 11h20v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3Zm6 4.5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H9a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const zonosStore = require('./zonosStore-1c517e55.js');
+const zonosStore = require('./zonosStore-0662b95f.js');
 const helpers = require('./helpers-5bdbb68c.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-db55a464.js');
-const isDarkColor = require('./isDarkColor-bfe6d1eb.js');
+const getBorderRadius = require('./getBorderRadius-a91911e7.js');
+const isDarkColor = require('./isDarkColor-e317bb06.js');
 require('./VarianceTest-bec00ea8.js');
 
 const zonosStripeInputCss = ".sc-zonos-stripe-input-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-stripe-input-h *.sc-zonos-stripe-input{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-stripe-input-h img.sc-zonos-stripe-input{max-width:100%}.sc-zonos-stripe-input-h dl.sc-zonos-stripe-input,.sc-zonos-stripe-input-h dd.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h1.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h2.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h3.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h4.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h5.sc-zonos-stripe-input,.sc-zonos-stripe-input-h h6.sc-zonos-stripe-input,.sc-zonos-stripe-input-h hr.sc-zonos-stripe-input,.sc-zonos-stripe-input-h figure.sc-zonos-stripe-input,.sc-zonos-stripe-input-h p.sc-zonos-stripe-input,.sc-zonos-stripe-input-h pre.sc-zonos-stripe-input{margin:0}.sc-zonos-stripe-input-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-stripe-input-h{--zonos--background-color:#f1f1f1;--zonos--local-glowing-color:0 0 0 3px hsla(0, 0%, 100%, 25%),\n    0 0 0 1px var(--zonos--primary-color);--zonos--border:1px solid #e8e8e8}.dark.sc-zonos-stripe-input-h{color-scheme:dark;--zonos--background-color:#30313d;--zonos--local-glowing-color:0px 2px 4px rgba(0, 0, 0, 0.5),\n    0px 1px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px hsla(0, 0%, 100%, 25%),\n    0 1px 1px 0 rgba(255, 255, 255, 0.12);--zonos--border:1px solid var(--zonos--primary-color)}.sc-zonos-stripe-input-h{margin:1px}.sc-zonos-stripe-input-h .zonos--label-wrapper.sc-zonos-stripe-input{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%;background:var(--zonos--background-color);border-radius:var(--zonos--border-radius);border:var(--zonos--border);outline-offset:0;outline-width:2px;height:calc(var(--zonos-elements-size-xl) - 2px)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0 16px;outline:none;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);width:100%;border-radius:var(--zonos--border-radius);background:var(--zonos--background-color);border:var(--zonos--border);-ms-flex-order:2;order:2;font-weight:400;font-size:var(--zonos--font-size);color:var(--zonos-elements-text-color);height:auto}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input .sc-zonos-stripe-input:-internal-autofill-selected{border-radius:var(--zonos-elements-radius-6) 0 0 var(--zonos-elements-radius-6)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input .sc-zonos-stripe-input:-internal-autofill-selected+label.sc-zonos-stripe-input+div.sc-zonos-stripe-input{background-color:#e8f0fe}.sc-zonos-stripe-input-h .zonos--floated-input.has-label.sc-zonos-stripe-input{padding:24px 4px 2px 16px}.sc-zonos-stripe-input-h .zonos--floated-input.has-label.has-input-prefix.sc-zonos-stripe-input{padding-left:0}.sc-zonos-stripe-input-h .zonos--floated-input.has-label.has-input-prefix.sc-zonos-stripe-input~.zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input{margin-left:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label):-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:not(.has-label)::placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::-webkit-input-placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::-moz-placeholder{-moz-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input::placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus{outline:none;border:var(--zonos--border)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus~.zonos--floated-label.sc-zonos-stripe-input::after{-webkit-box-shadow:var(--zonos--glowing-color, var(--zonos--local-glowing-color));box-shadow:var(--zonos--glowing-color, var(--zonos--local-glowing-color))}.sc-zonos-stripe-input-h .zonos--floated-input.has-error.sc-zonos-stripe-input~.zonos--floated-label.sc-zonos-stripe-input::after{-webkit-box-shadow:0 0 0 2px #df1b41;box-shadow:0 0 0 2px #df1b41}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::-webkit-input-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::-moz-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input:-ms-input-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus:-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::-ms-input-placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input::placeholder,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus::placeholder{opacity:var(--zonos-elements-opacity-disabled)}.sc-zonos-stripe-input-h .zonos--floated-input.has-content.sc-zonos-stripe-input~.zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:focus~.zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input{top:11px;-webkit-transform:scale(0.8);transform:scale(0.8)}.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:-webkit-autofill,.sc-zonos-stripe-input-h .zonos--floated-input.sc-zonos-stripe-input:-moz-autofill{background-color:var(--zonos-elements-input-background);color:var(--zonos-elements-text-color)}.sc-zonos-stripe-input-h .zonos--floated-label.sc-zonos-stripe-input{display:block;max-height:0;pointer-events:none;-ms-flex-order:1;order:1}.sc-zonos-stripe-input-h .zonos--floated-label.sc-zonos-stripe-input label.sc-zonos-stripe-input{color:var(--zonos-elements-gray-800);position:absolute;font-size:16px;line-height:16px;display:inline-block;-webkit-filter:blur(0);filter:blur(0);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);margin-left:16px;top:calc(50% - 8px);z-index:1}.sc-zonos-stripe-input-h .zonos--floated-label.sc-zonos-stripe-input::after{content:\"\";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:var(--zonos--border-radius)}.sc-zonos-stripe-input-h .disabled.sc-zonos-stripe-input .zonos--floated-label.sc-zonos-stripe-input{pointer-events:inherit}.sc-zonos-stripe-input-h .disabled.sc-zonos-stripe-input .zonos--floated-label.sc-zonos-stripe-input::after{cursor:not-allowed;z-index:1}.dark.sc-zonos-stripe-input-h .zonos--label-wrapper.sc-zonos-stripe-input{background:#30313d}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const zonosStore = require('./zonosStore-1c517e55.js');
+const zonosStore = require('./zonosStore-0662b95f.js');
 const classes = require('./classes-b7918f56.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 const styles = require('./styles-d1e64fb9.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const zonosStore = require('./zonosStore-1c517e55.js');
+const zonosStore = require('./zonosStore-0662b95f.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-bec00ea8.js');
 

package/dist/cjs/{zonosStore-1c517e55.js → zonosStore-0662b95f.js}

@@ -2928,6 +2928,7 @@ const { dispose: zonosStoreDispose, onChange: zonosStoreOnChange, reset, state:
         productTitleElementSelector: '',
         restrictionBehavior: 'DISABLED',
         visibilityStatus: 'ENABLED',
+        widgetSize: null,
     },
     loadedConfig: false,
     onlineStoreSettings: {

package/dist/collection/components/hello/zonos-hello/zonos-hello.css

@@ -33,6 +33,15 @@
 
 :host {
   display: inline-block;
+  --zonos-elements-hello-widget-size: 18px;
+  --zonos-elements-hello-bubble-padding: max(
+    6px,
+    calc(var(--zonos-elements-hello-widget-size) * 0.22)
+  );
+  --zonos-elements-hello-bubble-size: calc(
+    var(--zonos-elements-hello-widget-size) +
+      var(--zonos-elements-hello-bubble-padding) * 2 + 2px
+  );
 }
 :host .zonos--hello-wrapper {
   position: relative;
@@ -75,14 +84,16 @@
 }
 :host .zonos--hello-widget {
   transition: all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);
-  padding: 6px;
-  border-radius: 30px;
+  padding: var(--zonos-elements-hello-bubble-padding);
+  border-radius: 9999px;
   background: var(--zonos-elements-page-background);
   font-size: var(--zonos-elements-font-size-s);
   border: var(--zonos-elements-border);
   display: flex;
   align-items: center;
+  justify-content: center;
   cursor: pointer;
+  box-sizing: border-box;
   height: fit-content;
   width: fit-content;
   position: relative;
@@ -100,10 +111,10 @@
   background: var(--zonos-elements-page-background);
   display: flex;
   align-items: center;
-  border-top-left-radius: 30px;
-  border-bottom-left-radius: 30px;
+  border-top-left-radius: calc(var(--zonos-elements-hello-bubble-size) / 2);
+  border-bottom-left-radius: calc(var(--zonos-elements-hello-bubble-size) / 2);
   left: 0;
-  transform: translateX(calc(-100% + 16px));
+  transform: translateX(calc(-100% + var(--zonos-elements-hello-bubble-size) / 2));
   width: fit-content;
   border-top: var(--zonos-elements-border);
   border-bottom: var(--zonos-elements-border);
@@ -126,28 +137,23 @@
 }
 :host .zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
   max-width: 100vw;
-  padding: 0 6px;
-  padding-right: 16px;
+  padding: 0 calc(var(--zonos-elements-hello-bubble-size) / 2);
   border: var(--zonos-elements-border);
 }
 :host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) > .zonos--hello-message {
   border-right: none;
 }
 :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-  border-left: 0;
-}
-:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-  padding-left: 16px;
-  padding-right: 6px;
+  padding-left: calc(var(--zonos-elements-hello-bubble-size) / 2);
   border-left: none;
 }
 :host .zonos--hello-widget.zonos--hello-widget-animate-from-left > .zonos--hello-message {
   order: 1;
-  transform: translateX(calc(100% - 16px));
+  transform: translateX(calc(100% - var(--zonos-elements-hello-bubble-size) / 2));
   right: 0;
   left: auto;
-  border-top-right-radius: 30px;
-  border-bottom-right-radius: 30px;
+  border-top-right-radius: calc(var(--zonos-elements-hello-bubble-size) / 2);
+  border-bottom-right-radius: calc(var(--zonos-elements-hello-bubble-size) / 2);
 }
 :host .zonos--hello-widget .zonos--hello-country-flag-wrapper {
   display: flex;
@@ -162,6 +168,8 @@
   box-shadow: var(--zonos-elements-v3-shadow-medium);
   z-index: 10;
   justify-self: center;
+  height: var(--zonos-elements-hello-widget-size);
+  width: var(--zonos-elements-hello-widget-size);
 }
 :host .zonos--hello-widget.zonos--hello-widget-float {
   position: fixed;

package/dist/collection/components/hello/zonos-hello/zonos-hello.js

@@ -11,6 +11,7 @@ import { currencyFormat } from "../../utils/hello/currencyConversion/currencyFor
 import { detectItemRestrictions } from "../../utils/hello/detectItemRestrictions";
 import { getCurrentHelloLocalePage } from "../../utils/hello/getCurrentHelloLocalePage";
 import { getHasMoreSpaceOnRight } from "../../utils/hello/getHasMoreSpaceOnRight";
+import { getHelloWidgetSize } from "../../utils/hello/getHelloWidgetSize";
 import { getProductsOnPage } from "../../utils/hello/getProductsOnPage";
 import { getZCountryUrlParam } from "../../utils/hello/getZCountryUrlParam";
 import { setZCountryUrlParam } from "../../utils/hello/setZCountryUrlParam";
@@ -351,7 +352,7 @@ export class ZonosHello {
     }
     getHelloLocation() {
         const mobileLocation = this.mobileLocationOverride || zonosStore.helloSettings.mobileLocation;
-        const desktopLocation = zonosStore.helloSettings.desktopLocation;
+        const desktopLocation = this.desktopLocationOverride || zonosStore.helloSettings.desktopLocation;
         const isMobileWindow = this.isMobile;
         switch (true) {
             // Mobile
@@ -369,19 +370,27 @@ export class ZonosHello {
             default:
             case !isMobileWindow: {
                 /**
-                 * Only float on desktop if there is no anchor specified and desktopLocation is set
-                 * This is to keep the same behavior as it is now (display at anchor if set on desktop, float on mobile).
-                 **/
-                const shouldFloat = !zonosStore.helloSettings.anchorElementSelector && !!desktopLocation;
+                 * Float on desktop when `desktopLocationOverride` is set (explicit
+                 * consumer request) OR when no anchor is specified and a
+                 * `desktopLocation` is configured in the store. With an anchor and no
+                 * override, the widget renders inline at the anchor.
+                 */
+                const shouldFloat = !!this.desktopLocationOverride ||
+                    (!zonosStore.helloSettings.anchorElementSelector &&
+                        !!desktopLocation);
+                // When a desktopLocation is set, derive the side deterministically
+                // from it so RIGHT positions resolve to `false` (not `undefined`).
+                // Spatial detection only runs as a fallback when no location is set
+                // (e.g. inline / anchored placement).
                 const isOnLeft = this.animateFromLeftOverride ||
-                    (desktopLocation === null || desktopLocation === void 0 ? void 0 : desktopLocation.includes('LEFT')) ||
-                    this.shouldAnimateLeftDesktop();
+                    (desktopLocation
+                        ? desktopLocation.includes('LEFT')
+                        : this.shouldAnimateLeftDesktop());
                 const isOnTop = desktopLocation === null || desktopLocation === void 0 ? void 0 : desktopLocation.includes('TOP');
                 return {
                     isMobileWindow,
                     isOnLeft,
                     isOnTop,
-                    // Only float if
                     shouldFloat,
                 };
             }
@@ -420,7 +429,8 @@ export class ZonosHello {
                 currencyCode: targetCurrency,
             });
         }
-        return (h(Host, { class: "zonos--hello zonos--elements", "data-theme": theme }, showHello && (h("div", { class: classes([
+        const widgetSize = getHelloWidgetSize(zonosStore.helloSettings.widgetSize);
+        return (h(Host, { class: "zonos--hello zonos--elements", "data-theme": theme, style: { '--zonos-elements-hello-widget-size': `${widgetSize}px` } }, showHello && (h("div", { class: classes([
                 'zonos--hello-wrapper',
                 shouldFloat && 'zonos--hello-widget-float',
             ]) }, h("button", { class: classes([
@@ -443,7 +453,7 @@ export class ZonosHello {
                     'zonos--hello-widget-left zonos--hello-widget-animate-from-left',
                 isOnTop && 'zonos--hello-widget-top',
                 shouldFloat && 'zonos--hello-widget-float',
-            ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, h("zonos-hello-dialog", { animateFromLeftOverride: this.animateFromLeftOverride, appearanceSettings: appearanceSettings, isOpen: this.showDialog, mobileLocationOverride: this.mobileLocationOverride, restrictedItems: restrictedItemsOnPage, setIsOpen: this.changeShowDialog }))))));
+            ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, h("zonos-hello-dialog", { animateFromLeftOverride: isOnLeft, appearanceSettings: appearanceSettings, isOpen: this.showDialog, mobileLocationOverride: this.mobileLocationOverride, restrictedItems: restrictedItemsOnPage, setIsOpen: this.changeShowDialog }))))));
     }
     static get is() { return "zonos-hello"; }
     static get encapsulation() { return "shadow"; }
@@ -487,6 +497,31 @@ export class ZonosHello {
                 "attribute": "mobile-location-override",
                 "reflect": false
             },
+            "desktopLocationOverride": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HelloDesktopLocation",
+                    "resolved": "\"BOTTOM_LEFT\" | \"BOTTOM_RIGHT\" | \"TOP_LEFT\" | \"TOP_RIGHT\" | undefined",
+                    "references": {
+                        "HelloDesktopLocation": {
+                            "location": "import",
+                            "path": "src/types/generated/graphql.internal.types",
+                            "id": "src/types/generated/graphql.internal.types.ts::HelloDesktopLocation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the configured desktop floating location. Takes precedence over\n`helloSettings.desktopLocation` and also drives the peek-message animation\ndirection, so consumers no longer need `animateFromLeftOverride` for\ndesktop positioning."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "desktop-location-override",
+                "reflect": false
+            },
             "animateFromLeftOverride": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -324,18 +324,20 @@ export class ZonosHelloDialog {
         }
     }
     render() {
-        var _a;
+        var _a, _b;
         const { selectedCountryCode } = localizationStore;
         // Show additional information if selected country has tax id
         const additionalInformation = this.getAdditionalDutyTaxMessage();
-        const animateLeft = this.animateFromLeftOverride ||
-            (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
+        // Honor an explicit boolean from the parent (computed from
+        // desktop/mobile location overrides) so dialog direction always matches
+        // the widget button. Fall back to spatial detection only when undefined.
+        const animateLeft = (_a = this.animateFromLeftOverride) !== null && _a !== void 0 ? _a : (this.dialogRef && getHasMoreSpaceOnRight(this.dialogRef));
         const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
         const { customMessages } = localizationStore;
         const welcomeMessage = translate('Welcome to [storeName]', {
             storeName: zonosStore.organizationName,
         });
-        const defaultMessageStr = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
+        const defaultMessageStr = ((_b = customMessages.find(x => x.pageName === 'hello_default')) === null || _b === void 0 ? void 0 : _b.message) ||
             translate('Know about duties and taxes before you buy. Shop with confidence!');
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
@@ -345,25 +347,25 @@ export class ZonosHelloDialog {
         // If deminimis is undefined or null, assume it's $0
         const taxDeMinimisMessage = this.getTaxMessage();
         const inclusivePriceMessage = this.getInclusivePriceMessage();
-        return (h(Host, { key: 'f6e7f88e0ff05246bb9313f5a7572b74b538c513', class: "zonos--elements" }, h("div", { key: '8438913f6265d619d0e58714b3fb3c8a4ebe6201', class: classes([
+        return (h(Host, { key: 'af2f34c21db4c521efe77a61bb779790741effba', class: "zonos--elements" }, h("div", { key: '4544ff7c5773d8cfccd6e4d866a07ee50c912a06', class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'ac944a1672251941e3c31660172b73cc5ad8fc6e' }, h("div", { key: 'd615ab55edeb0db000166a72df09ee6f3f945d5b', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'f2526b46a1f4a94c1b43647d8ffb35d6c247f24e', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '2de560ae8b81bb97602abd72112b1d4b903b0ec6', spacing: 24 }, h("zonos-country-flag", { key: '4d0ea1596b825305ffff08f1991fdc8be49b52de', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '50c6b033195cffaa2b0dee4dbc4766e488237b59', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '8850a76a1a6faf8c18c6a0502fa8951ea823dec9', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '37f9bc0c4047564d01d977871f12c40dfadee286', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '0d3d262b8a0e4d11112e19fcc7271e9e38c64ef4', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '4ba3dd6d5cccda0350a47b5cf2d3dc1c74853d81' }, h("div", { key: 'd5d5990a0d66d5d8b871c595f6cc08ad6077fa79', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '51a79a23bd6ea5e632e12a73591a142a341ce4a1', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: 'a505bcd3b78b81811dcd60d16971ceeb4c1a3aa7', spacing: 24 }, h("zonos-country-flag", { key: 'b82428ef373bc174e00255e8e0491466cd0fc177', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '10d8e5a46961a02e7159ad57854835f115eb0d76', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '030655d2e3ae3bf770ace2b6bffe96b1423a8aee', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'ce954ae42f9fe90f49980d954522a2e30be23d5b', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '82de2ff11aaa0505737664757f698d9ddd199af1', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
         }), (dutyDeMinimisMessage ||
             taxDeMinimisMessage ||
             inclusivePriceMessage ||
-            !!(additionalInformation === null || additionalInformation === void 0 ? void 0 : additionalInformation.length)) && (h("zonos-card", { key: 'cd82f35a21820876e0080c8402c93445210b45ca', spacing: "12px" }, h("zonos-v-stack", { key: 'c25d69802e048e3068c67931aed385cf95d5469c', spacing: 12 }, this.renderHelloMessage({
+            !!(additionalInformation === null || additionalInformation === void 0 ? void 0 : additionalInformation.length)) && (h("zonos-card", { key: 'b9134233fce6f248576b7b894b4be313aacdbf3f', spacing: "12px" }, h("zonos-v-stack", { key: 'e427aaf3dc1e4bba952511528aad5ff66a4950bb', spacing: 12 }, this.renderHelloMessage({
             dutyDeMinimisMessage,
             inclusivePriceMessage,
             taxDeMinimisMessage,
         }), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country icon", content: BagIcon }), h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info }))))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '9ae0e6deb5e29ce37f485f19b1ac1073fc7fe19f', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '96cd8a1c6c0bb29d4c1a9fe81bd8ed4a80449253' }, h("zonos-country-select", { key: '433ec94d70db0c5405048d497fb5aab766cc18e9', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'e32b3047ac04d4daf8adaa7238b61a7b1dbe8210' }, h("zonos-language-select", { key: '2a1ae723e0600bb3193de7d0a1438dc08269e95e', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country icon", content: BagIcon }), h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info }))))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '343956e04ee86fe6f9bcaa13f7e69c47d7d68c6e', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '99cd990b4df0ea4d5a8f1e81db99d23e6ebd3475' }, h("zonos-country-select", { key: 'd29ce0c79fb371c63b8b0630fd3d99892744179a', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '6a417d593d5644939f1ffbbbef3af6546e44b712' }, h("zonos-language-select", { key: '29c17d83f162a7237e9824d9f60c0cffdbdd1ae7', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/store/zonosStore.js

@@ -82,6 +82,7 @@ const { dispose: zonosStoreDispose, onChange: zonosStoreOnChange, reset, state:
         productTitleElementSelector: '',
         restrictionBehavior: 'DISABLED',
         visibilityStatus: 'ENABLED',
+        widgetSize: null,
     },
     loadedConfig: false,
     onlineStoreSettings: {

package/dist/collection/components/utils/hello/getHelloWidgetSize.js

@@ -0,0 +1,22 @@
+/**
+ * Default Hello widget diameter in pixels. Matches the legacy size that
+ * shipped before `widgetSize` became configurable, so existing merchants
+ * continue to render unchanged when they have not set a value.
+ */
+export const HELLO_WIDGET_DEFAULT_SIZE = 18;
+export const HELLO_WIDGET_MIN_SIZE = 18;
+export const HELLO_WIDGET_MAX_SIZE = 64;
+/**
+ * Resolve the configured Hello widget size to a safe pixel value. Falls back
+ * to the default when the merchant has not configured a size, and clamps
+ * out-of-range values so the widget always renders within the supported
+ * design bounds.
+ */
+export const getHelloWidgetSize = (configuredSize) => {
+    if (configuredSize == null ||
+        !Number.isFinite(configuredSize) ||
+        configuredSize <= 0) {
+        return HELLO_WIDGET_DEFAULT_SIZE;
+    }
+    return Math.min(HELLO_WIDGET_MAX_SIZE, Math.max(HELLO_WIDGET_MIN_SIZE, configuredSize));
+};