@sledge-app/react-instant-search 1.0.36 → 1.0.38

package/dist/sledge-react-instant-search.js

@@ -40,6 +40,8 @@ const DATASET_ATTRIBUTE_KEY = {
     SECTION_TITLE: "data-section-title",
     SECTION_DESCRIPTION: "data-section-description",
     USE_SLIDER: "data-use-slider",
+    FILL_COLOR: "data-fill-color",
+    OUTLINE_COLOR: "data-outline-color",
     POSITION_WIDGET: "data-position-widget"
   },
   WISHLIST: {
@@ -54,6 +56,7 @@ const DATASET_ATTRIBUTE_KEY = {
     RATING_TOTAL: "data-rating-total",
     RATING_AVERAGE: "data-rating-average",
     RENDER_REVIEW_PRODUCT_INFO: "data-render-review-product-info",
+    TRUST_BADGE_VARIANT: "data-trust-badge-variant",
     SHOW_RATING_AVERAGE: "data-show-rating-average"
   },
   INSTANT_SEARCH: {
@@ -72,7 +75,7 @@ const DATASET_ATTRIBUTE_KEY = {
     RENDER_ARTICLE_CARD: "data-render-article-card"
   },
   PRODUCT_RECOMMENDATION: {
-    LIMIT_TO_DISPLAY: "data-limit-to-display",
+    DISPLAY_LIMIT: "data-display-limit",
     HIDDEN_PRODUCT_IDS: "data-hidden-product-ids"
   }
 };
@@ -103,6 +106,7 @@ const INTERNAL_SELECTOR_VALUE = {
   PRODUCT_REVIEW: {
     ELEMENT_WIDGET_POPUP_DETAIL: "product-review-widget-popup-detail",
     ELEMENT_WIDGET_FORM_ADD: "product-review-widget-form-add",
+    ELEMENT_STICKY_BADGE: "product-review-sticky-badge",
     ELEMENT_HAPPY_CUSTOMERS_PAGE_POPUP: "product-review-happy-customers-page-popup"
   },
   INSTANT_SEARCH: {
@@ -124,7 +128,9 @@ const SELECTOR = {
     ELEMENT_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-widget"]`,
     ELEMENT_HAPPY_CUSTOMERS_PAGE: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-happy-customers-page"]`,
     ELEMENT_RATING: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-rating"]`,
-    ELEMENT_STICKY_SIDEBAR_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-sticky-sidebar-widget"]`
+    ELEMENT_TRUST_BADGE: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-trust-badge"]`,
+    ELEMENT_STICKY_SIDEBAR_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-sticky-sidebar-widget"]`,
+    ELEMENT_SNIPPET: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-snippet"]`
   },
   INSTANT_SEARCH: {
     ELEMENT_SEARCH_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="instant-search-widget"]`,
@@ -133,7 +139,8 @@ const SELECTOR = {
     ELEMENT_PLP_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="instant-search-product-filter-widget"]`
   },
   PRODUCT_RECOMMENDATION: {
-    ELEMENT_RECENTLY_VIEWED_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-recommendation-recently-viewed-widget"]`
+    ELEMENT_RECENTLY_VIEWED: `[${SELECTOR_ATTRIBUTE_KEY}="product-recommendation-recently-viewed"]`,
+    ELEMENT_RELATED_PRODUCTS: `[${SELECTOR_ATTRIBUTE_KEY}="product-recommendation-related-prodcuts"]`
   }
 };
 const DEFAULT_MAX_WIDTH_COMPONENT = "1180px";
@@ -151,7 +158,9 @@ const OBJECT_DATA_STRING_KEY = {
   TOTAL_PAGE: "{{ total_page }}",
   TOTAL_RESULT: "{{ total_result }}",
   COLLECTION_NAME: "{{ collection_name }}",
-  TOTAL_WISHLIST: "{{ total_wishlist }}"
+  TOTAL_WISHLIST: "{{ total_wishlist }}",
+  ACCEPTED_FILETYPE_MEDIA: "{{ accepted_filetype_media }}",
+  MAX_SIZE_MEDIA: "{{ max_size_media }}"
 };
 const ELEMENT_ID = {
   PRODUCT_REVIEW: {
@@ -166,6 +175,213 @@ const PAYLOAD_API_ALIASES = {
   PUT: "dEnOjbvTzULLK",
   DELETE: "pLC93Tvsu6g7H"
 };
+async function swr(url, options) {
+  if (typeof localStorage !== "undefined" && typeof caches !== "undefined" && options.method === "GET" && !(options == null ? void 0 : options.ignoreSWR)) {
+    const data = await getData(url);
+    return await data.json();
+  } else
+    return fetch(url, options).then((response) => response.json());
+}
+async function getData(url) {
+  const cacheVersion = 1;
+  const cacheName = `sledge-${cacheVersion}`;
+  return caches.open(cacheName).then((cache) => {
+    return cache.match(url).then((cachedResponse) => {
+      const fetchedResponse = fetch(url).then(async (networkResponse) => {
+        const mainUrl = url.split("?")[0];
+        const cacheMatches = await cache.matchAll();
+        const filteredCaches = await cacheMatches.filter((f) => f.url.includes(mainUrl) && f.url !== url);
+        for (const c of filteredCaches) {
+          await cache.delete(c.url);
+        }
+        cache.put(url, networkResponse.clone());
+        return networkResponse;
+      });
+      return cachedResponse || fetchedResponse;
+    });
+  });
+}
+const usePrevious = (value) => {
+  const ref = React__default.useRef();
+  React__default.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+const sanitizeDataId = (id) => {
+  if (!id)
+    return "";
+  let getId = String(id);
+  if (getId.includes("shopify") && getId.includes("/")) {
+    let arrId = getId.split("/");
+    return arrId[arrId.length - 1] || getId;
+  } else {
+    return getId;
+  }
+};
+const isFunction = (data) => typeof data === "function";
+const scrollToElement = (params) => {
+  const { element, headerOffset } = params;
+  if (!element)
+    return;
+  var elementPosition = element == null ? void 0 : element.getBoundingClientRect().top;
+  var offsetPosition = elementPosition + window.scrollY - headerOffset;
+  window.scrollTo({
+    top: offsetPosition,
+    behavior: "smooth"
+  });
+};
+const getUnixTimestamp = (params) => {
+  const { addMoreTime = 0, addMoreTimeBy = "day" } = params || {};
+  let moreTime = 0;
+  if (addMoreTime) {
+    if (addMoreTimeBy === "day")
+      moreTime = addMoreTime * 60 * 60 * 24;
+    if (addMoreTimeBy === "hour")
+      moreTime = addMoreTime * 60 * 60;
+    if (addMoreTimeBy === "minute")
+      moreTime = addMoreTime * 60;
+    if (addMoreTimeBy === "second")
+      moreTime = addMoreTime;
+  }
+  return Math.floor(Date.now() / 1e3) + moreTime;
+};
+const fetchApi = async (params) => {
+  const { url, method, authorization = "", payload = {}, headers = {}, isSimpleRequest = true, isUploadFile = false, ignoreSWR = false } = params;
+  var myHeaders = new Headers();
+  if (!isSimpleRequest) {
+    if (authorization)
+      myHeaders.append("Authorization", `Bearer ${authorization}`);
+    if (Object.keys(headers).length)
+      Object.keys(headers).forEach(function(key) {
+        myHeaders.append(key, headers[key]);
+      });
+  }
+  var formdata = new FormData();
+  if (isSimpleRequest || isUploadFile) {
+    if (authorization && isSimpleRequest)
+      formdata.append(PAYLOAD_API_ALIASES.Authorization, authorization);
+    formdata.append(PAYLOAD_API_ALIASES.Method, PAYLOAD_API_ALIASES[method]);
+    if (Object.keys(payload).length)
+      Object.keys(payload).forEach(function(key) {
+        if (isUploadFile && (payload == null ? void 0 : payload.files))
+          [...payload.files].map((item) => {
+            formdata.append("files", item, item.name);
+          });
+        formdata.append(key, payload[key]);
+      });
+  }
+  const fixMethod = isSimpleRequest ? "POST" : method;
+  var requestOptions = {
+    method: fixMethod,
+    redirect: "follow",
+    headers: myHeaders,
+    body: fixMethod === "GET" ? null : isSimpleRequest || isUploadFile ? formdata : JSON.stringify(payload),
+    ignoreSWR
+  };
+  return await swr(`${url}`, requestOptions);
+};
+const convertDate = (date, options = {
+  timeZone: "Asia/Jakarta",
+  year: "numeric",
+  month: "numeric",
+  day: "numeric"
+}) => new Date(date).toLocaleString("en-US", options);
+const watchElement = ({ selector = null, init = null, customInit = false }) => {
+  if (!selector || !init)
+    return;
+  var observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      var nodes = Array.prototype.slice.call(mutation.addedNodes);
+      nodes.forEach(function(node) {
+        if (node.nodeType === 1 && (node.matches(selector) || node.querySelector(selector))) {
+          if (!customInit) {
+            let elementNode = Array.from(node.querySelectorAll(selector));
+            if (elementNode.length) {
+              elementNode.map((item) => {
+                init(item);
+              });
+            }
+          } else {
+            init();
+          }
+        }
+      });
+    });
+  });
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: false,
+    characterData: false
+  });
+};
+const getFillRating = ({
+  average,
+  item,
+  index,
+  productId,
+  customComponentId,
+  unixTimestamp
+}) => {
+  let ratingValue = Math.floor(parseFloat(average));
+  let getCommaValue = String(average).includes(",") ? String(average).split(",") : [];
+  let getCommaValueDot = String(average).includes(".") ? String(average).split(".") : [];
+  let isHaveCommaValue = getCommaValue.length || getCommaValueDot.length;
+  let commaValue = isHaveCommaValue ? getCommaValue[1] || getCommaValueDot[1] : 0;
+  let fillOther = "fill-0";
+  if (item > ratingValue && ratingValue + 1 === item) {
+    fillOther = `fill-${commaValue}`;
+  }
+  fillOther = item <= ratingValue ? "full" : fillOther;
+  let offset;
+  if (fillOther === "fill-0") {
+    offset = "0%";
+  }
+  if (fillOther === "fill-1") {
+    offset = "25%";
+  }
+  if (fillOther === "fill-2") {
+    offset = "35%";
+  }
+  if (fillOther === "fill-3") {
+    offset = "40%";
+  }
+  if (fillOther === "fill-4") {
+    offset = "45%";
+  }
+  if (fillOther === "fill-5") {
+    offset = "50%";
+  }
+  if (fillOther === "fill-6") {
+    offset = "60%";
+  }
+  if (fillOther === "fill-7") {
+    offset = "70%";
+  }
+  if (fillOther === "fill-8") {
+    offset = "80%";
+  }
+  if (fillOther === "fill-9") {
+    offset = "90%";
+  }
+  if (fillOther === "full") {
+    offset = "100%";
+  }
+  let suffixGradientId = `-${fillOther}-${index}-${productId ? productId : unixTimestamp}${customComponentId ? `-${customComponentId}` : ""}`;
+  let strokeGradientId = `rating-stroke${suffixGradientId}`;
+  let fillGradientId = `rating-gradient${suffixGradientId}`;
+  return {
+    suffixGradientId,
+    strokeGradientId,
+    fillGradientId,
+    offset,
+    fillOther
+  };
+};
+const stripTags = (html) => {
+  return html.replace(/(<([^>]+)>)/gi, "");
+};
 const root = "";
 const Loading = "";
 const ConfirmationPopup = "";
