@zonos/elements 1.3.48 → 1.3.50

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-56401fdb.js');
-const cart = require('./cart-3e8bc2af.js');
+const zonosStore = require('./zonosStore-67139f0e.js');
+const cart = require('./cart-688d674d.js');
 const classes = require('./classes-b7918f56.js');
 const logError = require('./logError-4e2f2020.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
-require('./isDarkColor-4eb96a1e.js');
-require('./getBorderRadius-4413e191.js');
+require('./isDarkColor-7a056d05.js');
+require('./getBorderRadius-a6a3b35e.js');
 
 var root = zonosStore._root;
 
@@ -472,11 +472,10 @@ const getProductsOnPage = () => {
     return mergedElements;
 };
 
-const zonosHelloCss = ":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:inline-block}:host .zonos--hello-wrapper{position:relative}:host .zonos--hello-wrapper .zonos--hello-dialog-wrapper-mobile-override{position:fixed;bottom:0;left:0;width:100vw;z-index:1001;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}@media (max-width: 768px){:host .zonos--hello-wrapper{position:fixed;bottom:0;left:0;width:100vw;z-index:1001;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}}:host .zonos--hello-widget{-webkit-transition:all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);transition:all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);padding:6px;border-radius:30px;background:var(--zonos-elements-page-background);font-size:var(--zonos-elements-font-size-s);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;z-index:1000}:host .zonos--hello-widget>.zonos--hello-message{-ms-flex-order:0;order:0;max-width:0;height:100%;white-space:nowrap;-webkit-transition:border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);transition:border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);overflow:hidden;color:var(--zonos-elements-text-color);position:absolute;background:var(--zonos-elements-page-background);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-top-left-radius:30px;border-bottom-left-radius:30px;left:0;-webkit-transform:translateX(calc(-100% + 16px));transform:translateX(calc(-100% + 16px));width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-top:var(--zonos-elements-border);border-bottom:var(--zonos-elements-border)}:host .zonos--hello-widget.zonos--hello-has-restrictions{background:var(--zonos-elements-red-100);border:1px solid var(--zonos-elements-red-200)}:host .zonos--hello-widget.zonos--hello-has-restrictions>.zonos--hello-message{background:var(--zonos-elements-red-100);color:var(--zonos-elements-red-800);font-weight:500}:host .zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:1px solid var(--zonos-elements-red-200)}:host .zonos--hello-widget.zonos--hello-show-peek-message{max-width:100vw;width:100%}:host .zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{max-width:100vw;padding:0 6px;padding-right:16px;border:var(--zonos-elements-border)}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:0;border-bottom-left-radius:0}: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{border-top-right-radius:0;border-bottom-right-radius:0}: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;border-left:none}:host .zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-ms-flex-order:1;order:1;-webkit-transform:translateX(calc(100% - 16px));transform:translateX(calc(100% - 16px));right:0;left:auto;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:30px;border-bottom-right-radius:30px}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center}@media (max-width: 768px){:host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag{border-radius:var(--zonos-elements-radius-4);width:24px}}@media (max-width: 768px){:host .zonos--hello-widget{position:fixed;bottom:32px;right:32px;border-radius:var(--zonos-elements-radius-4);padding:4px;border:1px solid transparent}:host .zonos--hello-widget.zonos--hello-widget-left{left:32px;right:auto}:host .zonos--hello-widget.zonos--hello-widget-top{bottom:auto;top:32px}:host .zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:none}:host .zonos--hello-widget>.zonos--hello-message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:30px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:0;bottom:0;left:0;-webkit-transform:translateX(0);transform:translateX(0);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:none}:host .zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-webkit-transform:translateX(0);transform:translateX(0)}:host .zonos--hello-widget.zonos--hello-show-peek-message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:var(--zonos-elements-radius-4);border-bottom-left-radius:var(--zonos-elements-radius-4)}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:var(--zonos-elements-radius-4);border-bottom-right-radius:var(--zonos-elements-radius-4)}:host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:8px;padding-right:4px}:host .zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{padding:0 var(--zonos-elements-radius-4);padding-right:6px;border:none}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper{border-radius:var(--zonos-elements-radius-4)}}:host .zonos--hello-mobile-override.zonos--hello-widget{position:fixed;bottom:32px;right:32px;border-radius:var(--zonos-elements-radius-4);padding:4px;border:1px solid transparent}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-left{left:32px;right:auto}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-top{bottom:auto;top:32px}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:none}:host .zonos--hello-mobile-override.zonos--hello-widget>.zonos--hello-message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:30px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:0;bottom:0;left:0;-webkit-transform:translateX(0);transform:translateX(0);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:none}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-webkit-transform:translateX(0);transform:translateX(0)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left){border-top-left-radius:var(--zonos-elements-radius-4);border-bottom-left-radius:var(--zonos-elements-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left{border-top-right-radius:var(--zonos-elements-radius-4);border-bottom-right-radius:var(--zonos-elements-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:8px;padding-right:4px}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{padding:0 var(--zonos-elements-radius-4);padding-right:6px;border:none}:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag-wrapper{border-radius:var(--zonos-elements-radius-4)}:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag{border-radius:var(--zonos-elements-radius-4);width:24px}";
+const zonosHelloCss = ":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:inline-block}:host .zonos--hello-wrapper{position:relative}:host .zonos--hello-wrapper .zonos--hello-dialog-wrapper-mobile-override{position:fixed;bottom:0;left:0;width:100vw;z-index:1001;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}@media (max-width: 768px){:host .zonos--hello-wrapper .zonos--hello-dialog-wrapper{position:fixed;bottom:0;left:0;width:100vw;z-index:1001;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}}:host .zonos--hello-widget{-webkit-transition:all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);transition:all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);padding:6px;border-radius:30px;background:var(--zonos-elements-page-background);font-size:var(--zonos-elements-font-size-s);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;z-index:1000}:host .zonos--hello-widget>.zonos--hello-message{-ms-flex-order:0;order:0;max-width:0;height:100%;white-space:nowrap;-webkit-transition:border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);transition:border 0.3s ease-in, all 0.7s cubic-bezier(0.31, -0.02, 0.06, 1.53);overflow:hidden;color:var(--zonos-elements-text-color);position:absolute;background:var(--zonos-elements-page-background);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-top-left-radius:30px;border-bottom-left-radius:30px;left:0;-webkit-transform:translateX(calc(-100% + 16px));transform:translateX(calc(-100% + 16px));width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-top:var(--zonos-elements-border);border-bottom:var(--zonos-elements-border)}:host .zonos--hello-widget.zonos--hello-has-restrictions{background:var(--zonos-elements-red-100);border:1px solid var(--zonos-elements-red-200)}:host .zonos--hello-widget.zonos--hello-has-restrictions>.zonos--hello-message{background:var(--zonos-elements-red-100);color:var(--zonos-elements-red-800);font-weight:500}:host .zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:1px solid var(--zonos-elements-red-200)}:host .zonos--hello-widget.zonos--hello-show-peek-message{max-width:100vw;width:100%}:host .zonos--hello-widget.zonos--hello-show-peek-message>.zonos--hello-message{max-width:100vw;padding:0 6px;padding-right:16px;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;border-left:none}:host .zonos--hello-widget.zonos--hello-widget-animate-from-left>.zonos--hello-message{-ms-flex-order:1;order:1;-webkit-transform:translateX(calc(100% - 16px));transform:translateX(calc(100% - 16px));right:0;left:auto;border-top-right-radius:30px;border-bottom-right-radius:30px}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center}:host .zonos--hello-widget.zonos--hello-widget-float{position:fixed;bottom:72px;right:32px}:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-left{left:32px;right:auto}:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-top{bottom:auto;top:32px}:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:none}:host .zonos--hello-widget.zonos--hello-widget-float>.zonos--hello-message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:30px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:0;bottom:0;left:0;-webkit-transform:translateX(0);transform:translateX(0);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:none}:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-animate-from-left>.zonos--hello-message{-webkit-transform:translateX(0);transform:translateX(0)}:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:8px;padding-right:4px}:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message>.zonos--hello-message{padding:0 var(--zonos-elements-radius-4);padding-right:6px;border:none}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float{position:fixed;bottom:72px;right:32px}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-left{left:32px;right:auto}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-top{bottom:auto;top:32px}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-has-restrictions.zonos--hello-show-peek-message>.zonos--hello-message{border:none}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float>.zonos--hello-message{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:30px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;top:0;bottom:0;left:0;-webkit-transform:translateX(0);transform:translateX(0);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border:none}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-animate-from-left>.zonos--hello-message{-webkit-transform:translateX(0);transform:translateX(0)}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left>.zonos--hello-message{padding-left:8px;padding-right:4px}:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message>.zonos--hello-message{padding:0 var(--zonos-elements-radius-4);padding-right:6px;border:none}";
 const ZonosHelloStyle0 = zonosHelloCss;
 
 const PEEK_MESSAGE_CLOSE_DELAY_MS = 3000;
-const RESIZE_DEBOUNCE_DELAY_MS = 500;
 const ZonosHello = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -622,6 +621,9 @@ const ZonosHello = class {
         this.changeShowDialog = (value) => {
             this.showDialog = value;
         };
+        /**
+         * Determine if the peek message should animate from left or not
+         */
         this.shouldAnimateLeftDesktop = () => {
             // Get Hello position (relative = desktop, fixed = mobile)
             const elPosition = this.helloRef && getComputedStyle(this.helloRef).position;
@@ -663,6 +665,7 @@ const ZonosHello = class {
         this.allFoundProducts = [];
         this.productsOnPage = [];
         this.isHelloWidgetRendered = false;
+        this.isMobile = false;
     }
     /**
      * Get the country list the hello widget's country select is using
@@ -729,7 +732,7 @@ const ZonosHello = class {
         this.changeShowDialog(value);
     }
     handleResize() {
-        debounce_1(this.render.bind(this), RESIZE_DEBOUNCE_DELAY_MS);
+        this.isMobile = window.innerWidth <= 768;
     }
     /**
      * This method will handle the Hello widget initialized state, should only trigger once
@@ -750,6 +753,44 @@ const ZonosHello = class {
             }));
         }
     }
+    getHelloLocation() {
+        const mobileLocation = this.mobileLocationOverride || zonosStore.zonosStore.helloSettings.mobileLocation;
+        const desktopLocation = zonosStore.zonosStore.helloSettings.desktopLocation;
+        const isMobileWindow = this.isMobile;
+        switch (true) {
+            // Mobile
+            case isMobileWindow: {
+                const isOnLeft = this.animateFromLeftOverride || (mobileLocation === null || mobileLocation === void 0 ? void 0 : mobileLocation.includes('LEFT'));
+                const isOnTop = mobileLocation === null || mobileLocation === void 0 ? void 0 : mobileLocation.includes('TOP');
+                return {
+                    isMobileWindow,
+                    isOnLeft,
+                    isOnTop,
+                    shouldFloat: !!mobileLocation,
+                };
+            }
+            // Desktop
+            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.zonosStore.helloSettings.anchorElementSelector && !!desktopLocation;
+                const isOnLeft = this.animateFromLeftOverride ||
+                    (desktopLocation === null || desktopLocation === void 0 ? void 0 : 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,
+                };
+            }
+        }
+    }
     handleAppearanceSettingsOverrideChange() {
         var _a;
         if ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) {
@@ -757,6 +798,9 @@ const ZonosHello = class {
             this.appearanceSettingsOverride.theme = zonosStore.getZonosStoreTheme(this.appearanceSettingsOverride.theme);
         }
     }
+    componentDidLoad() {
+        this.isMobile = window.innerWidth <= 768;
+    }
     render() {
         var _a, _b;
         const isExcludedUrl = (_a = zonosStore.zonosStore.helloSettings.excludedUrlPatterns) === null || _a === void 0 ? void 0 : _a.some(pattern => new RegExp(pattern).test(window.location.href));
@@ -765,13 +809,7 @@ const ZonosHello = class {
             return null;
         }
         const { selectedCountryCode, targetCurrency } = cart.localizationStore;
-        const mobileLocation = this.mobileLocationOverride || zonosStore.zonosStore.helloSettings.mobileLocation;
-        const isMobileWindow = window.innerWidth < 768;
-        const isOnLeft = this.animateFromLeftOverride ||
-            (isMobileWindow && mobileLocation.includes('LEFT')) ||
-            this.shouldAnimateLeftDesktop() ||
-            false;
-        const isOnTop = mobileLocation.includes('TOP');
+        const { isOnLeft, isOnTop, shouldFloat } = this.getHelloLocation();
         const appearanceSettings = zonosStore.mergeConfig(zonosStore.zonosStore.appearance, this.appearanceSettingsOverride);
         const { theme } = appearanceSettings;
         const restrictedItemsOnPage = (_b = this.allRestrictedItems) === null || _b === void 0 ? void 0 : _b.filter(product => this.productsOnPage.some(restriction => restriction.description === product.itemDescription));
@@ -786,7 +824,10 @@ const ZonosHello = class {
                 currencyCode: targetCurrency,
             });
         }
-        return (index.h(index.Host, { class: "zonos--hello zonos--elements", "data-theme": theme }, showHello && (index.h("div", { class: "zonos--hello-wrapper" }, index.h("button", { class: classes.classes([
+        return (index.h(index.Host, { class: "zonos--hello zonos--elements", "data-theme": theme }, showHello && (index.h("div", { class: classes.classes([
+                'zonos--hello-wrapper',
+                shouldFloat && 'zonos--hello-widget-float',
+            ]) }, index.h("button", { class: classes.classes([
                 'zonos--hello-widget',
                 this.showPeekMessage && 'zonos--hello-show-peek-message',
                 this.mobileLocationOverride && 'zonos--hello-mobile-override',
@@ -795,12 +836,14 @@ const ZonosHello = class {
                 isOnTop && 'zonos--hello-widget-top',
                 !!this.allRestrictedItems.length &&
                     'zonos--hello-has-restrictions',
+                shouldFloat && 'zonos--hello-widget-float',
             ]), onClick: () => {
                 void this.changeShowDialog(!this.showDialog);
             }, onMouseEnter: () => this.enableShowPeekMessage(), onMouseLeave: () => (this.showPeekMessage = false), ref: el => el && (this.helloRef = el) }, index.h("zonos-text", { class: "zonos--hello-message" }, this.peekMessage), selectedCountryCode && (index.h("div", { class: "zonos--hello-country-flag-wrapper" }, index.h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode })))), index.h("div", { class: classes.classes([
                 'zonos--hello-dialog-wrapper',
                 this.mobileLocationOverride &&
                     'zonos--hello-dialog-wrapper-mobile-override',
+                shouldFloat && 'zonos--hello-widget-float',
             ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, index.h("zonos-hello-dialog", { animateFromLeftOverride: this.animateFromLeftOverride, appearanceSettings: appearanceSettings, isOpen: this.showDialog, mobileLocationOverride: this.mobileLocationOverride, restrictedItems: restrictedItemsOnPage, setIsOpen: this.changeShowDialog }))))));
     }
     static get watchers() { return {

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-56401fdb.js');
+const zonosStore = require('./zonosStore-67139f0e.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-4413e191.js');
+const getBorderRadius = require('./getBorderRadius-a6a3b35e.js');
 
 const zonosInputCss = ":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{margin:1px;}:host .zonos--label-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;width:100%;background:var(--zonos-elements-input-background);border-radius:var(--border-radius);border:var(--zonos-elements-border)}:host .zonos--label-wrapper:hover{border:1px solid var(--zonos-elements-gray-300)}:host .zonos--floated-input{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0 16px;outline:none;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);width:100%;border-radius:var(--border-radius);background:var(--zonos-elements-input-background);border:0;-ms-flex-order:2;order:2;font-weight:500}:host .zonos--floated-input :-internal-autofill-selected{border-radius:var(--zonos-elements-radius-6) 0 0 var(--zonos-elements-radius-6)}:host .zonos--floated-input :-internal-autofill-selected+label+div{background-color:#e8f0fe}:host .zonos--floated-input.has-label{padding:16px 4px 8px 16px}:host .zonos--floated-input.has-label.has-input-prefix{padding-left:0}:host .zonos--floated-input.has-label.has-input-prefix+.zonos--floated-label::before{margin-left:0}:host .zonos--floated-input:not(.has-label)::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label):-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input:not(.has-label)::placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input::-webkit-input-placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::-moz-placeholder{-moz-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input:-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::-ms-input-placeholder{-ms-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input::placeholder{-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);opacity:0}:host .zonos--floated-input:focus{outline:none}:host .zonos--floated-input:focus+.zonos--floated-label::after{-webkit-box-shadow:var(--zonos-elements-glow-blue);box-shadow:var(--zonos-elements-glow-blue)}:host .zonos--floated-input.has-error+.zonos--floated-label::after{-webkit-box-shadow:var(--zonos-elements-glow-error);box-shadow:var(--zonos-elements-glow-error)}:host .zonos--floated-input.has-content::-webkit-input-placeholder,:host .zonos--floated-input:focus::-webkit-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::-moz-placeholder,:host .zonos--floated-input:focus::-moz-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content:-ms-input-placeholder,:host .zonos--floated-input:focus:-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::-ms-input-placeholder,:host .zonos--floated-input:focus::-ms-input-placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content::placeholder,:host .zonos--floated-input:focus::placeholder{opacity:var(--zonos-elements-opacity-disabled)}:host .zonos--floated-input.has-content+.zonos--floated-label::before,:host .zonos--floated-input:focus+.zonos--floated-label::before{top:11px;-webkit-transform:scale(0.8);transform:scale(0.8)}:host .zonos--floated-input:-webkit-autofill,:host .zonos--floated-input:-moz-autofill{background-color:var(--zonos-elements-input-background);color:var(--zonos-elements-text-color)}:host .zonos--floated-label{display:block;max-height:0;pointer-events:none;-ms-flex-order:1;order:1}:host .zonos--floated-label::before{content:attr(data-label);color:var(--zonos-elements-gray-800);position:absolute;font-size:var(--zonos-elements-font-size-base);line-height:var(--zonos-elements-font-size-base);display:inline-block;-webkit-filter:blur(0);filter:blur(0);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);margin-left:16px;top:calc(50% - var(--zonos-elements-font-size-base) / 2);z-index:1}:host .zonos--floated-label::after{content:\"\";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:var(--border-radius)}:host .disabled .zonos--floated-label{pointer-events:inherit}:host .disabled .zonos--floated-label::after{cursor:not-allowed;z-index:1}:host(.sm){height:calc(var(--zonos-elements-size-sm) - 2px)}:host(.sm) .zonos--floated-input.has-label{padding-top:13px;padding-bottom:0}:host(.sm) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.sm) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:2px}:host(.md){height:calc(var(--zonos-elements-size-md) - 2px)}:host(.md) .zonos--floated-input.has-label{padding-top:20px}:host(.md) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.md) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:6px}:host(.lg){height:calc(var(--zonos-elements-size-lg) - 2px)}:host(.lg) .zonos--floated-input.has-label:focus+.zonos--floated-label::before,:host(.lg) .zonos--floated-input.has-label.has-content+.zonos--floated-label::before{top:10px}:host(.xl){height:calc(var(--zonos-elements-size-xl) - 2px)}:host(.xl) .zonos--floated-input.has-label{padding-bottom:2px}";
 const ZonosInputStyle0 = zonosInputCss;

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-3e8bc2af.js');
-const zonosStore = require('./zonosStore-56401fdb.js');
+const cart = require('./cart-688d674d.js');
+const zonosStore = require('./zonosStore-67139f0e.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./logError-4e2f2020.js');
-require('./isDarkColor-4eb96a1e.js');
-require('./getBorderRadius-4413e191.js');
+require('./isDarkColor-7a056d05.js');
+require('./getBorderRadius-a6a3b35e.js');
 
 const GreenCheckDuotoneIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.99996 2.6665C5.05444 2.6665 2.66663 5.05432 2.66663 7.99984C2.66663 10.9454 5.05444 13.3332 7.99996 13.3332C10.9455 13.3332 13.3333 10.9454 13.3333 7.99984C13.3333 5.05432 10.9455 2.6665 7.99996 2.6665Z" fill="#AFF8C3"/>

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-56401fdb.js');
+const zonosStore = require('./zonosStore-67139f0e.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosLogoCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-56401fdb.js');
+const zonosStore = require('./zonosStore-67139f0e.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-3e8bc2af.js');
+const cart = require('./cart-688d674d.js');
 const logError = require('./logError-4e2f2020.js');
-const paypal = require('./paypal-540886f1.js');
-require('./isDarkColor-4eb96a1e.js');
-require('./getBorderRadius-4413e191.js');
+const paypal = require('./paypal-ce1516ba.js');
+require('./isDarkColor-7a056d05.js');
+require('./getBorderRadius-a6a3b35e.js');
 
 const zonosNotificationCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999999;bottom:24px;gap:8px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:8px;border-radius:var(--border-radius, var(--zonos-elements-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--zonos-elements-green-700)}:host .zonos--notification-item.error{background-color:var(--zonos-elements-red-700)}:host .zonos--notification-item.warning{background-color:var(--zonos-elements-orange-700)}";
 const ZonosNotificationStyle0 = zonosNotificationCss;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-56401fdb.js');
+const zonosStore = require('./zonosStore-67139f0e.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-4413e191.js');
+const getBorderRadius = require('./getBorderRadius-a6a3b35e.js');
 const isColorVariable = require('./isColorVariable-6f5a9608.js');
 
 const zonosShippingRichRadioCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--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(--border-radius, var(--zonos-elements-radius-10));border-top-right-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--zonos-elements-radius-10));border-bottom-left-radius:var(--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(--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}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-56401fdb.js');
+const zonosStore = require('./zonosStore-67139f0e.js');
 const classes = require('./classes-b7918f56.js');
 const isColorVariable = require('./isColorVariable-6f5a9608.js');
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-56401fdb.js');
+const zonosStore = require('./zonosStore-67139f0e.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosVStackCss = ":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 .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";

package/dist/cjs/{zonosStore-56401fdb.js → zonosStore-67139f0e.js}

@@ -2814,6 +2814,10 @@ const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(()
         countryOverrideBehavior: 'URL_PARAM',
         currencyBehavior: 'ENABLED',
         currencyElementSelector: '.money',
+        /**
+         * Default to bottom right so hello would float if anchorElementSelector is not set. Otherwise, this will be ignored
+         */
+        desktopLocation: 'BOTTOM_RIGHT',
         excludedUrlPatterns: [],
         homepageUrlPattern: '',
         mobileLocation: 'BOTTOM_RIGHT',
@@ -2828,6 +2832,7 @@ const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(()
         productTitleElementSelector: '',
         restrictionBehavior: 'DISABLED',
         showForCountries: 'ONLY_SHIPPABLE',
+        visibilityStatus: 'ENABLED',
     },
     loadedConfig: false,
     organizationId: '',

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

@@ -46,7 +46,7 @@
   height: fit-content;
 }
 @media (max-width: 768px) {
-  :host .zonos--hello-wrapper {
+  :host .zonos--hello-wrapper .zonos--hello-dialog-wrapper {
     position: fixed;
     bottom: 0;
     left: 0;
@@ -112,17 +112,9 @@
   padding-right: 16px;
   border: var(--zonos-elements-border);
 }
-:host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
 :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 {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
 :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
   border-left: 0;
 }
@@ -136,8 +128,6 @@
   transform: translateX(calc(100% - 16px));
   right: 0;
   left: auto;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
   border-top-right-radius: 30px;
   border-bottom-right-radius: 30px;
 }
@@ -155,92 +145,23 @@
   z-index: 10;
   justify-self: center;
 }
-@media (max-width: 768px) {
-  :host .zonos--hello-widget .zonos--hello-country-flag-wrapper .zonos--hello-country-flag {
-    border-radius: var(--zonos-elements-radius-4);
-    width: 24px;
-  }
-}
-@media (max-width: 768px) {
-  :host .zonos--hello-widget {
-    position: fixed;
-    bottom: 32px;
-    right: 32px;
-    border-radius: var(--zonos-elements-radius-4);
-    padding: 4px;
-    border: 1px solid transparent;
-  }
-  :host .zonos--hello-widget.zonos--hello-widget-left {
-    left: 32px;
-    right: auto;
-  }
-  :host .zonos--hello-widget.zonos--hello-widget-top {
-    bottom: auto;
-    top: 32px;
-  }
-  :host .zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message > .zonos--hello-message {
-    border: none;
-  }
-  :host .zonos--hello-widget > .zonos--hello-message {
-    position: relative;
-    display: flex;
-    align-items: center;
-    border-radius: 30px;
-    height: fit-content;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    transform: translateX(0);
-    width: fit-content;
-    border: none;
-  }
-  :host .zonos--hello-widget.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-    transform: translateX(0);
-  }
-  :host .zonos--hello-widget.zonos--hello-show-peek-message {
-    width: fit-content;
-  }
-  :host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) {
-    border-top-left-radius: var(--zonos-elements-radius-4);
-    border-bottom-left-radius: var(--zonos-elements-radius-4);
-  }
-  :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left {
-    border-top-right-radius: var(--zonos-elements-radius-4);
-    border-bottom-right-radius: var(--zonos-elements-radius-4);
-  }
-  :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-    padding-left: 8px;
-    padding-right: 4px;
-  }
-  :host .zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
-    padding: 0 var(--zonos-elements-radius-4);
-    padding-right: 6px;
-    border: none;
-  }
-  :host .zonos--hello-widget .zonos--hello-country-flag-wrapper {
-    border-radius: var(--zonos-elements-radius-4);
-  }
-}
-:host .zonos--hello-mobile-override.zonos--hello-widget {
+:host .zonos--hello-widget.zonos--hello-widget-float {
   position: fixed;
-  bottom: 32px;
+  bottom: 72px;
   right: 32px;
-  border-radius: var(--zonos-elements-radius-4);
-  padding: 4px;
-  border: 1px solid transparent;
 }
-:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-left {
+:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-left {
   left: 32px;
   right: auto;
 }
-:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-top {
+:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-top {
   bottom: auto;
   top: 32px;
 }
-:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message > .zonos--hello-message {
+:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-has-restrictions.zonos--hello-show-peek-message > .zonos--hello-message {
   border: none;
 }
-:host .zonos--hello-mobile-override.zonos--hello-widget > .zonos--hello-message {
+:host .zonos--hello-widget.zonos--hello-widget-float > .zonos--hello-message {
   position: relative;
   display: flex;
   align-items: center;
@@ -253,33 +174,62 @@
   width: fit-content;
   border: none;
 }
-:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-animate-from-left > .zonos--hello-message {
   transform: translateX(0);
 }
-:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message {
+:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message {
   width: fit-content;
 }
-:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) {
-  border-top-left-radius: var(--zonos-elements-radius-4);
-  border-bottom-left-radius: var(--zonos-elements-radius-4);
-}
-:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left {
-  border-top-right-radius: var(--zonos-elements-radius-4);
-  border-bottom-right-radius: var(--zonos-elements-radius-4);
-}
-:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
   padding-left: 8px;
   padding-right: 4px;
 }
-:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
+:host .zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message > .zonos--hello-message {
   padding: 0 var(--zonos-elements-radius-4);
   padding-right: 6px;
   border: none;
 }
-:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag-wrapper {
-  border-radius: var(--zonos-elements-radius-4);
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float {
+  position: fixed;
+  bottom: 72px;
+  right: 32px;
 }
-:host .zonos--hello-mobile-override.zonos--hello-widget .zonos--hello-country-flag {
-  border-radius: var(--zonos-elements-radius-4);
-  width: 24px;
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-left {
+  left: 32px;
+  right: auto;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-top {
+  bottom: auto;
+  top: 32px;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-has-restrictions.zonos--hello-show-peek-message > .zonos--hello-message {
+  border: none;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float > .zonos--hello-message {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 30px;
+  height: fit-content;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(0);
+  width: fit-content;
+  border: none;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+  transform: translateX(0);
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message {
+  width: fit-content;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
+  padding-left: 8px;
+  padding-right: 4px;
+}
+:host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-float.zonos--hello-show-peek-message > .zonos--hello-message {
+  padding: 0 var(--zonos-elements-radius-4);
+  padding-right: 6px;
+  border: none;
 }