@covet-pics/covet-pics-widget 0.111.0 → 0.111.2

package/dist/cjs/covet-pics-direct-buy_6.cjs.entry.js

@@ -5,12 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d4e21dc3.js');
-const utils = require('./utils-70e645ee.js');
+const index = require('./index-7e3816c8.js');
+const utils = require('./utils-85481438.js');
 const lazy = require('./lazy-68db6903.js');
 const fragment = require('./fragment-29c21ac8.js');
+const storeUtils = require('./storeUtils-b074bb51.js');
 const _commonjsHelpers = require('./_commonjsHelpers-b66a770d.js');
-const store = require('./store-90bc6cce.js');
+require('./sort-ecd4fc1f.js');
 
 const covetPicsDirectBuyCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-pointer-events{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-pointer-events.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{-ms-scroll-snap-type:x mandatory;-webkit-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{-ms-scroll-snap-type:y mandatory;-webkit-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}:host{z-index:1;background-color:#ffffff;--covet-pics-button-size:40px;--covet-pics-padding-size:40px;--covet-pics-font-color:#101010;--covet-pics-background-color:#fcfbfc}:host{position:fixed;bottom:0;overflow:scroll;width:100%;max-height:0;-webkit-box-shadow:0 -8px 16px 0 rgba(0, 0, 0, 0.05);box-shadow:0 -8px 16px 0 rgba(0, 0, 0, 0.05);-webkit-transition:max-height 0.35s ease-in-out;transition:max-height 0.35s ease-in-out;min-width:auto}:host(.open){max-height:100%}.main{margin:0 var(--covet-pics-padding-size);padding-bottom:150px;position:relative}.close{background:none;border:none;position:absolute;top:0;right:0;padding:0;margin:0;cursor:pointer;-webkit-transform:rotate(270deg);transform:rotate(270deg);outline:none !important}.close:hover svg .icon-arrow-path,.close:active svg .icon-arrow-path,.close:focus svg .icon-arrow-path{stroke:#000000}.close svg{width:var(--covet-pics-button-size);height:var(--covet-pics-button-size)}.close svg .icon-arrow-path{-webkit-transition:all 0.25s ease;transition:all 0.25s ease}.title{font-size:14px;font-weight:400;line-height:var(--covet-pics-button-size);width:calc(100% - var(--covet-pics-button-size));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:10px 0 0 0}.title a{text-decoration:none;color:var(--covet-pics-font-color)}.price-wrap{display:-ms-flexbox;display:flex;height:32px;background:var(--covet-pics-background-color);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-transform:uppercase}.price-wrap label{color:var(--covet-pics-font-color);font-weight:300;max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.price-wrap .price{font-weight:600}.btn-buy{border:none;background-color:var(--covet-pics-button-color);color:var(--covet-pics-button-text-color);font-family:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;text-transform:uppercase;text-align:center;cursor:pointer;font-size:14px;line-height:1;padding:17px 17px max(17px, env(safe-area-inset-bottom, 25px)) 17px;margin-bottom:0}.btn-buy:hover,.btn-buy:active,.btn-buy:focus{background-color:var(--covet-pics-button-hover-color)}.btn-buy.style-1:hover,.btn-buy.style-1:active,.btn-buy.style-1:focus{background-color:var(--covet-pics-button-text-hover-color)}.btn-buy.style-2:hover,.btn-buy.style-2:active,.btn-buy.style-2:focus{background-color:var(--covet-pics-button-color);color:var(--covet-pics-button-text-hover-color)}.btn-buy:disabled{background:#EEEEEE;color:#808080;pointer-events:none}.options{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;border:1px solid transparent;border-bottom-color:#EEE;height:48px;padding:0 8px 0 12px;-moz-text-align-last:right;text-align-last:right;font-weight:300;color:var(--covet-pics-font-color);position:relative;cursor:pointer;outline:none !important;-webkit-transition:border 0.25s ease;transition:border 0.25s ease}.options.opened{border-left:1px solid #EEE;border-right:1px solid #EEE}.options.opened .options-container{display:block}.options:hover,.options:active,.options:focus,.options:focus-within{border-bottom-color:#000000}.options label{width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;outline:none !important}.options label .option-name{margin:auto 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.options label .selected-option{margin:auto 0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath stroke='%23A0A0A0' d='M16.95 10.25L12 15.2l-4.95-4.95'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 50%;background-size:24px;padding-right:26px;text-transform:uppercase;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%;font-family:inherit;cursor:pointer;font-weight:bold}.options label .selected-option.empty{height:16px;line-height:1rem;width:20%}.options .options-container{display:none;position:absolute;top:48px;left:-1px;background:#FFF;z-index:2;width:100%;border:1px solid #eee;border-top:0;max-height:114px;overflow:auto;cursor:pointer}.options .options-container .option-value{min-height:32px;font-size:12px;color:#101010;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;outline:none !important}.options .options-container .option-value.selected .selected-indic{height:24px;border-left:2px solid #101010}.options .options-container .option-value .value-text{margin-left:4px;margin-right:4px;padding:0 10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;font-size:12px;min-height:32px}.options .options-container .option-value:hover .value-text,.options .options-container .option-value:active .value-text,.options .options-container .option-value:focus .value-text{background:#F7F7F7}.main-gallery{overflow:hidden;width:100%}.main-gallery .swiper-slide{width:200px;height:200px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.main-gallery .swiper-slide img{max-width:100%;max-height:100%}.main-gallery .swiper-wrapper{max-height:200px}.footer{background-color:var(--covet-pics-background-color);position:absolute;width:100%;bottom:0;z-index:1}.footer .price-wrap{padding:0 var(--covet-pics-padding-size);width:calc(100% - var(--covet-pics-padding-size) * 2)}.swiper-pagination-bullets{padding:10px 0;border-bottom:1px solid var(--covet-pics-font-color);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;-ms-flex:none;flex:none;border-radius:100%;background:var(--covet-pics-font-color);opacity:0.2;margin:0 4px}.swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1;background:var(--covet-pics-font-color)}@media only screen and (min-width: 800px){:host{display:none;height:100%;z-index:1;position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden}:host(.open){display:block}.title{width:100%;padding-left:10px}.close{left:calc(var(--covet-pics-button-size) / -2);right:unset;-webkit-transform:unset;transform:unset}.wrap{height:100%;overflow:auto}.footer{position:absolute}}";
 
@@ -3982,7 +3983,7 @@ const CovetPicsPopup = class {
     // prevent body to scroll setting overflow: hidden
     document.body.classList.add("covet-pics-popup-scroll-lock");
     this.modalOpen.emit();
-    if (this.loader.useAnalytics) {
+    if (storeUtils.getUseAnalytics(this.appState)) {
       const category = "Covet.pics Popup";
       const action = "Covet.pics Popup Open";
       const label = "Covet.pics Popup Open - " + this.itemId;
@@ -4033,7 +4034,7 @@ const CovetPicsPopup = class {
       return false;
     }
     this.renderDirectBuyCart();
-    if (this.loader.useAnalytics) {
+    if (storeUtils.getUseAnalytics(this.appState)) {
       const category = "Covet.pics Popup";
       const action = "Covet.pics Add-to-Cart Click";
       const label = "Covet.pics Add-to-Cart Click - " + event.detail.productId;
@@ -4045,7 +4046,7 @@ const CovetPicsPopup = class {
     if (!this.isActive) {
       return false;
     }
-    if (this.loader.useAnalytics) {
+    if (storeUtils.getUseAnalytics(this.appState)) {
       const category = "Covet.pics Popup";
       const action = "Covet.pics Link Click";
       const label = "Covet.pics Link Click - " + event.detail.gaCampaign;
@@ -4094,20 +4095,20 @@ const CovetPicsPopup = class {
       gallery_item_id: this.itemId,
       product_id: productId,
     };
-    this.loader.sendBeacon("direct_buy", beaconData);
+    storeUtils.sendBeacon(this.appState, "direct_buy", beaconData);
   }
   sendModalOpenBeacon() {
     const data = {
       gallery_item_id: this.itemId,
     };
-    this.loader.sendBeacon("modal_open", data);
+    storeUtils.sendBeacon(this.appState, "modal_open", data);
   }
   sendProductLinkClickBeacon(id) {
     const data = {
       gallery_item_id: this.itemId,
       link_id: id,
     };
-    this.loader.sendBeacon("grid_link_click", data);
+    storeUtils.sendBeacon(this.appState, "grid_link_click", data);
   }
   resetShareLinksState() {
     this.copyLinkCopied = false;
@@ -4442,6 +4443,10 @@ const CovetPicsPopup = class {
     this.setMoneyFormat();
     // insert <style> for lock scroll in document head
     document.head.insertAdjacentHTML("beforeend", "<style>.covet-pics-popup-scroll-lock{overflow:hidden}</style>");
+    this.appState = this.appStore.getState();
+    this.appStore.subscribe(() => {
+      this.appState = this.appStore.getState();
+    });
   }
   componentDidUpdate() {
     this.updatePopup();
@@ -11468,6 +11473,9 @@ const CovetPicsUpload = class {
     document.body.classList.add("covet-pics-popup-scroll-lock");
     this.uploadOpen.emit();
   }
+  componentWillLoad() {
+    this.initStore();
+  }
   componentDidLoad() {
     smoothscroll.polyfill();
     this.initUppy();
@@ -11475,6 +11483,14 @@ const CovetPicsUpload = class {
       this.openUpload();
     }
   }
+  initStore() {
+    this.appState = this.appStore.getState();
+    this.widgetWidth = this.appState.size.widgetWidth;
+    this.appStore.subscribe(() => {
+      this.appState = this.appStore.getState();
+      this.widgetWidth = this.appState.size.widgetWidth;
+    });
+  }
   select(selector) {
     return this.el.shadowRoot.querySelector(selector);
   }
@@ -11618,7 +11634,7 @@ const CovetPicsUpload = class {
       "--covet-pics-popup-background-color": utils.hexToRGBA(this.backgroundColor, (this.backgroundOpacity / 100).toString()),
       "--covet-pics-scrollbar-width": `${this.getScrollbarWidth().width}px`,
       "--covet-pics-scrollbar-padding": `${this.getScrollbarWidth().paddingRgiht}px`,
-      "--covet-pics-upload-img-ratio": `${store.state.widgetWidth < 480 ? (store.state.widgetWidth - 48) / 352 : 1}` // TODO temp solution
+      "--covet-pics-upload-img-ratio": `${this.widgetWidth < 480 ? (this.widgetWidth - 48) / 352 : 1}` // TODO temp solution
     };
     if (this.fontFamily) {
       cssVariables = Object.assign(Object.assign({}, cssVariables), { "--covet-pics-font-family": this.fontFamily + ", sans-serif" });

package/dist/cjs/covet-pics-gallery-grid_3.cjs.entry.js

@@ -5,10 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d4e21dc3.js');
-const utils$1 = require('./utils-70e645ee.js');
+const index = require('./index-7e3816c8.js');
+const utils$1 = require('./utils-85481438.js');
 const _commonjsHelpers = require('./_commonjsHelpers-b66a770d.js');
-const store = require('./store-90bc6cce.js');
 const lazy = require('./lazy-68db6903.js');
 const effectFade = require('./effect-fade-085023a9.js');
 
@@ -3456,8 +3455,8 @@ const CovetPicsGalleryGrid = class {
     this.isLoading = false;
     this.showSort = false;
     this.showBreakdown = false;
-    this.selectedItemIndex = null;
     this.isGridDisabled = false;
+    this.selectedItemIndex = null;
     this.filterChangedHandler = (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -3481,7 +3480,7 @@ const CovetPicsGalleryGrid = class {
     };
     this.scrollHandler = (event) => {
       let elBottomPosition = utils$1.getSize(this.el, "bottom");
-      let toBottom = Math.max(elBottomPosition - store.state.windowHeight, 0);
+      let toBottom = Math.max(elBottomPosition - this.appState.size.windowHeight, 0);
       if (toBottom < 300) {
         this.nextPage.emit(event);
       }
@@ -3566,7 +3565,7 @@ const CovetPicsGalleryGrid = class {
     if (this.loader.previewMode) {
       document.body.querySelectorAll("covet-pics-popup").forEach(node => node.remove());
     }
-    this.popup = utils$1.createCovetPicsPopup(this.loader, this.items);
+    this.popup = utils$1.createCovetPicsPopup(this.loader, this.items, this.appStore);
     document.body.appendChild(this.popup);
   }
   initUploadWidget() {
@@ -3574,7 +3573,7 @@ const CovetPicsGalleryGrid = class {
       document.querySelectorAll("covet-pics-upload").forEach(uploadWidget => uploadWidget.remove());
     }
     if (this.loader.data.settings["customer_photo_item_position"] || this.loader.data.settings["customer_photo_upload_button_selector"] || this.showHeader) {
-      this.upload = utils$1.createUploadPopup(this.loader);
+      this.upload = utils$1.createUploadPopup(this.loader, this.appStore);
       document.body.appendChild(this.upload);
     }
   }
@@ -3587,6 +3586,7 @@ const CovetPicsGalleryGrid = class {
     this.initFilters();
     this.initPopup();
     this.initUploadWidget();
+    this.initStore();
   }
   componentDidLoad() {
     if (this.layout === "collage")
@@ -3604,6 +3604,14 @@ const CovetPicsGalleryGrid = class {
     this.iso.reloadItems();
     this.iso.arrange();
   }
+  initStore() {
+    this.appState = this.appStore.getState();
+    this.isDesktopScreen = this.appState.size.isDesktopScreen;
+    this.appStore.subscribe(() => {
+      this.appState = this.appStore.getState();
+      this.isDesktopScreen = this.appState.size.isDesktopScreen;
+    });
+  }
   checkAndOpenPopup() {
     if (this.sharedItemId === "none")
       return false;
@@ -3703,7 +3711,7 @@ const CovetPicsGalleryGrid = class {
       : `${layout}-item ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(createdTime)}`;
   }
   renderStandardItem(item, idx, itemsLength) {
-    const itemWidth = store.state.isDesktopScreen
+    const itemWidth = this.isDesktopScreen
       ? (100 - (this.desktopItemPadding * (this.desktopPhotosPerRow - 1))) / this.desktopPhotosPerRow
       : (100 - (this.mobileItemPadding * (this.mobilePhotosPerRow - 1))) / this.mobilePhotosPerRow;
     let caption = this.loader.data.settings.item_label_text;
@@ -3716,16 +3724,16 @@ const CovetPicsGalleryGrid = class {
     return index.h("covet-pics-gallery-item", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, tabindex: this.isGridDisabled ? -1 : 0, "animation-duration": item.animationDuration, "hover-background-opacity": item.hoverBackgroundOpacity, "hover-border-color": item.hoverBorderColor, "hover-color-from": item.hoverColorFrom, "hover-color-to": item.hoverColorTo, "image-url": item.imageUrl, "item-source": item.source, "label-caption": item.labelCaption, "label-color": item.labelColor, "label-font-size": item.labelFontSize, "label-font-style": item.labelFontStyle });
   }
   renderDetailUploadItem(item) {
-    return index.h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, tabindex: this.isGridDisabled ? -1 : 0, "image-url": item.imageUrl, "item-source": item.source, "label-caption": item.labelCaption, itemStyle: item.itemStyle });
+    return index.h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage" }, tabindex: this.isGridDisabled ? -1 : 0, "image-url": item.imageUrl, "item-source": item.source, "label-caption": item.labelCaption, itemStyle: item.itemStyle, appStore: this.appStore });
   }
   renderDetailItem(item, idx, itemsLength) {
-    const itemWidth = store.state.isDesktopScreen
+    const itemWidth = this.isDesktopScreen
       ? (100 - (this.desktopItemPadding * (this.desktopPhotosPerRow - 1))) / this.desktopPhotosPerRow
       : (100 - (this.mobileItemPadding * (this.mobilePhotosPerRow - 1))) / this.mobilePhotosPerRow;
-    return index.h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, tabindex: 0, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.desktopPhotosPerRow, this.mobilePhotosPerRow), "item-id": item.id, "item-source": item.source, "item-style": this.itemStyle, "item-type": item.data_type, "item-width": itemWidth, links: item.links, "popup-disabled": this.loader.data.settings.popup_disable_modal, "popup-redirect-mode": this.loader.data.settings.item_open_link, url: item.url, "background-color": this.loader.data.settings.background_color, "primary-color": this.loader.data.settings.primary_color, "star-color": this.loader.data.settings.star_color, layout: this.layout, "user-name": item.username, caption: item.caption, "created-time": item.created_time, verified: item.verified, rating: item.rating !== null ? item.rating : 0, "alt-tag": this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time, this.layout) });
+    return index.h("covet-pics-gallery-item-detail", { class: { "grid-item": this.layout === "grid", "collage-item": this.layout === "collage", "highlighted": this.isHighlighted(idx) }, tabindex: 0, highlighted: this.isHighlighted(idx), "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.desktopPhotosPerRow, this.mobilePhotosPerRow), "item-id": item.id, "item-source": item.source, "item-style": this.itemStyle, "item-type": item.data_type, "item-width": itemWidth, links: item.links, "popup-disabled": this.loader.data.settings.popup_disable_modal, "popup-redirect-mode": this.loader.data.settings.item_open_link, url: item.url, "background-color": this.loader.data.settings.background_color, "primary-color": this.loader.data.settings.primary_color, "star-color": this.loader.data.settings.star_color, layout: this.layout, "user-name": item.username, caption: item.caption, "created-time": item.created_time, verified: item.verified, rating: item.rating !== null ? item.rating : 0, "alt-tag": this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time, this.layout), appStore: this.appStore });
   }
   renderHeader() {
-    return (index.h("covet-pics-gallery-header", { "product-title": this.productTitle, rating: this.rating, "rating-count": this.ratingCount, breakdown: this.breakdown, "header-type": this.headerType, "show-sort": this.headerShowSort.toString(), "show-average-star-rating": this.headerShowAverageRating.toString(), "show-breakdown": this.showBreakdown.toString() }));
+    return (index.h("covet-pics-gallery-header", { "product-title": this.productTitle, rating: this.rating, "rating-count": this.ratingCount, breakdown: this.breakdown, "header-type": this.headerType, "show-sort": this.headerShowSort.toString(), "show-average-star-rating": this.headerShowAverageRating.toString(), "show-breakdown": this.showBreakdown.toString(), appStore: this.appStore }));
   }
   render() {
     if (typeof this.items !== "undefined" && typeof this.loader !== "undefined") {
@@ -4066,7 +4074,7 @@ const CovetPicsGallerySlider = class {
     if (this.loader.previewMode) {
       document.body.querySelectorAll("covet-pics-popup").forEach(node => node.remove());
     }
-    this.popup = utils$1.createCovetPicsPopup(this.loader, this.items);
+    this.popup = utils$1.createCovetPicsPopup(this.loader, this.items, this.appStore);
     document.body.appendChild(this.popup);
   }
   initUploadWidget() {
@@ -4074,7 +4082,7 @@ const CovetPicsGallerySlider = class {
       document.querySelectorAll("covet-pics-upload").forEach(uploadWidget => uploadWidget.remove());
     }
     if (this.loader.data.settings["customer_photo_item_position"] || this.loader.data.settings["customer_photo_upload_button_selector"]) {
-      this.upload = utils$1.createUploadPopup(this.loader);
+      this.upload = utils$1.createUploadPopup(this.loader, this.appStore);
       document.body.appendChild(this.upload);
     }
   }
@@ -4152,6 +4160,7 @@ const CovetPicsGallerySlider = class {
   componentWillLoad() {
     this.initPopup();
     this.initUploadWidget();
+    this.initStore();
   }
   componentDidLoad() {
     this.initSwiper();
@@ -4164,6 +4173,14 @@ const CovetPicsGallerySlider = class {
     this.swiper.update();
     this.unFixSliderheight();
   }
+  initStore() {
+    this.appState = this.appStore.getState();
+    this.isDesktopScreen = this.appState.size.isDesktopScreen;
+    this.appStore.subscribe(() => {
+      this.appState = this.appStore.getState();
+      this.isDesktopScreen = this.appState.size.isDesktopScreen;
+    });
+  }
   checkAndOpenPopup() {
     if (this.sharedItemId === "none")
       return false;
@@ -4183,16 +4200,16 @@ const CovetPicsGallerySlider = class {
     return (index.h("covet-pics-gallery-item", { class: "swiper-slide slide", "item-source": item.source, "image-url": item.imageUrl, "item-style": item.itemStyle, "label-caption": item.labelCaption, "item-index": idx }));
   }
   renderStandardItem(item, idx, itemsLength) {
-    const itemWidth = store.state.isDesktopScreen
+    const itemWidth = this.isDesktopScreen
       ? (100 - (this.desktopItemPadding * (this.desktopPhotosPerRow - 1))) / this.desktopPhotosPerRow
       : (100 - (this.mobileItemPadding * (this.mobilePhotosPerRow - 1))) / this.mobilePhotosPerRow;
     return (index.h("covet-pics-gallery-item", { class: "swiper-slide", "animation-duration": this.loader.data.settings.item_animation_duration, "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.desktopPhotosPerRow, this.mobilePhotosPerRow), "item-id": item.id, "item-source": item.source, "hover-animation-style": this.loader.data.settings.item_animation_type, "hover-background-opacity": this.loader.data.settings.item_hover_background_opacity, "hover-border-color": this.loader.data.settings.item_hover_border_color, "hover-color-from": this.loader.data.settings.item_hover_color_from, "hover-color-to": this.loader.data.settings.item_hover_color_to, "hover-disabled": this.loader.data.settings.item_hover_disabled, "hover-preview": this.loader.previewHoverMode, "label-caption": this.loader.data.settings.item_without_product_label_text, "label-caption-with-links": this.loader.data.settings.item_label_text, "label-color": this.loader.data.settings.item_label_color, "label-font-size": this.loader.data.settings.item_label_font_size, "label-font-style": this.loader.data.settings.item_label_font_style, "lazy-load": true, links: item.links, "popup-disabled": this.loader.data.settings.popup_disable_modal, "popup-redirect-mode": this.loader.data.settings.item_open_link, "show-hover-icon": this.loader.data.settings.item_hover_icon, url: item.url, "alt-tag": this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in covet-widget slider`, rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, "item-type": item.data_type, caption: item.caption, "item-width": itemWidth, "item-index": idx }));
   }
   renderDetailItem(item, idx, itemsLength) {
-    const itemWidth = store.state.isDesktopScreen
+    const itemWidth = this.isDesktopScreen
       ? (100 - (this.desktopItemPadding * (this.desktopPhotosPerRow - 1))) / this.desktopPhotosPerRow
       : (100 - (this.mobileItemPadding * (this.mobilePhotosPerRow - 1))) / this.mobilePhotosPerRow;
-    return (index.h("covet-pics-gallery-item-detail", { class: "swiper-slide", "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.desktopPhotosPerRow, this.mobilePhotosPerRow), "item-id": item.id, "item-source": item.source, "item-style": this.itemStyle, "item-type": item.data_type, "item-width": itemWidth, "lazy-load": true, links: item.links, "popup-disabled": this.loader.data.settings.popup_disable_modal, "popup-redirect-mode": this.loader.data.settings.item_open_link, url: item.url, "background-color": this.loader.data.settings.background_color, "primary-color": this.loader.data.settings.primary_color, "star-color": this.loader.data.settings.star_color, layout: "slider", "user-name": item.username, caption: item.caption, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, verified: item.verified, altTag: this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in covet-widget slider`, "item-index": idx }));
+    return (index.h("covet-pics-gallery-item-detail", { class: "swiper-slide", "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.desktopPhotosPerRow, this.mobilePhotosPerRow), "item-id": item.id, "item-source": item.source, "item-style": this.itemStyle, "item-type": item.data_type, "item-width": itemWidth, "lazy-load": true, links: item.links, "popup-disabled": this.loader.data.settings.popup_disable_modal, "popup-redirect-mode": this.loader.data.settings.item_open_link, url: item.url, "background-color": this.loader.data.settings.background_color, "primary-color": this.loader.data.settings.primary_color, "star-color": this.loader.data.settings.star_color, layout: "slider", "user-name": item.username, caption: item.caption, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, verified: item.verified, altTag: this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in covet-widget slider`, appStore: this.appStore, "item-index": idx }));
   }
   render() {
     if (this.items !== undefined) {
@@ -4311,6 +4328,9 @@ const CovetPicsHighlighted = class {
       return this.mainSliderIndex;
     };
   }
+  componentWillLoad() {
+    this.initStore();
+  }
   componentDidLoad() {
     if (this.layout === "slider" || this.layout === "spotlight")
       this.initMainSlider();
@@ -4318,6 +4338,16 @@ const CovetPicsHighlighted = class {
   componentDidRender() {
     document.onkeydown = (e) => this.onSliderClickHandler(e);
   }
+  initStore() {
+    this.appState = this.appStore.getState();
+    this.isDesktopScreen = this.appState.size.isDesktopScreen;
+    this.windowHeight = this.appState.size.windowHeight;
+    this.appStore.subscribe(() => {
+      this.appState = this.appStore.getState();
+      this.isDesktopScreen = this.appState.size.isDesktopScreen;
+      this.windowHeight = this.appState.size.windowHeight;
+    });
+  }
   isClickOutsideHotspot(e) {
     const activeHotspots = Array.from(this.el.querySelectorAll(".hotspot.active.show-content"));
     if (activeHotspots.length > 1)
@@ -4334,7 +4364,7 @@ const CovetPicsHighlighted = class {
       "--covet-pics-highlighted-padding-px": utils$1.getSize(this.el, "width") * this.padding / 100 + "px",
       "--covet-pics-highlighted-primary-color": this.primaryColor.toString(),
       "--covet-pics-highlighted-secondary-color": this.secondaryColor.toString(),
-      "--covet-pics-highlighted-window-height": `${store.state.windowHeight * 0.01}px`
+      "--covet-pics-highlighted-window-height": `${this.windowHeight * 0.01}px`
     };
   }
   renderControlIcon(direction) {
@@ -4430,10 +4460,10 @@ const CovetPicsHighlighted = class {
     return `page ${index + 1} of ${itemsLength} pages, with thumbnail img preview ${sideLabel} in page slider layout`;
   }
   renderSlider() {
-    return (index.h("section", { id: "covet-pics-highlighted-page-slider", class: `main-slider ${this.layout}`, role: "region", "aria-label": "page slider" }, this.items.map((item, index$1) => index.h("covet-pics-highlighted-page", { class: `${this.layout} slide-noactive`, thumbnailUrl: item.data_type === "image" ? item.images.high_resolution : null, thumbnailAlt: this.thumbnailAltTag(item.caption, index$1, this.items.length, item.created_time), ariaLabel: this.pageAriaLabel(item, index$1, this.items.length, this.layout, !store.state.isDesktopScreen), thumbnailLayout: item.data_type, thumbnailCarouselImages: item.data_type === "carousel" ? item.carousel_media : null, videoUrl: item.video ? item.video : null, videoPoster: item.cover_images && item.cover_images.high_resolution ? item.cover_images.high_resolution : null, productLinks: item.links, productBaseImgAlt: `page ${index$1 + 1}/${this.items.length}`, productsLayout: this.productsLayout, layout: this.layout, showHotspots: this.showHotspots, hotspotsLayout: this.hotspotsLayout, hotspotsBackgoundColor: this.hotspotsBackgoundColor, isMobile: !store.state.isDesktopScreen, showPrice: this.showPrice, hideProductTitle: this.hideProductTitle, productsTitle: this.productsTitle, btnBuyLabel: this.btnBuyLabel, pageIndex: index$1, mainSliderIndex: this.mainSliderIndex, hideBranding: this.hideBranding, caption: item.caption, "user-name": item.username, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, showReview: this.showReview })), index.h("button", { disabled: this.mainSliderIndex === 0, onClick: (e) => this.mainSliderChangeSlide(e, "prev"), class: `slider-control main next ${this.layout === "spotlight" ? "main-spotlight" : ""}`, "aria-label": "slider-control prev", "aria-controls": "covet-pics-highlighted-page-slider", type: "button" }, this.renderControlIcon("next")), index.h("button", { disabled: this.mainSliderIndex === this.numberOfPages - 1, onClick: (e) => this.mainSliderChangeSlide(e, "next"), class: `slider-control main prev ${this.layout === "spotlight" ? "main-spotlight" : ""}`, "aria-label": "slider-control next", "aria-controls": "covet-pics-highlighted-page-slider", type: "button" }, this.renderControlIcon("prev"))));
+    return (index.h("section", { id: "covet-pics-highlighted-page-slider", class: `main-slider ${this.layout}`, role: "region", "aria-label": "page slider" }, this.items.map((item, index$1) => index.h("covet-pics-highlighted-page", { class: `${this.layout} slide-noactive`, thumbnailUrl: item.data_type === "image" ? item.images.high_resolution : null, thumbnailAlt: this.thumbnailAltTag(item.caption, index$1, this.items.length, item.created_time), ariaLabel: this.pageAriaLabel(item, index$1, this.items.length, this.layout, !this.isDesktopScreen), thumbnailLayout: item.data_type, thumbnailCarouselImages: item.data_type === "carousel" ? item.carousel_media : null, videoUrl: item.video ? item.video : null, videoPoster: item.cover_images && item.cover_images.high_resolution ? item.cover_images.high_resolution : null, productLinks: item.links, productBaseImgAlt: `page ${index$1 + 1}/${this.items.length}`, productsLayout: this.productsLayout, layout: this.layout, showHotspots: this.showHotspots, hotspotsLayout: this.hotspotsLayout, hotspotsBackgoundColor: this.hotspotsBackgoundColor, isMobile: !this.isDesktopScreen, showPrice: this.showPrice, hideProductTitle: this.hideProductTitle, productsTitle: this.productsTitle, btnBuyLabel: this.btnBuyLabel, pageIndex: index$1, mainSliderIndex: this.mainSliderIndex, hideBranding: this.hideBranding, caption: item.caption, "user-name": item.username, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, showReview: this.showReview, "page-id": item.id, appStore: this.appStore })), index.h("button", { disabled: this.mainSliderIndex === 0, onClick: (e) => this.mainSliderChangeSlide(e, "prev"), class: `slider-control main next ${this.layout === "spotlight" ? "main-spotlight" : ""}`, "aria-label": "slider-control prev", "aria-controls": "covet-pics-highlighted-page-slider", type: "button" }, this.renderControlIcon("next")), index.h("button", { disabled: this.mainSliderIndex === this.numberOfPages - 1, onClick: (e) => this.mainSliderChangeSlide(e, "next"), class: `slider-control main prev ${this.layout === "spotlight" ? "main-spotlight" : ""}`, "aria-label": "slider-control next", "aria-controls": "covet-pics-highlighted-page-slider", type: "button" }, this.renderControlIcon("prev"))));
   }
   renderVertical() {
-    return (this.items.map((item, index$1) => index.h("covet-pics-highlighted-page", { class: this.layout, thumbnailUrl: item.data_type === "image" ? item.images.high_resolution : null, thumbnailAlt: this.thumbnailAltTag(item.caption, index$1, this.items.length, item.created_time), ariaLabel: this.pageAriaLabel(item, index$1, this.items.length, this.layout, !store.state.isDesktopScreen), thumbnailLayout: item.data_type, thumbnailCarouselImages: item.data_type === "carousel" ? item.carousel_media : null, videoUrl: item.video ? item.video : null, videoPoster: item.cover_images && item.cover_images.high_resolution ? item.cover_images.high_resolution : null, productsLayout: this.productsLayout, productLinks: item.links, productBaseImgAlt: `page ${index$1 + 1}/${this.items.length}`, layout: this.layout, showHotspots: this.renderHotspots(), hotspotsLayout: this.hotspotsLayout, hotspotsBackgoundColor: this.hotspotsBackgoundColor, isMobile: !store.state.isDesktopScreen, showPrice: this.showPrice, hideProductTitle: this.hideProductTitle, productsTitle: this.productsTitle, reverseClass: index$1 % 2 !== 0 && store.state.isDesktopScreen && this.layout === "zigzag" ? "reverse" : "", btnBuyLabel: this.btnBuyLabel, hideBranding: this.hideBranding, caption: item.caption, "user-name": item.username, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, "item-type": item.data_type, showReview: this.showReview })));
+    return (this.items.map((item, index$1) => index.h("covet-pics-highlighted-page", { class: this.layout, thumbnailUrl: item.data_type === "image" ? item.images.high_resolution : null, thumbnailAlt: this.thumbnailAltTag(item.caption, index$1, this.items.length, item.created_time), ariaLabel: this.pageAriaLabel(item, index$1, this.items.length, this.layout, !this.isDesktopScreen), thumbnailLayout: item.data_type, thumbnailCarouselImages: item.data_type === "carousel" ? item.carousel_media : null, videoUrl: item.video ? item.video : null, videoPoster: item.cover_images && item.cover_images.high_resolution ? item.cover_images.high_resolution : null, productsLayout: this.productsLayout, productLinks: item.links, productBaseImgAlt: `page ${index$1 + 1}/${this.items.length}`, layout: this.layout, showHotspots: this.renderHotspots(), hotspotsLayout: this.hotspotsLayout, hotspotsBackgoundColor: this.hotspotsBackgoundColor, isMobile: !this.isDesktopScreen, showPrice: this.showPrice, hideProductTitle: this.hideProductTitle, productsTitle: this.productsTitle, reverseClass: index$1 % 2 !== 0 && this.isDesktopScreen && this.layout === "zigzag" ? "reverse" : "", btnBuyLabel: this.btnBuyLabel, hideBranding: this.hideBranding, caption: item.caption, "user-name": item.username, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, "item-type": item.data_type, showReview: this.showReview, "page-id": item.id, appStore: this.appStore })));
   }
   async mainSliderAnimationLoop() {
     if (this.mainSliderAnimatingSlides.length !== 0) {
@@ -4498,9 +4528,9 @@ const CovetPicsHighlighted = class {
     return null;
   }
   render() {
-    const showPagination = ((this.layout === "slider" && !store.state.isDesktopScreen) || this.layout === "spotlight")
+    const showPagination = ((this.layout === "slider" && !this.isDesktopScreen) || this.layout === "spotlight")
       && this.items && this.items.length > 1;
-    return (index.h(index.Host, { class: this.layout, style: this.setCSSVariables(), onClick: (e) => !store.state.isDesktopScreen && this.layout === "row" ? this.isClickOutsideHotspot(e) : null, role: this.layout === "zigzag" || this.layout === "row" ? "grid" : "region", "aria-label": this.highlightedAriaLabel() }, this.renderMainLayout(), showPagination &&
+    return (index.h(index.Host, { class: this.layout, style: this.setCSSVariables(), onClick: (e) => !this.isDesktopScreen && this.layout === "row" ? this.isClickOutsideHotspot(e) : null, role: this.layout === "zigzag" || this.layout === "row" ? "grid" : "region", "aria-label": this.highlightedAriaLabel() }, this.renderMainLayout(), showPagination &&
       index.h("span", { class: "page-pagination" }, `${this.mainSliderIndex + 1}/${this.items.length}`)));
   }
   get el() { return index.getElement(this); }

package/dist/cjs/covet-pics-gallery-header_3.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d4e21dc3.js');
-const store = require('./store-90bc6cce.js');
-const utils = require('./utils-70e645ee.js');
+const index = require('./index-7e3816c8.js');
+const sort = require('./sort-ecd4fc1f.js');
+const utils = require('./utils-85481438.js');
 const fragment = require('./fragment-29c21ac8.js');
 
 const covetPicsGalleryHeaderCss = ".header.header1{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:25px 20px 25px 20px}.header.header2{padding:25px 63px 0px 63px}@media only screen and (max-width: 799.98px){.header.header2{padding:25px 30px 0px 30px}}.header.header3{padding:25px 63px 25px 63px}@media only screen and (max-width: 799.98px){.header.header3{padding:25px 25px 25px 25px}}.header.header4{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:0px 63px 35px 63px}@media only screen and (max-width: 799.98px){.header.header4{padding:0px 25px 35px 25px}}.rated-wrap{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between}@media only screen and (max-width: 799.98px){.rated-wrap.header2{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.rated-wrap.header2:after{display:none}}.rated-wrap.header2.show-separation:after{content:\"\";position:absolute;top:0;left:50%;width:1px;height:100%;background-color:#ECECEC;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media only screen and (max-width: 799.98px){.rated-wrap.header2.show-separation:after:after{display:none}}.rated-wrap.header4{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.rating-wrap.header1{position:relative}.rating-wrap.header2{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.rating-wrap.header3{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.rating-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:none;background-color:transparent;cursor:pointer;position:relative;padding:0}.rating-text{font-size:14px;font-weight:400;color:#919EAB}.top-title{text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:2px;color:#919EAB;margin-bottom:25px}.star-title{width:9px;height:9px;margin-right:9px}.rating-title{margin:0}.rating-title.header4{font-size:18px;font-weight:500;color:#000000}.rated{margin-left:20px;font-size:14px;font-weight:700;color:#919EAB}.rating-breakdown.header1{position:absolute;display:block;top:0;left:0;color:#919EAB;font-size:14px;background-color:white;-webkit-transform:translateY(40px);transform:translateY(40px);max-height:0;overflow:hidden;opacity:0;padding:0;margin:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;border-radius:4px;border:1px solid transparent;-ms-flex:none;flex:none}.rating-breakdown.header1.show-breakdown{-webkit-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);border:1px solid #ECECEC;opacity:1;z-index:1000;max-height:1000px;min-width:326px;padding-bottom:23px}.rating-breakdown.header2{display:-ms-flexbox;display:flex}.rating-breakdown-title{font-size:14px;font-weight:700;margin-left:30px;color:#1F273D}.rating-breakdown-score{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:7px 30px 7px 30px}.rating-breakdown-text{margin:0px 0px 0px 20px;font-size:12px}.score.header1{margin-left:auto}.score.header2{margin-top:auto;font-size:14px;color:#1F273D;margin-bottom:0}@media only screen and (max-width: 799.98px){.score.header2{margin-bottom:20px}}.score.header3{color:#000000;padding-top:17px;margin:0}.score.header4{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:14px;font-weight:400;color:#919EAB;margin:19px 0px 0px 0px}.score-number.header2{font-size:62px;line-height:62px}.score-number.header3{font-size:18px;font-weight:600;color:#000000}.score-number.header4{font-size:14px;font-weight:700;color:#919EAB;margin-left:17px}.score-slash{position:relative;width:1px;height:14px;display:block;background-color:#C7C7C7;margin-left:12px;margin-right:12px}.score-total.header2{color:#919EAB;font-size:14px;margin-left:13px;padding-left:10px;position:relative}.score-total.header2:after{content:\"\";position:absolute;top:50%;left:0;width:1px;height:14px;background-color:#C7C7C7;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.score-total.header3{color:#919EAB;font-size:14px;padding-top:12px;margin:0}.score-total.header4{color:#919EAB;font-size:14px;font-weight:700;margin:0;position:relative}.score-total.header4.space-left{margin-left:17px}.sort-wrap.header2{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;margin-top:15px;margin-bottom:15px}@media only screen and (max-width: 799.98px){.sort-wrap.header2{-ms-flex-pack:center;justify-content:center}}.sort-wrap.header3{margin-top:30px}.sort-wrap.header4{margin-top:auto}.sorting{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;position:relative;-ms-flex:none;flex:none}.sorting.header4{border-radius:4px;margin-top:auto}.sort-title{font-size:14px;font-weight:700;color:#919EAB}.sort-title.header2{font-size:12px;font-weight:700;color:#000000}.sort-title.header3{font-size:12px;font-weight:700;color:#000000}.sort-title.header4{font-size:14px;font-weight:700;color:#007ACE}.sort-btn{background-color:transparent;border:none;color:#919EAB;font-size:14px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;cursor:pointer}.sort-btn.header2{color:#000000}.sort-btn.header3{border:1px solid #ECECEC;border-radius:4px;padding:8px 14px 8px 14px;margin-left:10px}.sort-btn.header4{color:#007ACE}.sort-select{position:absolute;display:block;top:0;right:0;color:#919EAB;font-size:14px;background-color:white;-webkit-transform:translateY(30px);transform:translateY(30px);max-height:0;overflow:hidden;cursor:pointer;opacity:0;padding:0;margin:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;border-radius:4px;border:1px solid transparent;-ms-flex:none;flex:none}@media only screen and (max-width: 799.98px){.sort-select.header2{right:50%;-webkit-transform:translate(50%, 30px);transform:translate(50%, 30px)}}.sort-select.show-sort{-webkit-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);border:1px solid #ECECEC;opacity:1;z-index:1000;max-height:1000px;min-width:186px}.sort-select.header3{left:0;right:auto;-webkit-transform:translateY(40px);transform:translateY(40px)}.sort-check{width:12px;height:9px;margin-right:12px}.sort-check path{-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in;stroke:transparent}.sort__dropdown-item{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;list-style:none;padding:12px 35px 0px 23px;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.sort__dropdown-item:first-of-type{padding-top:23px}.sort__dropdown-item:last-of-type{padding-bottom:23px}.sort__dropdown-item.active{color:#626C75}.sort__dropdown-item.active .sort-check{-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out}.sort__dropdown-item.active .sort-check path{stroke:#919EAB}.sort__dropdown-item:hover,.sort__dropdown-item:active,.sort__dropdown-item:focus{color:#626C75}.sort-arrow{margin-left:7px;width:9px;height:6px}@media only screen and (max-width: 799.98px){.sort-arrow.header1{margin-left:0}}.sort-arrow.header2{width:8px;height:6px;margin-left:15px}.sort-arrow.header4{width:10px;height:6px;margin-left:15px}@media only screen and (max-width: 799.98px){.sort-arrow.header4{margin-left:0}}.sort-arrow-down{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.rating-row{display:-ms-flexbox;display:flex}.star-score{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.star-score-count{width:57px;margin-bottom:6px;margin-top:0;color:#C7C7C7;font-size:12px}.progress-wrap{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.progress{width:180px;height:15px;border-radius:4px;background-color:#F7F8FC;margin:0px 10px 14px 10px}.progress-bar{position:absolute;top:0;left:0;height:15px;width:10%;border-radius:4px;background-color:#5C6AC4}.percent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.percent-count{color:#5C6AC4;font-size:10px}.review-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border:none;background-color:#5C6AC4;border-radius:4px;cursor:pointer;padding:10px 14px;color:#FFFFFF;font-size:14px}.icon-pen{width:12px;height:12px;margin-right:10px}@media only screen and (max-width: 799.98px){.icon-pen{margin-right:0}}";
@@ -82,10 +82,21 @@ const CovetPicsGalleryHeader = class {
       this.showSortDropdown = !this.showSortDropdown;
       if (event.target.getAttribute("aria-selected") === undefined)
         return false;
-      store.state.sortType.selected = event.target.getAttribute("aria-selected");
-      this.sortUpdated.emit(event.target.getAttribute("aria-selected"));
+      this.appStore.dispatch(sort.sortUpdated(event.target.getAttribute("aria-selected")));
+      this.sortUpdated.emit(event.target.getAttribute("aria-selected")); //TODO remove this (call this in component use sibscribe)
     };
   }
+  componentWillLoad() {
+    this.initStore();
+  }
+  initStore() {
+    this.appState = this.appStore.getState();
+    this.isDesktopScreen = this.appState.size.isDesktopScreen;
+    this.appStore.subscribe(() => {
+      this.appState = this.appStore.getState();
+      this.isDesktopScreen = this.appState.size.isDesktopScreen;
+    });
+  }
   getBreakdown() {
     const newBreakdown = [];
     const starsScore = ["one", "two", "three", "four", "five"];
@@ -112,28 +123,28 @@ const CovetPicsGalleryHeader = class {
   }
   renderSort() {
     var _a;
-    const mobileSort = !store.state.isDesktopScreen && (this.headerType === "header1" || this.headerType === "header4");
+    const mobileSort = !this.isDesktopScreen && (this.headerType === "header1" || this.headerType === "header4");
     const iconActiveClass = this.showSortDropdown ? "sort-arrow-down" : "";
-    const mobileSortSelected = mobileSort ? "" : (_a = store.state.sortType.options.find(el => el.value === store.state.sortType.selected)) === null || _a === void 0 ? void 0 : _a.name;
+    const mobileSortSelected = mobileSort ? "" : (_a = this.appState.sort.options.find(el => el.value === this.appState.sort.selected)) === null || _a === void 0 ? void 0 : _a.name;
     return (index.h("div", { class: `sorting ${this.headerType}` }, index.h("span", { class: `sort-title ${this.headerType}` }, "Sort ", mobileSort ? "" : "by", " :"), index.h("button", { class: `sort-btn ${this.headerType}`, onClick: () => this.showSortDropdown = !this.showSortDropdown }, index.h("span", { class: "sort-btn-text" }, mobileSortSelected), this.headerType === "header2" &&
       index.h("svg", { class: `sort-arrow ${this.headerType} ${iconActiveClass}`, viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4.5791 5.50671C4.37892 5.75887 3.99608 5.75887 3.79589 5.50671L0.663473 1.56088C0.403343 1.2332 0.636699 0.75 1.05508 0.75L7.31992 0.75C7.7383 0.75 7.97166 1.2332 7.71153 1.56088L4.5791 5.50671Z", fill: "#1F273D" })), (this.headerType === "header1" || this.headerType === "header3") &&
       index.h("svg", { class: `sort-arrow ${this.headerType} ${iconActiveClass}`, viewBox: "0 0 9 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4.8916 5.50671C4.69142 5.75887 4.30858 5.75887 4.10839 5.50671L0.380581 0.810878C0.120451 0.483199 0.353806 0 0.772186 0L8.22781 0C8.64619 0 8.87955 0.483199 8.61942 0.810878L4.8916 5.50671Z", fill: "#919EAB" })), this.headerType === "header4" &&
-      index.h("svg", { class: `sort-arrow ${this.headerType} ${iconActiveClass}`, viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1L5 5L9 1", stroke: "#007ACE", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("ul", { class: `sort-select ${this.headerType} ${this.showSortDropdown ? "show-sort" : ""}` }, store.state.sortType.options.map(el => index.h("li", { class: `sort__dropdown-item ${el.value === store.state.sortType.selected ? "active" : ""}`, "aria-selected": el.value, onClick: this.onSelectUpdate }, index.h("svg", { class: "sort-check", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M10.7273 1.5L4.72727 7.5L2 4.77273", stroke: "#919EAB", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), el.name)))));
+      index.h("svg", { class: `sort-arrow ${this.headerType} ${iconActiveClass}`, viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1L5 5L9 1", stroke: "#007ACE", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("ul", { class: `sort-select ${this.headerType} ${this.showSortDropdown ? "show-sort" : ""}` }, this.appState.sort.options.map(el => index.h("li", { class: `sort__dropdown-item ${el.value === this.appState.sort.selected ? "active" : ""}`, "aria-selected": el.value, onClick: this.onSelectUpdate }, index.h("svg", { class: "sort-check", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M10.7273 1.5L4.72727 7.5L2 4.77273", stroke: "#919EAB", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), el.name)))));
   }
   renderHeaderOne() {
-    const mobileRating = !store.state.isDesktopScreen && (this.headerType === "header1" || this.headerType === "header4");
+    const mobileRating = !this.isDesktopScreen && (this.headerType === "header1" || this.headerType === "header4");
     return (index.h("div", { class: `header ${this.headerType}` }, index.h("div", { class: `rated-wrap ${this.headerType}` }, index.h("button", { class: "rating-btn", onClick: this.onClickRatingHendler, onMouseEnter: this.mouseEnterRatingHandler, onMouseLeave: this.mouseLeaveRatingHandler }, index.h("covet-pics-star-rating", { rating: this.rating, showLabel: false, starSize: 15, spaceStars: 11, emptyStarColor: "transpotent", starBorderColor: "#fec500", starBorderWidth: 10 }), this.showAverageStarRating && index.h("p", { class: "rating-text" }, index.h("span", { class: "rated" }, "Rated ", this.rating, "/5 "), mobileRating ? `(${this.ratingCount})` : `based on ${this.ratingCount} customer reviews.`)), this.showAverageStarRating && this.renderBreakdown()), this.showSort && this.renderSort()));
   }
   renderHeaderTwo() {
     return (index.h("div", { class: `header ${this.headerType}` }, this.showAverageStarRating &&
-      index.h("div", { class: `rated-wrap ${this.headerType} ${this.showBreakdown ? "show-separation" : ""}` }, index.h("div", { class: `rating-wrap ${this.headerType}` }, store.state.isDesktopScreen && index.h("h3", { class: "rating-title" }, "Customers rated this:"), index.h("p", { class: `score ${this.headerType}` }, index.h("span", { class: `score-number ${this.headerType}` }, this.rating), " out of 5", index.h("span", { class: `score-total ${this.headerType}` }, " from ", this.ratingCount, " ratings"))), index.h("div", { class: "rating-breakdown" }, this.getBreakdown().map(el => index.h("div", { class: "rating-row" }, index.h("div", { class: "star-score" }, index.h("p", { class: "star-score-count" }, el.rating, " ", el.rating > 1 ? "stars" : "star")), index.h("div", { class: "progress-wrap" }, index.h("span", { class: "progress" }), index.h("span", { class: "progress-bar", style: { "width": `${el.rating_percentage}%` } })), index.h("div", { class: "percent" }, index.h("span", { class: "percent-count" }, el.rating_percentage)))))), index.h("div", { class: `sort-wrap ${this.headerType}` }, this.showSort && this.renderSort())));
+      index.h("div", { class: `rated-wrap ${this.headerType} ${this.showBreakdown ? "show-separation" : ""}` }, index.h("div", { class: `rating-wrap ${this.headerType}` }, this.isDesktopScreen && index.h("h3", { class: "rating-title" }, "Customers rated this:"), index.h("p", { class: `score ${this.headerType}` }, index.h("span", { class: `score-number ${this.headerType}` }, this.rating), " out of 5", index.h("span", { class: `score-total ${this.headerType}` }, " from ", this.ratingCount, " ratings"))), index.h("div", { class: "rating-breakdown" }, this.getBreakdown().map(el => index.h("div", { class: "rating-row" }, index.h("div", { class: "star-score" }, index.h("p", { class: "star-score-count" }, el.rating, " ", el.rating > 1 ? "stars" : "star")), index.h("div", { class: "progress-wrap" }, index.h("span", { class: "progress" }), index.h("span", { class: "progress-bar", style: { "width": `${el.rating_percentage}%` } })), index.h("div", { class: "percent" }, index.h("span", { class: "percent-count" }, el.rating_percentage)))))), index.h("div", { class: `sort-wrap ${this.headerType}` }, this.showSort && this.renderSort())));
   }
   renderHeaderThree() {
-    return (index.h("div", { class: `header ${this.headerType}` }, index.h("div", { class: `rated-wrap ${this.headerType}` }, index.h("div", { class: "rating-wrap" }, index.h("covet-pics-star-rating", { rating: 4, showLabel: false, starSize: 18, spaceStars: 11, emptyStarColor: "transpotent", starBorderColor: "#fec500", starBorderWidth: 10 }), this.showAverageStarRating && index.h("p", { class: `score ${this.headerType}` }, index.h("span", { class: `score-number ${this.headerType}` }, this.rating), " out of 5 stars"), index.h("p", { class: `score-total ${this.headerType}` }, this.ratingCount, " reviews")), index.h("div", { class: "review-wrap" }, index.h("button", { class: "review-btn", onClick: this.onClickAddReviewHendler }, index.h("svg", { class: "icon-pen", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5.94629 10.4102H10.8928", stroke: "white", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M8.4197 1.34148C8.63834 1.12283 8.93489 1 9.24411 1C9.39721 1 9.54882 1.03016 9.69027 1.08875C9.83173 1.14734 9.96025 1.23322 10.0685 1.34148C10.1768 1.44975 10.2627 1.57827 10.3213 1.71972C10.3798 1.86118 10.41 2.01279 10.41 2.16589C10.41 2.319 10.3798 2.47061 10.3213 2.61206C10.2627 2.75351 10.1768 2.88204 10.0685 2.9903L3.19843 9.86039L1 10.41L1.54961 8.21157L8.4197 1.34148Z", stroke: "white", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })), store.state.isDesktopScreen && "Write a review", " "))), index.h("div", { class: `sort-wrap ${this.headerType}` }, this.showSort && this.renderSort())));
+    return (index.h("div", { class: `header ${this.headerType}` }, index.h("div", { class: `rated-wrap ${this.headerType}` }, index.h("div", { class: "rating-wrap" }, index.h("covet-pics-star-rating", { rating: 4, showLabel: false, starSize: 18, spaceStars: 11, emptyStarColor: "transpotent", starBorderColor: "#fec500", starBorderWidth: 10 }), this.showAverageStarRating && index.h("p", { class: `score ${this.headerType}` }, index.h("span", { class: `score-number ${this.headerType}` }, this.rating), " out of 5 stars"), index.h("p", { class: `score-total ${this.headerType}` }, this.ratingCount, " reviews")), index.h("div", { class: "review-wrap" }, index.h("button", { class: "review-btn", onClick: this.onClickAddReviewHendler }, index.h("svg", { class: "icon-pen", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5.94629 10.4102H10.8928", stroke: "white", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M8.4197 1.34148C8.63834 1.12283 8.93489 1 9.24411 1C9.39721 1 9.54882 1.03016 9.69027 1.08875C9.83173 1.14734 9.96025 1.23322 10.0685 1.34148C10.1768 1.44975 10.2627 1.57827 10.3213 1.71972C10.3798 1.86118 10.41 2.01279 10.41 2.16589C10.41 2.319 10.3798 2.47061 10.3213 2.61206C10.2627 2.75351 10.1768 2.88204 10.0685 2.9903L3.19843 9.86039L1 10.41L1.54961 8.21157L8.4197 1.34148Z", stroke: "white", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })), this.isDesktopScreen && "Write a review", " "))), index.h("div", { class: `sort-wrap ${this.headerType}` }, this.showSort && this.renderSort())));
   }
   renderHeaderFour() {
     return (index.h("div", { class: `header ${this.headerType}` }, index.h("div", { class: `rated-wrap ${this.headerType}` }, index.h("p", { class: "top-title" }, index.h("svg", { class: "star-title", viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4.5 0.75L5.65875 3.0975L8.25 3.47625L6.375 5.3025L6.8175 7.8825L4.5 6.66375L2.1825 7.8825L2.625 5.3025L0.75 3.47625L3.34125 3.0975L4.5 0.75Z", fill: "#929EAB", stroke: "#929EAB", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })), "costomer reviews for"), index.h("h3", { class: `rating-title ${this.headerType}` }, this.productTitle), index.h("div", { class: `score ${this.headerType}` }, index.h("covet-pics-star-rating", { rating: this.rating, showLabel: false, starSize: 12, spaceStars: 11, emptyStarColor: "transpotent", starBorderColor: "#fec500", starBorderWidth: 10 }), this.showAverageStarRating &&
-      index.h("span", null, index.h("span", { class: `score-number ${this.headerType}` }, this.rating), " ", store.state.isDesktopScreen && "average rating"), this.showAverageStarRating && index.h("span", { class: "score-slash" }), index.h("span", null, index.h("span", { class: `score-total ${this.headerType} ${!this.showAverageStarRating ? "space-left" : 0}` }, this.ratingCount), " reviews"))), index.h("div", { class: `sort-wrap ${this.headerType}` }, this.showSort && this.renderSort())));
+      index.h("span", null, index.h("span", { class: `score-number ${this.headerType}` }, this.rating), " ", this.isDesktopScreen && "average rating"), this.showAverageStarRating && index.h("span", { class: "score-slash" }), index.h("span", null, index.h("span", { class: `score-total ${this.headerType} ${!this.showAverageStarRating ? "space-left" : 0}` }, this.ratingCount), " reviews"))), index.h("div", { class: `sort-wrap ${this.headerType}` }, this.showSort && this.renderSort())));
   }
   render() {
     if (this.headerType === "header1")
@@ -538,6 +549,10 @@ const CovetPicsGalleryItemDetail = class {
     this.reviewClass = this.caption !== null && this.itemType === "text" ? "text-review" : "";
     this.starOnlyClass = this.caption === null && this.itemType === "text" ? "star-only" : "";
     this.highlightedClass = this.highlighted ? "highlighted" : "";
+    this.appState = this.appStore.getState();
+    this.appStore.subscribe(() => {
+      this.appState = this.appStore.getState();
+    });
   }
   componentDidLoad() {
     window.addEventListener("scroll", this.scrollHandler, { passive: true });
@@ -552,7 +567,7 @@ const CovetPicsGalleryItemDetail = class {
     // return isElInViewport
     //   ? this.el.classList.add("in-viewport")
     //   : this.el.classList.remove("in-viewport");
-    const screenHeight = (store.state.windowHeight || document.documentElement.clientHeight);
+    const screenHeight = (this.appState.size.windowHeight || document.documentElement.clientHeight);
     const isElInViewport = utils.getSize(this.el, "top") >= 0 && utils.getSize(this.el, "top") <= screenHeight / 2;
     const items = Array.from(this.el.parentNode.querySelectorAll(".grid-item"));
     const isLastHighlighted = items.length > 1