@@ -289,12 +505,18 @@ const Checkbox = ({ id, name, value, required, label, checked, labelStyle = {},
 const Slider$1 = "";
 const Slider = (props) => {
   const { defaultValue, min, max, step = 1, setValueCommit, setValueChange } = props;
-  const [value, setValue] = React__default.useState(defaultValue);
+  const [valueSlider, setValueSlider] = React__default.useState(defaultValue);
+  const [hoverActiveMin, setHoverActiveMin] = React__default.useState(false);
+  const [hoverActiveMax, setHoverActiveMax] = React__default.useState(false);
+  React__default.useEffect(() => {
+    setValueSlider(defaultValue);
+  }, [defaultValue]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     $faa2e61a3361514f$export$be92b6f5f03c0fe9,
     {
       className: "sledge__SliderRoot",
       defaultValue,
+      value: valueSlider,
       ...typeof min !== "undefined" ? {
         min
       } : {},
@@ -302,31 +524,32 @@ const Slider = (props) => {
       step,
       "aria-label": "Volume",
       onValueCommit: (valueCommit) => {
-        setValueCommit && setValueCommit(valueCommit);
-        setValue(valueCommit);
+        setValueCommit == null ? void 0 : setValueCommit(valueCommit);
       },
       onValueChange: (valueChange) => {
-        setValueChange && setValueChange(valueChange);
-        setValue(valueChange);
+        setValueChange == null ? void 0 : setValueChange(valueChange);
+        setValueSlider(valueChange);
       },
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$13921ac0cc260818, { className: "sledge__SliderTrack", children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$9a58ef0d7ad3278c, { className: "sledge__SliderRange" }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Tooltip,
           {
-            content: value[0],
+            content: valueSlider[0],
             customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
             wrapTrigger: false,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
+            forceOpen: hoverActiveMin,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb", onMouseEnter: () => setHoverActiveMin(true), onMouseLeave: () => setHoverActiveMin(false) })
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        !defaultValue[1] ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
           Tooltip,
           {
-            content: value[1],
+            content: valueSlider[1],
             customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
             wrapTrigger: false,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
+            forceOpen: hoverActiveMax,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb", onMouseEnter: () => setHoverActiveMax(true), onMouseLeave: () => setHoverActiveMax(false) })
           }
         )
       ]
@@ -701,150 +924,6 @@ const SelectField = (props) => {
   ) });
 };
 const ProductGrid$1 = "";
-async function swr(url, options) {
-  if (typeof localStorage !== "undefined" && typeof caches !== "undefined" && options.method === "GET" && !(options == null ? void 0 : options.ignoreSWR)) {
-    const data = await getData(url);
-    return await data.json();
-  } else
-    return fetch(url, options).then((response) => response.json());
-}
-async function getData(url) {
-  const cacheVersion = 1;
-  const cacheName = `sledge-${cacheVersion}`;
-  return caches.open(cacheName).then((cache) => {
-    return cache.match(url).then((cachedResponse) => {
-      const fetchedResponse = fetch(url).then(async (networkResponse) => {
-        const mainUrl = url.split("?")[0];
-        const cacheMatches = await cache.matchAll();
-        const filteredCaches = await cacheMatches.filter((f) => f.url.includes(mainUrl) && f.url !== url);
-        for (const c of filteredCaches) {
-          await cache.delete(c.url);
-        }
-        cache.put(url, networkResponse.clone());
-        return networkResponse;
-      });
-      return cachedResponse || fetchedResponse;
-    });
-  });
-}
-const usePrevious = (value) => {
-  const ref = React__default.useRef();
-  React__default.useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
-const sanitizeDataId = (id) => {
-  if (!id)
-    return "";
-  let getId = String(id);
-  if (getId.includes("shopify") && getId.includes("/")) {
-    let arrId = getId.split("/");
-    return arrId[arrId.length - 1] || getId;
-  } else {
-    return getId;
-  }
-};
-const isFunction = (data) => typeof data === "function";
-const scrollToElement = (params) => {
-  const { element, headerOffset } = params;
-  if (!element)
-    return;
-  var elementPosition = element == null ? void 0 : element.getBoundingClientRect().top;
-  var offsetPosition = elementPosition + window.scrollY - headerOffset;
-  window.scrollTo({
-    top: offsetPosition,
-    behavior: "smooth"
-  });
-};
-const getUnixTimestamp = (params) => {
-  const { addMoreTime = 0, addMoreTimeBy = "day" } = params || {};
-  let moreTime = 0;
-  if (addMoreTime) {
-    if (addMoreTimeBy === "day")
-      moreTime = addMoreTime * 60 * 60 * 24;
-    if (addMoreTimeBy === "hour")
-      moreTime = addMoreTime * 60 * 60;
-    if (addMoreTimeBy === "minute")
-      moreTime = addMoreTime * 60;
-    if (addMoreTimeBy === "second")
-      moreTime = addMoreTime;
-  }
-  return Math.floor(Date.now() / 1e3) + moreTime;
-};
-const fetchApi = async (params) => {
-  const { url, method, authorization = "", payload = {}, headers = {}, isSimpleRequest = true, isUploadFile = false, ignoreSWR = false } = params;
-  var myHeaders = new Headers();
-  if (!isSimpleRequest) {
-    if (authorization)
-      myHeaders.append("Authorization", `Bearer ${authorization}`);
-    if (Object.keys(headers).length)
-      Object.keys(headers).forEach(function(key) {
-        myHeaders.append(key, headers[key]);
-      });
-  }
-  var formdata = new FormData();
-  if (isSimpleRequest || isUploadFile) {
-    if (authorization && isSimpleRequest)
-      formdata.append(PAYLOAD_API_ALIASES.Authorization, authorization);
-    formdata.append(PAYLOAD_API_ALIASES.Method, PAYLOAD_API_ALIASES[method]);
-    if (Object.keys(payload).length)
-      Object.keys(payload).forEach(function(key) {
-        if (isUploadFile && (payload == null ? void 0 : payload.files))
-          [...payload.files].map((item) => {
-            formdata.append("files", item, item.name);
-          });
-        formdata.append(key, payload[key]);
-      });
-  }
-  const fixMethod = isSimpleRequest ? "POST" : method;
-  var requestOptions = {
-    method: fixMethod,
-    redirect: "follow",
-    headers: myHeaders,
-    body: fixMethod === "GET" ? null : isSimpleRequest || isUploadFile ? formdata : JSON.stringify(payload),
-    ignoreSWR
-  };
-  return await swr(`${url}`, requestOptions);
-};
-const convertDate = (date, options = {
-  timeZone: "Asia/Jakarta",
-  year: "numeric",
-  month: "numeric",
-  day: "numeric"
-}) => new Date(date).toLocaleString("en-US", options);
-const watchElement = ({ selector = null, init = null, customInit = false }) => {
-  if (!selector || !init)
-    return;
-  var observer = new MutationObserver(function(mutations) {
-    mutations.forEach(function(mutation) {
-      var nodes = Array.prototype.slice.call(mutation.addedNodes);
-      nodes.forEach(function(node) {
-        if (node.nodeType === 1 && (node.matches(selector) || node.querySelector(selector))) {
-          if (!customInit) {
-            let elementNode = Array.from(node.querySelectorAll(selector));
-            if (elementNode.length) {
-              elementNode.map((item) => {
-                init(item);
-              });
-            }
-          } else {
-            init();
-          }
-        }
-      });
-    });
-  });
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-    attributes: false,
-    characterData: false
-  });
-};
-const stripTags = (html) => {
-  return html.replace(/(<([^>]+)>)/gi, "");
-};
 const addToCart = async (data) => {
   var _a, _b;
   let items = [];
@@ -971,7 +1050,7 @@ const checkWishlist = async (id, variantId) => {
     return;
   });
 };
-const addToCartTrigger$1 = async (data) => {
+const addToCartTrigger$2 = async (data) => {
   const { productId } = data;
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
   let url = `${API_URL}/wishlist/cart`;
@@ -1510,7 +1589,6 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
     let getMessage = text_confirm_add_to_your_wishlist;
     if (getMessage)
       getMessage = getMessage.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_WISHLIST, wishlistData.length);
-    console.log("text_confirm_add_to_your_wishlist", text_confirm_add_to_your_wishlist);
     if (shareId && wishlistData.length) {
       window.sledgeConfirmationPopup({
         title: title_confirm_add_to_your_wishlist || "Are you sure want to add this to your wishlist item?",
@@ -1901,53 +1979,14 @@ const Rating = (props) => {
         [1, 2, 3, 4, 5].map((item, index) => {
           if (!(item <= numberOfIcons))
             return;
-          let ratingValue = Math.floor(parseFloat(averageReview));
-          let getCommaValue = String(averageReview).includes(",") ? String(averageReview).split(",") : [];
-          let getCommaValueDot = String(averageReview).includes(".") ? String(averageReview).split(".") : [];
-          let isHaveCommaValue = getCommaValue.length || getCommaValueDot.length;
-          let commaValue = isHaveCommaValue ? getCommaValue[1] || getCommaValueDot[1] : 0;
-          let fillOther = "fill-0";
-          if (item > ratingValue && ratingValue + 1 === item) {
-            fillOther = `fill-${commaValue}`;
-          }
-          fillOther = item <= ratingValue ? "full" : fillOther;
-          let offset;
-          if (fillOther === "fill-0") {
-            offset = "0%";
-          }
-          if (fillOther === "fill-1") {
-            offset = "25%";
-          }
-          if (fillOther === "fill-2") {
-            offset = "35%";
-          }
-          if (fillOther === "fill-3") {
-            offset = "40%";
-          }
-          if (fillOther === "fill-4") {
-            offset = "45%";
-          }
-          if (fillOther === "fill-5") {
-            offset = "50%";
-          }
-          if (fillOther === "fill-6") {
-            offset = "60%";
-          }
-          if (fillOther === "fill-7") {
-            offset = "70%";
-          }
-          if (fillOther === "fill-8") {
-            offset = "80%";
-          }
-          if (fillOther === "fill-9") {
-            offset = "90%";
-          }
-          if (fillOther === "full") {
-            offset = "100%";
-          }
-          let suffixGradientId = `-${fillOther}-${index}-${productId ? productId : unixTimestamp}${customComponentId ? `-${customComponentId}` : ""}`;
-          let strokeGradientId = `rating-stroke${suffixGradientId}`;
-          let fillGradientId = `rating-gradient${suffixGradientId}`;
+          const { strokeGradientId, suffixGradientId, offset, fillGradientId, fillOther } = getFillRating({
+            average: averageReview,
+            item,
+            index,
+            productId,
+            unixTimestamp,
+            customComponentId
+          });
           return /* @__PURE__ */ createElement("svg", { xmlns: "http://www.w3.org/2000/svg", ...sizing, viewBox: "0 0 32 32", key: suffixGradientId }, /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: strokeGradientId, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset, stopColor: fillColor || fill_color }),
@@ -2309,7 +2348,7 @@ const searchTrigger = async (data) => {
     return;
   });
 };
-const productClickTrigger = async (data) => {
+const productClickTrigger$1 = async (data) => {
   const { productId } = data;
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
   let url = `${API_URL}/instantsearch/statistics/click`;
@@ -2334,7 +2373,7 @@ const productClickTrigger = async (data) => {
     return;
   });
 };
-const addToCartTrigger = async (data) => {
+const addToCartTrigger$1 = async (data) => {
   const { productId } = data;
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
   let url = `${API_URL}/instantsearch/statistics/cart`;
@@ -2359,6 +2398,55 @@ const addToCartTrigger = async (data) => {
     return;
   });
 };
+const productRecommendationSourceApps = ["recently-viewed", "related-product", "hand-picked", "new-arrival", "personalized-curated"];
+const productClickTrigger = async (data) => {
+  const { productId, sourceApp } = data;
+  let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
+  let url = `${API_URL}/product-recommendation/statistics/click`;
+  let headers = {
+    "Content-Type": "application/json"
+  };
+  let payload = {
+    product_id: sanitizeDataId(productId),
+    widget: sourceApp
+  };
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeAuthApp,
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
+const addToCartTrigger = async (data) => {
+  const { productId, sourceApp } = data;
+  let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
+  let url = `${API_URL}/product-recommendation/statistics/cart`;
+  let headers = {
+    "Content-Type": "application/json"
+  };
+  let payload = {
+    product_id: sanitizeDataId(productId),
+    widget: sourceApp
+  };
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeAuthApp,
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
 const ProductCard = (props) => {
   var _a, _b, _c;
   const {
@@ -2504,9 +2592,18 @@ const ProductCard = (props) => {
             "a",
             {
               href: url,
-              onClick: () => sourceApp === "instant-search" && productClickTrigger({
-                productId: id
-              }),
+              onClick: () => {
+                if (sourceApp === "instant-search") {
+                  productClickTrigger$1({
+                    productId: id
+                  });
+                } else if (productRecommendationSourceApps.includes(sourceApp)) {
+                  productClickTrigger({
+                    productId: id,
+                    sourceApp
+                  });
+                }
+              },
               className: "sledge__product-grid-card-image-link",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2530,7 +2627,21 @@ const ProductCard = (props) => {
                     wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`, alt: "sledge-card-image", loading: "lazy", className: "sledge__product-grid-card-image-featured-image" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "img",
+                  {
+                    src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
+                    alt: "sledge-card-image",
+                    loading: "lazy",
+                    className: "sledge__product-grid-card-image-featured-image",
+                    onError: ({ currentTarget }) => {
+                      if (!currentTarget)
+                        return;
+                      currentTarget.onerror = null;
+                      currentTarget.src = `${CDN_URL}/images/blank-image.png`;
+                    }
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: images == null ? void 0 : images.map((image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "img",
                   {
@@ -2577,9 +2688,18 @@ const ProductCard = (props) => {
             "a",
             {
               href: url,
-              onClick: () => sourceApp === "instant-search" && productClickTrigger({
-                productId: id
-              }),
+              onClick: () => {
+                if (sourceApp === "instant-search") {
+                  productClickTrigger$1({
+                    productId: id
+                  });
+                } else if (productRecommendationSourceApps.includes(sourceApp)) {
+                  productClickTrigger({
+                    productId: id,
+                    sourceApp
+                  });
+                }
+              },
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sledge__product-grid-card-product-name", style: display_product_name_style, children: title })
             }
           ) : null,
@@ -2684,13 +2804,18 @@ const ProductGrid = (props) => {
     ]);
     if ((_a = resShopifyAddToCart == null ? void 0 : resShopifyAddToCart.items) == null ? void 0 : _a.length) {
       if (sourceApp === "wishlist") {
-        await addToCartTrigger$1({
+        await addToCartTrigger$2({
           productId: id
         });
       } else if (sourceApp === "instant-search") {
-        await addToCartTrigger({
+        await addToCartTrigger$1({
           productId: id
         });
+      } else if (productRecommendationSourceApps.includes(sourceApp)) {
+        await addToCartTrigger({
+          productId: id,
+          sourceApp
+        });
       }
       setClickedAddToCartId(null);
       onAfterAddToCart && onAfterAddToCart("success");
@@ -2720,10 +2845,13 @@ const ProductGrid = (props) => {
     }
   };
   const Container = useSlider ? Carousel : "div";
+  const carouselSourceProp = useSlider && {
+    carouselSourceWidget: "productGrid"
+  } || null;
   React__default.useEffect(() => {
     onAfterRenderProduct && onAfterRenderProduct("success");
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { className: `sledge__product-grid ${className}`, ...carouselSourceProp, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCard, { item, handleAddToCart, clickedAddToCartId, ...props }, `sledge-product-card_${index}`);
   }) });
 };
@@ -2827,7 +2955,7 @@ const ArticleGrid = ({ className = "", data, cards: CardsComponent, isComponentJ
   }) }) });
 };
 const Tooltip$1 = "";
-const Tooltip = ({ children, content, withArrow = true, customArrow = "", sideOffset = 5, alignOffset = 0, wrapTrigger = true }) => {
+const Tooltip = ({ children, content, withArrow = true, customArrow = "", sideOffset = 5, alignOffset = 0, wrapTrigger = true, forceOpen }) => {
   const [open, setOpen] = React__default.useState(false);
   React__default.useEffect(() => {
     var _a;
@@ -2837,13 +2965,22 @@ const Tooltip = ({ children, content, withArrow = true, customArrow = "", sideOf
       arrowElement.innerHTML = customArrow;
     }
   }, [open]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$2881499e37b75b9a, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($a093c7e1ec25a057$export$be92b6f5f03c0fe9, { onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$41fb9f06171c75f4, { asChild: true, children: wrapTrigger ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children }) : children }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs($a093c7e1ec25a057$export$7c6e2c02157bb7d2, { className: "sledge__tooltip-content", sideOffset, alignOffset, children: [
-      content,
-      withArrow ? /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$21b07c8f274aebd5, { className: "sledge__tooltip-arrow" }) : null
-    ] }) })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$2881499e37b75b9a, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    $a093c7e1ec25a057$export$be92b6f5f03c0fe9,
+    {
+      onOpenChange: setOpen,
+      ...forceOpen ? {
+        open: forceOpen
+      } : {},
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$41fb9f06171c75f4, { asChild: true, children: wrapTrigger ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children }) : children }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs($a093c7e1ec25a057$export$7c6e2c02157bb7d2, { className: "sledge__tooltip-content", sideOffset, alignOffset, children: [
+          content,
+          withArrow ? /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$21b07c8f274aebd5, { className: "sledge__tooltip-arrow" }) : null
+        ] }) })
+      ]
+    }
+  ) });
 };
 const ScrollArea$1 = "";
 const ScrollArea = ({ children, isLoading = false, className = "" }) => {
@@ -3090,11 +3227,10 @@ const LoadingDots = () => {
 };
 const Carousel$1 = "";
 const Carousel = (props) => {
-  const { children, className = "", "data-grid-type": dataGridType } = props;
+  const { children, className = "", "data-grid-type": dataGridType, carouselSourceWidget } = props;
   const [active, setActive] = React__default.useState(true);
   const {
     options = {
-      active,
       slidesToScroll: "auto",
       align: "start",
       dragFree: true,
@@ -3104,12 +3240,28 @@ const Carousel = (props) => {
   const [carouselRef, carouselApi] = useEmblaCarousel(options);
   const [prevBtnDisabled, setPrevBtnDisabled] = React__default.useState(true);
   const [nextBtnDisabled, setNextBtnDisabled] = React__default.useState(true);
+  const [selectedIndex, setSelectedIndex] = React__default.useState(0);
+  const [scrollSnaps, setScrollSnaps] = React__default.useState([]);
   const scrollPrev = React__default.useCallback(() => carouselApi && carouselApi.scrollPrev(), [carouselApi]);
   const scrollNext = React__default.useCallback(() => carouselApi && carouselApi.scrollNext(), [carouselApi]);
+  const scrollTo = React__default.useCallback((index) => carouselApi && carouselApi.scrollTo(index), [carouselApi]);
   const onSelect = React__default.useCallback((carouselApi2) => {
+    setSelectedIndex(carouselApi2.selectedScrollSnap());
     setPrevBtnDisabled(!carouselApi2.canScrollPrev());
     setNextBtnDisabled(!carouselApi2.canScrollNext());
   }, []);
+  const onInit = React__default.useCallback((carouselApi2) => {
+    setScrollSnaps(carouselApi2.scrollSnapList());
+  }, []);
+  React__default.useEffect(() => {
+    if (!carouselApi)
+      return;
+    onInit(carouselApi);
+    onSelect(carouselApi);
+    carouselApi.on("reInit", onInit);
+    carouselApi.on("reInit", onSelect);
+    carouselApi.on("select", onSelect);
+  }, [carouselApi, onSelect]);
   React__default.useEffect(() => {
     if (!carouselApi)
       return;
@@ -3121,10 +3273,30 @@ const Carousel = (props) => {
   React__default.useEffect(() => {
     if (!carouselApi)
       return;
-    onSelect(carouselApi);
-    carouselApi.on("reInit", onSelect);
-    carouselApi.on("select", onSelect);
-  }, [carouselApi, onSelect]);
+    carouselApi.reInit(options);
+  }, [carouselApi, React__default.Children.count(children)]);
+  React__default.useEffect(() => {
+    if (!carouselApi)
+      return;
+    if (!active)
+      carouselApi == null ? void 0 : carouselApi.internalEngine().dragHandler.destroy();
+    else
+      carouselApi == null ? void 0 : carouselApi.internalEngine().dragHandler.init(carouselApi);
+  }, [active]);
+  let carouselAttributes = {};
+  switch (carouselSourceWidget) {
+    case "productGrid":
+      carouselAttributes = {
+        className: "sledge__carousel-container sledge__product-grid",
+        "data-grid-type": dataGridType
+      };
+      break;
+    default:
+      carouselAttributes = {
+        className: "sledge__carousel-container"
+      };
+      break;
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__carousel ${className}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Navigation,
@@ -3139,7 +3311,7 @@ const Carousel = (props) => {
         className: "sledge__carousel-button-prev"
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__carousel-viewport", ref: carouselRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__carousel-container sledge__product-grid", "data-grid-type": dataGridType, children }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__carousel-viewport ${active && "is-active" || ""}`, ref: carouselRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...carouselAttributes, children }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Navigation,
       {
@@ -3152,7 +3324,8 @@ const Carousel = (props) => {
         onClick: scrollNext,
         className: "sledge__carousel-button-next"
       }
-    )
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__carousel-dots", children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(DotButton, { onClick: () => scrollTo(index), className: "sledge__carousel-dot".concat(index === selectedIndex ? " sledge__carousel-dot--selected" : "") }, index)) })
   ] });
 };
 const Navigation = (props) => {
@@ -3177,6 +3350,10 @@ const Navigation = (props) => {
   const Icon = () => position === "left" ? LeftIcon : RightIcon;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: `sledge__carousel-button ${className}`, type: "button", ...restProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, {}) });
 };
+const DotButton = (props) => {
+  const { children, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", ...restProps, children });
+};
 const SearchIconWidget = (props) => {
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
@@ -3736,9 +3913,9 @@ const SearchResultWidget = (props) => {
   const [languageSettings, setLanguageSettings] = React__default.useState(((_j = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _j.languages) || {});
   const [initStatesFirstTime, setInitStatesFirstTime] = React__default.useState(true);
   const [defaultFacetStats, setDefaultFacetStats] = React__default.useState({});
-  const [defaultFacetDistribution, setDefaultFacetDistribution] = React__default.useState({});
   const [hideFilterWhenOneValue, setHideFilterWhenOneValue] = React__default.useState(false);
   const [isReplaceWidgetList, setIsReplaceWidgetList] = React__default.useState(false);
+  const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
   let productCardsComponent = null;
   let collectionCardsComponent = null;
   let pageCardsComponent = null;
@@ -3839,8 +4016,32 @@ const SearchResultWidget = (props) => {
     } else {
       const { facetStats, totalHits, facetDistribution } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(index_product))) || {};
       setDefaultFacetStats(facetStats);
-      setDefaultFacetDistribution(facetDistribution);
       setHideFilterWhenOneValue(((_a2 = display == null ? void 0 : display.filter) == null ? void 0 : _a2.hide_when_one_value) && totalHits <= 1);
+      setSearchResultFacets(
+        facetDistribution ? Object.fromEntries(
+          Object.entries(facetDistribution).map((facet) => {
+            let value = facet[0];
+            let items = [];
+            if (value === "variants.inventory_quantity") {
+              items = [
+                {
+                  name: "In Stock",
+                  value: "> 0"
+                }
+              ];
+            } else {
+              items = Object.keys(facetDistribution[value]).map((item) => {
+                return {
+                  name: item,
+                  value: item,
+                  total: facetDistribution[value][item] || 0
+                };
+              });
+            }
+            return [value, items];
+          })
+        ) : {}
+      );
     }
   };
   const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
@@ -4190,7 +4391,6 @@ const SearchResultWidget = (props) => {
       allowedFilters,
       facets,
       defaultFacetStats,
-      defaultFacetDistribution,
       hideFilterWhenOneValue,
       hiddenTags,
       displaySettings,
@@ -4228,12 +4428,13 @@ const SearchResultWidget = (props) => {
       data: propsData,
       settings,
       isReplaceWidgetList,
-      setIsReplaceWidgetList
+      setIsReplaceWidgetList,
+      searchResultFacets
     })
   ] });
 };
 const ResultProduct = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
   const {
     layoutType,
     keyword,
@@ -4243,7 +4444,6 @@ const ResultProduct = (props) => {
     allowedFilters,
     facets,
     defaultFacetStats,
-    defaultFacetDistribution,
     hideFilterWhenOneValue,
     hiddenTags,
     displaySettings,
@@ -4272,17 +4472,15 @@ const ResultProduct = (props) => {
     data: propsData,
     settings,
     isReplaceWidgetList,
-    setIsReplaceWidgetList
+    setIsReplaceWidgetList,
+    searchResultFacets
   } = props || {};
   const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : DEFAULT_QUERY_PARAM.KEYWORD;
   const { collectionId, collectionName } = params || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
   const [isLoading, setIsLoading] = React__default.useState(!propsData);
-  const [isOpenSort, setIsOpenSort] = React__default.useState(false);
-  const [isOpenLimit, setIsOpenLimit] = React__default.useState(false);
   const [clickedSortId, setClickedSortId] = React__default.useState(defaultSort || "");
-  const [clickedSortName, setClickedSortName] = React__default.useState(allowedSorts && Boolean(allowedSorts == null ? void 0 : allowedSorts.length) ? (_a = allowedSorts.find(({ value }) => value === defaultSort)) == null ? void 0 : _a.label : "");
-  const [clickedLimitId, setClickedLimitId] = React__default.useState(((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.limit) || 10);
+  const [clickedLimitId, setClickedLimitId] = React__default.useState(((_a = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _a.limit) || 10);
   const [clickedOpenFilterId, setClickedOpenFilterId] = React__default.useState(null);
   const [clickedOpenFilters, setClickedOpenFilters] = React__default.useState([]);
   const [clickedFacets, setClickedFacets] = React__default.useState({
@@ -4291,16 +4489,15 @@ const ResultProduct = (props) => {
     } : {}
   });
   const [triggerClickedFacets, setTriggerClickedFacets] = React__default.useState(false);
-  const [searchResult, setSearchResult] = React__default.useState(((_e = (_d = (_c = propsData == null ? void 0 : propsData.result) == null ? void 0 : _c.results) == null ? void 0 : _d[0]) == null ? void 0 : _e.hits) || []);
+  const [searchResult, setSearchResult] = React__default.useState(((_d = (_c = (_b = propsData == null ? void 0 : propsData.result) == null ? void 0 : _b.results) == null ? void 0 : _c[0]) == null ? void 0 : _d.hits) || []);
   const [searchProcessingTimeMs, setSearchProcessingTimeMs] = React__default.useState(0);
   const [currentPage, setCurrentPage] = React__default.useState(1);
   const [totalPage, setTotalPage] = React__default.useState(0);
-  const [totalSearchResult, setTotalSearchResult] = React__default.useState(((_h = (_g = (_f = propsData == null ? void 0 : propsData.result) == null ? void 0 : _f.results) == null ? void 0 : _g[0]) == null ? void 0 : _h.totalHits) || 0);
+  const [totalSearchResult, setTotalSearchResult] = React__default.useState(((_g = (_f = (_e = propsData == null ? void 0 : propsData.result) == null ? void 0 : _e.results) == null ? void 0 : _f[0]) == null ? void 0 : _g.totalHits) || 0);
   const [valueFilterPriceChange, setValueFilterPriceChange] = React__default.useState([]);
   const [allowedFilter, setAllowedFilter] = React__default.useState([]);
-  const [isFilterChanged, setIsFilterChanged] = React__default.useState(false);
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
-  const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
+  const [searchFacetDistribution, setSearchFacetDistribution] = React__default.useState({});
   const {
     sort_by: language_sort_by,
     result: language_result,
@@ -4333,19 +4530,19 @@ const ResultProduct = (props) => {
     if (isSummaryTextFromLanguage) {
       getSummaryText = getSummaryText.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_RESULT, totalResult);
       if (layoutType === "product-filter")
-        getSummaryText = getSummaryText.replaceAll(OBJECT_DATA_STRING_KEY.COLLECTION_NAME, collectionName || "");
+        getSummaryText = getSummaryText.replaceAll(OBJECT_DATA_STRING_KEY.COLLECTION_NAME, collectionName || "Products");
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_total_products) ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-data-summary-text", children: isSummaryTextFromLanguage ? getSummaryText : defaultSummaryText }) : null });
   };
   const [summaryText, setSummaryText] = React__default.useState(propsData ? summaryTextGenerator(totalSearchResult) : null);
   const previousState = usePrevious({ keyword, clickedLimitId, clickedFacets, clickedTabIndexId });
-  const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.title) || {};
+  const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.title) || {};
   const {
     color: filter_option_color,
     font_size: filter_option_font_size,
     font_weight: filter_option_font_weight,
     text_transform: filter_option_text_transform
-  } = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.option) || {};
+  } = ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.option) || {};
   const {
     text_color: filter_button_text_color,
     border_color: filter_button_border_color,
@@ -4358,7 +4555,7 @@ const ResultProduct = (props) => {
     font_size: filter_button_font_size,
     font_weight: filter_button_font_weight,
     text_transform: filter_button_text_transform
-  } = ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.button) || {};
+  } = ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.button) || {};
   const filter_title_style = {
     ...filter_title_color && { color: filter_title_color },
     ...filter_title_font_size && { fontSize: filter_title_font_size },
@@ -4421,12 +4618,9 @@ const ResultProduct = (props) => {
     window.history.pushState(null, "", `${document.location.pathname}${(newQueryString == null ? void 0 : newQueryString.length) ? `?${newQueryString}` : ""}`);
   };
   const handleChangeSort = (label, value) => {
-    setIsOpenSort(false);
-    setClickedSortName(label);
     setClickedSortId(value);
   };
   const handleChangeLimit = (value) => {
-    setIsOpenLimit(false);
     setClickedLimitId(value);
   };
   const handleOpenFilterVertical = (id) => {
@@ -4442,18 +4636,13 @@ const ResultProduct = (props) => {
     setClickedOpenFilters(valueClickedOpenFilters);
   };
   const handleFilterReset = () => {
-    setIsFilterChanged(true);
     setClickedFacets({});
     setTriggerClickedFacets(!triggerClickedFacets);
     handleQueryStringFilter({});
     setValueFilterPriceChange([]);
-    setTimeout(() => {
-      setIsFilterChanged(false);
-    }, 10);
   };
   const handleFilterChange = (parentId, value, force = false) => {
     var _a2;
-    setIsFilterChanged(true);
     let facets2 = [value];
     let isRange = ["variants.price"].includes(parentId);
     if (clickedFacets) {
@@ -4485,9 +4674,6 @@ const ResultProduct = (props) => {
     handleQueryStringFilter(valueClickedFacets);
     setClickedFacets(valueClickedFacets);
     setTriggerClickedFacets(!triggerClickedFacets);
-    setTimeout(() => {
-      setIsFilterChanged(false);
-    }, 10);
   };
   const handleSearchResultData = (result, onSearch) => {
     if (!result)
@@ -4507,34 +4693,7 @@ const ResultProduct = (props) => {
     setTotalPage(totalPages);
     setTotalSearchResult(totalHits || 0);
     setSummaryText(summaryTextGenerator(totalHits));
-    setSearchResultFacets(
-      defaultFacetDistribution ? Object.fromEntries(
-        Object.entries(defaultFacetDistribution).map((facet) => {
-          let value = facet[0];
-          let items = [];
-          if (value === "variants.inventory_quantity") {
-            Object.keys(defaultFacetDistribution[value]).map((item) => {
-              return Boolean(Number(item)) ? defaultFacetDistribution[value][item] : 0;
-            });
-            items = [
-              {
-                name: "In Stock",
-                value: "> 0"
-              }
-            ];
-          } else {
-            items = Object.keys(defaultFacetDistribution[value]).map((item) => {
-              return {
-                name: item,
-                value: item,
-                total: facetDistribution[value][item] || 0
-              };
-            });
-          }
-          return [value, items];
-        })
-      ) : {}
-    );
+    setSearchFacetDistribution(facetDistribution);
   };
   const handleSearchResult = async (isRefreshPage = false, onSearch = false) => {
     var _a2, _b2;
@@ -4640,6 +4799,37 @@ const ResultProduct = (props) => {
   React__default.useEffect(() => {
     handleAllowedFilter();
   }, [allowedFilters, searchResultFacets, totalSearchResult]);
+  let dataClickedFacets = [];
+  let arrFacetSelected = [];
+  Object.entries(clickedFacets).map((facet) => {
+    var _a2, _b2;
+    if ((facet == null ? void 0 : facet.length) && facet[1].length) {
+      arrFacetSelected.push(facet[0]);
+      let getName = facet[0];
+      let isAdditionalFilter = ["variants.inventory_quantity"].includes(getName);
+      if (isAdditionalFilter)
+        return;
+      let isRange = ["variants.price"].includes(getName);
+      let getAllowedFilterOne = allowedFilter.filter(({ value }) => value == null ? void 0 : value.includes(getName));
+      let getLabel = (getAllowedFilterOne == null ? void 0 : getAllowedFilterOne.length) ? getAllowedFilterOne[0].label : getName;
+      let items = Array.isArray(facet[1]) && ((_a2 = facet[1]) == null ? void 0 : _a2.length) > 1 ? isRange ? dataClickedFacets.push({
+        label: getLabel,
+        name: getName,
+        value: facet[1]
+      }) : (_b2 = facet[1]) == null ? void 0 : _b2.map((item) => {
+        dataClickedFacets.push({
+          label: getLabel,
+          name: getName,
+          value: item
+        });
+      }) : dataClickedFacets.push({
+        label: getLabel,
+        name: getName,
+        value: facet[1][0]
+      });
+      return items;
+    }
+  });
   const facetBlockSelected = ({ label, name, value, index }) => {
     var _a2;
     let valueText = value;
@@ -4663,9 +4853,17 @@ const ResultProduct = (props) => {
       ) }) })
     ] }, index);
   };
+  const handleConditionUpdateFacetDistribution = (value) => {
+    let isHasFacetSelected = arrFacetSelected == null ? void 0 : arrFacetSelected.length;
+    let isOnFacetSelectedOne = arrFacetSelected.includes(value) && (arrFacetSelected == null ? void 0 : arrFacetSelected.length) === 1;
+    let isPriorityFacetClicked = ["vendor"].includes(value);
+    return !(arrFacetSelected == null ? void 0 : arrFacetSelected.length) || isHasFacetSelected && (isPriorityFacetClicked || isOnFacetSelectedOne);
+  };
   const facetComponent = (filter) => {
     var _a2, _b2;
     const { value, label, display } = filter;
+    if (isFirstLoading)
+      return null;
     let blockComponent = null;
     let items = searchResultFacets[value];
     let isShowNumberMatchingProduct = (_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_number_matching_product;
@@ -4683,19 +4881,22 @@ const ResultProduct = (props) => {
             },
             max: items == null ? void 0 : items.max,
             step: 1,
-            setValueCommit: (valueCommit) => handleFilterChange(value, valueCommit),
-            setValueChange: (valueChange) => setValueFilterPriceChange(valueChange)
+            setValueCommit: (valueCommit) => {
+              setValueFilterPriceChange(valueCommit);
+              handleFilterChange(value, valueCommit);
+            }
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider-minmax", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: valueFilterPriceChange[0] || (items == null ? void 0 : items.min) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: valueFilterPriceChange[1] || (items == null ? void 0 : items.max) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: defaultValueMin }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: defaultValueMax })
         ] })
       ] });
     } else if (display.toLowerCase() === "checkbox" && (items == null ? void 0 : items.length)) {
       blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items == null ? void 0 : items.map((item, index) => {
         var _a3;
         let labelName = item.name;
+        let labelTotal = handleConditionUpdateFacetDistribution(value) ? (item == null ? void 0 : item.total) || 0 : searchFacetDistribution[value] && searchFacetDistribution[value][item.value] ? searchFacetDistribution[value][item.value] : 0;
         if (languageSettings && (languageSettings[item.value] || languageSettings[item.name]))
           labelName = languageSettings[item.value] || languageSettings[item.name];
         return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4704,9 +4905,9 @@ const ResultProduct = (props) => {
             id: `${value}_${index}`,
             name: value,
             value: item.value,
-            label: `${labelName}${item.total !== void 0 && isShowNumberMatchingProduct ? ` (${item.total})` : ""}`,
+            label: `${labelName}${labelTotal !== void 0 && isShowNumberMatchingProduct ? ` (${labelTotal})` : ""}`,
             onClick: (e) => handleFilterChange(value, e.currentTarget.value),
-            checked: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value)),
+            checked: Boolean(clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value))),
             labelStyle: filter_option_style
           }
         ) }, index);
@@ -4719,13 +4920,14 @@ const ResultProduct = (props) => {
           name: value,
           onValueChange: (getValue) => handleFilterChange(value, getValue, true),
           items: items == null ? void 0 : items.map((item) => {
-            const { name, value: value2, total } = item;
+            const { name, value: itemValue, total } = item;
+            let labelTotal = handleConditionUpdateFacetDistribution(value) ? total || 0 : searchFacetDistribution[value] && searchFacetDistribution[value][itemValue] ? searchFacetDistribution[value][itemValue] : 0;
             let labelName = name;
-            if (languageSettings && (languageSettings[value2] || languageSettings[name]))
-              labelName = languageSettings[value2] || languageSettings[name];
+            if (languageSettings && (languageSettings[itemValue] || languageSettings[name]))
+              labelName = languageSettings[itemValue] || languageSettings[name];
             return {
-              label: `${labelName} ${total !== void 0 && isShowNumberMatchingProduct ? ` (${total})` : ""}`,
-              value: value2
+              label: `${labelName} ${labelTotal !== void 0 && isShowNumberMatchingProduct ? ` (${labelTotal})` : ""}`,
+              value: itemValue
             };
           }),
           defaultValue: clickedFacets && ((_b2 = clickedFacets[value]) == null ? void 0 : _b2.length) ? clickedFacets[value][0] : "",
@@ -4740,13 +4942,14 @@ const ResultProduct = (props) => {
           name: value,
           onValueChange: (getValue) => handleFilterChange(value, getValue, true),
           items: items == null ? void 0 : items.map((item) => {
-            const { name, value: value2, total } = item;
+            const { name, value: itemValue, total } = item;
+            let labelTotal = handleConditionUpdateFacetDistribution(value) ? total || 0 : searchFacetDistribution[value] && searchFacetDistribution[value][itemValue] ? searchFacetDistribution[value][itemValue] : 0;
             let labelName = name;
-            if (languageSettings && (languageSettings[value2] || languageSettings[name]))
-              labelName = languageSettings[value2] || languageSettings[name];
+            if (languageSettings && (languageSettings[itemValue] || languageSettings[name]))
+              labelName = languageSettings[itemValue] || languageSettings[name];
             return {
-              label: `${labelName} ${total !== void 0 && isShowNumberMatchingProduct ? ` (${total})` : ""}`,
-              value: value2
+              label: `${labelName} ${labelTotal !== void 0 && isShowNumberMatchingProduct ? ` (${labelTotal})` : ""}`,
+              value: itemValue
             };
           }),
           labelStyle: filter_option_style
@@ -4765,7 +4968,7 @@ const ResultProduct = (props) => {
             rgb: getColorSwatch == null ? void 0 : getColorSwatch.rgb,
             image: getColorSwatch == null ? void 0 : getColorSwatch.image,
             onClick: (e) => handleFilterChange(value, e.currentTarget.value),
-            defaultChecked: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value))
+            defaultChecked: Boolean(clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value)))
           }
         ) }, index);
       }) });
@@ -4776,7 +4979,6 @@ const ResultProduct = (props) => {
     const { value, label, display } = filter;
     let items = searchResultFacets[value];
     let isRender = Boolean(display.toLowerCase() === "slider" ? items : items == null ? void 0 : items.length);
-    let isNotRerender = ["select"].includes(display.toLowerCase()) && (items == null ? void 0 : items.length);
     let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
     let getFacetComponent = facetComponent(filter);
     if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
@@ -4787,7 +4989,7 @@ const ResultProduct = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filter_title_style, children: label }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: false, animate: clickedOpenFilters.includes(value) ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" }) })
       ] }),
-      clickedOpenFilters.includes(value) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: isNotRerender ? getFacetComponent : !isFilterChanged ? getFacetComponent : null })
+      clickedOpenFilters.includes(value) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent })
     ] }, indexFilter) : null;
   });
   const filterHorizontalComponents = allowedFilter.map((filter, indexFilter) => {
@@ -4795,7 +4997,6 @@ const ResultProduct = (props) => {
     let isActive = clickedOpenFilterId === value;
     let items = searchResultFacets[value];
     let isRender = Boolean(display.toLowerCase() === "slider" ? items : items == null ? void 0 : items.length);
-    let isNotRerender = ["radio", "select"].includes(display.toLowerCase()) && (items == null ? void 0 : items.length);
     let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
     let getFacetComponent = facetComponent(filter);
     if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
@@ -4817,7 +5018,7 @@ const ResultProduct = (props) => {
             ]
           }
         ),
-        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-facet", children: isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: isNotRerender ? getFacetComponent : !isFilterChanged ? getFacetComponent : null }) }),
+        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-facet", children: isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: getFacetComponent }) }),
         withOpenState: false,
         setIsOpen: (open) => setClickedOpenFilterId(!open ? "" : value),
         hideCloseIcon: true,
@@ -4827,39 +5028,10 @@ const ResultProduct = (props) => {
       }
     ) }, indexFilter) : null;
   });
-  let dataClickedFacets = [];
-  Object.entries(clickedFacets).map((facet) => {
-    var _a2, _b2;
-    if ((facet == null ? void 0 : facet.length) && facet[1].length) {
-      let getName = facet[0];
-      let isAdditionalFilter = ["variants.inventory_quantity"].includes(getName);
-      if (isAdditionalFilter)
-        return;
-      let isRange = ["variants.price"].includes(getName);
-      let getAllowedFilterOne = allowedFilter.filter(({ value }) => value == null ? void 0 : value.includes(getName));
-      let getLabel = (getAllowedFilterOne == null ? void 0 : getAllowedFilterOne.length) ? getAllowedFilterOne[0].label : getName;
-      let items = Array.isArray(facet[1]) && ((_a2 = facet[1]) == null ? void 0 : _a2.length) > 1 ? isRange ? dataClickedFacets.push({
-        label: getLabel,
-        name: getName,
-        value: facet[1]
-      }) : (_b2 = facet[1]) == null ? void 0 : _b2.map((item) => {
-        dataClickedFacets.push({
-          label: getLabel,
-          name: getName,
-          value: item
-        });
-      }) : dataClickedFacets.push({
-        label: getLabel,
-        name: getName,
-        value: facet[1][0]
-      });
-      return items;
-    }
-  });
   const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page), pageInfo: language_pagination_info });
-  const filterHorizontalBlockComponent = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading && !propsData ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
+  const filterHorizontalBlockComponent = ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.enable_on_search) && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading && !propsData ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting && !propsData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal sledge-instant-search__result-filter-horizontal-component", children: filterHorizontalComponents }),
-    Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
+    Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
@@ -4880,10 +5052,10 @@ const ResultProduct = (props) => {
     ] }) : null
   ] }) }) }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.enable_on_search) && ((_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.layout) === "horizontal" && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalBlockComponent }) : null,
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.enable_on_search) && ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.layout) === "vertical" && allowedFilter.length ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: filterVerticalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
+    ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.enable_on_search) && ((_n = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _n.layout) === "horizontal" && allowedFilter.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalBlockComponent }) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_o = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _o.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.enable_on_search) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "vertical" && allowedFilter.length ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: filterVerticalSkeleton }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter sledge__hide-element-lg-on-mobile", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_r = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _r.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title-refine", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "sledge-instant-search__result-filter-item-title-refine-heading", children: language_filter || "Filter" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-clear", onClick: handleFilterReset, children: language_clear_filter || "Clear All" })
@@ -4903,7 +5075,7 @@ const ResultProduct = (props) => {
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
         isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-mobile-on-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
-            ((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.show_total_products) ? summaryTextSkeleton : null,
+            ((_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.show_total_products) ? summaryTextSkeleton : null,
             searchFieldSkeletonComponent,
             filterHorizontalSkeletonComponent,
             selectOptionSkeletonComponent
@@ -4913,7 +5085,7 @@ const ResultProduct = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal ${((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.layout) === "horizontal" ? "" : "sledge__hide-element-mobile-on-lg"}`,
+              className: `sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal ${((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.layout) === "horizontal" ? "" : "sledge__hide-element-mobile-on-lg"}`,
               children: summaryText
             }
           ),
@@ -4965,7 +5137,7 @@ const ResultProduct = (props) => {
                 language_limit || "Limit",
                 ":"
               ] }),
-              ((_v = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _v.allowed_limit) && Boolean((_x = (_w = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _w.allowed_limit) == null ? void 0 : _x.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ((_u = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _u.allowed_limit) && Boolean((_w = (_v = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _v.allowed_limit) == null ? void 0 : _w.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 SelectField,
                 {
                   align: "end",
@@ -4986,7 +5158,7 @@ const ResultProduct = (props) => {
           productGridSkeleton,
           (searchResult == null ? void 0 : searchResult.length) ? paginationComponent : null
         ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          ((_y = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _y.layout) === "vertical" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-vertical", children: summaryText }) }),
+          ((_x = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _x.layout) === "vertical" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-vertical", children: summaryText }) }),
           (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               ProductGrid,
@@ -5001,9 +5173,9 @@ const ResultProduct = (props) => {
                   };
                 }),
                 setting: {
-                  show_vendor: (_z = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _z.show_vendor,
-                  show_sku: (_A = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _A.show_sku,
-                  show_price: (_B = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _B.show_price,
+                  show_vendor: (_y = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _y.show_vendor,
+                  show_sku: (_z = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _z.show_sku,
+                  show_price: (_A = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _A.show_price,
                   language_button_add_to_cart: language_add_to_cart,
                   language_button_out_of_stock: languageSettings && languageSettings["out of stock"] ? languageSettings["out of stock"] : ""
                 },