@sledge-app/react-instant-search 0.0.111 → 0.0.112

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

@@ -1,6 +1,6 @@
 import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, a as $cb5cc270b50c6fcd$export$41fb9f06171c75f4, b as $cb5cc270b50c6fcd$export$602eac185826482c, c as $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, d as $cb5cc270b50c6fcd$export$f39c2d165cd861fe, e as $cb5cc270b50c6fcd$export$21b07c8f274aebd5, f as $67824d98245208a0$export$be92b6f5f03c0fe9, g as $67824d98245208a0$export$adb584737d712b70, h as $e698a72e93240346$export$be92b6f5f03c0fe9, i as $e698a72e93240346$export$adb584737d712b70, k as $faa2e61a3361514f$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$13921ac0cc260818, m as $faa2e61a3361514f$export$9a58ef0d7ad3278c, n as $faa2e61a3361514f$export$6521433ed15a34db, o as $f99a8c78507165f7$export$be92b6f5f03c0fe9, p as $f99a8c78507165f7$export$6d08773d2e66f8f2, q as $f99a8c78507165f7$export$adb584737d712b70, r as $cc7e05a45900e73f$export$6d08773d2e66f8f2, s as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, t as $cc7e05a45900e73f$export$c3468e2714d175fa, u as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, v as $cc7e05a45900e73f$export$41fb9f06171c75f4, w as $cc7e05a45900e73f$export$4c8d1a57a761ef94, x as $cc7e05a45900e73f$export$f04a61298a47a40f, y as $cc7e05a45900e73f$export$602eac185826482c, z as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, A as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, B as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, C as $cc7e05a45900e73f$export$bf1aedc3039c8d63, D as motion, E as client, F as $a093c7e1ec25a057$export$2881499e37b75b9a, G as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, H as $a093c7e1ec25a057$export$41fb9f06171c75f4, I as $a093c7e1ec25a057$export$602eac185826482c, J as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, K as $a093c7e1ec25a057$export$21b07c8f274aebd5, L as $57acba87d6e25586$export$be92b6f5f03c0fe9, M as $57acba87d6e25586$export$d5c6c08dc2d3ca7, N as $57acba87d6e25586$export$9a4e88b92edfce6b, O as $57acba87d6e25586$export$6521433ed15a34db, P as MasonryResponsive, Q as Masonry, R as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, S as $5d3850c4d0b4e6c7$export$602eac185826482c, T as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, U as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-efe38901.js";
 import React__default, { createElement } from "react";
-import { SledgeContext } from "@sledge-app/core";
+import { SledgeContext, CustomComponents } from "@sledge-app/core";
 import "react-dom";
 const ProductFilterWidget = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(SearchResultWidget, { layoutType: "product-filter", ...props });
@@ -166,32 +166,35 @@ const sanitizeDataId = (id) => {
     return getId;
   }
 };
-const detectInitSelector = (element, init, reRender) => {
+const detectInitSelector = (params) => {
+  const { element: element2, init, reRender = false } = params;
   let hasRunning = false;
   if (!reRender) {
     document.body.addEventListener("DOMNodeInserted", () => {
-      if (!hasRunning && element) {
+      if (!hasRunning && element2) {
         hasRunning = true;
         init();
       }
     });
   } else {
-    if (element)
+    if (element2)
       init();
   }
 };
 const isFunction = (data) => typeof data === "function";
-const scrollToElement = (element, headerOffset) => {
-  if (!element)
+const scrollToElement = (params) => {
+  const { element: element2, headerOffset } = params;
+  if (!element2)
     return;
-  var elementPosition = element == null ? void 0 : element.getBoundingClientRect().top;
+  var elementPosition = element2 == null ? void 0 : element2.getBoundingClientRect().top;
   var offsetPosition = elementPosition + window.scrollY - headerOffset;
   window.scrollTo({
     top: offsetPosition,
     behavior: "smooth"
   });
 };
-const fetchApi = async (url, method, authorization, payload = {}, headers = {}, isSimpleRequest = true, isUploadFile = false) => {
+const fetchApi = async (params) => {
+  const { url, method, authorization = "", payload = {}, headers = {}, isSimpleRequest = true, isUploadFile = false } = params;
   var myHeaders = new Headers();
   if (!isSimpleRequest) {
     if (authorization)
@@ -209,8 +212,8 @@ const fetchApi = async (url, method, authorization, payload = {}, headers = {},
     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);
+          [...payload.files].map((item2) => {
+            formdata.append("files", item2, item2.name);
           });
         formdata.append(key, payload[key]);
       });
@@ -449,8 +452,8 @@ const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {},
       name,
       required,
       onValueChange,
-      children: items.map((item, index) => {
-        const { label, value } = item;
+      children: items.map((item2, index) => {
+        const { label, value } = item2;
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__radio-group-item-flex", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx($f99a8c78507165f7$export$6d08773d2e66f8f2, { className: "sledge__radio-group-item", value, id: `${id}${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx($f99a8c78507165f7$export$adb584737d712b70, { className: "sledge__radio-group-indicator" }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "sledge__radio-group-label", htmlFor: `${id}${index}`, style: labelStyle, children: label })
@@ -508,8 +511,8 @@ const Select = ({ name, placeholder, required, defaultValue, items, labelStyle =
         }
       ) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, { className: "sledge__select-viewport", children: items.map(
-        (item, index) => {
-          const { label, value } = item;
+        (item2, index) => {
+          const { label, value } = item2;
           return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
         }
       ) }),
@@ -741,8 +744,8 @@ const ProductGrid$1 = "";
 const addToCart = async (data) => {
   var _a, _b;
   let items = [];
-  data.map((item) => {
-    const { id, quantity } = item;
+  data.map((item2) => {
+    const { id, quantity } = item2;
     items.push({
       id,
       quantity
@@ -757,7 +760,13 @@ const addToCart = async (data) => {
   let payload = {
     items
   };
-  return await fetchApi(url, "POST", null, payload, headers, false).then((result) => {
+  return await fetchApi({
+    url,
+    method: "POST",
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => {
     return result;
   }).catch(() => {
     return;
@@ -888,7 +897,12 @@ const addWishlist = async (data) => {
       price: productPrice
     })
   };
-  return await fetchApi(url, "POST", sledgeAuthApp, payload).then((result) => {
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeAuthApp,
+    payload
+  }).then((result) => {
     return result;
   }).catch(() => {
     return;
@@ -896,8 +910,8 @@ const addWishlist = async (data) => {
 };
 const bulkAddWishlist = async (data) => {
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
-  let products = data.map((item) => {
-    const { productId, productVariantId, productName, productVariantName, productLink, productImage, productCurrency, productPrice } = item;
+  let products = data.map((item2) => {
+    const { productId, productVariantId, productName, productVariantName, productLink, productImage, productCurrency, productPrice } = item2;
     return {
       id: sanitizeDataId(productId),
       variant_id: sanitizeDataId(productVariantId),
@@ -916,7 +930,14 @@ const bulkAddWishlist = async (data) => {
   let payload = {
     products
   };
-  return await fetchApi(url, "POST", sledgeAuthApp, payload, headers, false).then((result) => {
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeAuthApp,
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => {
     return result;
   }).catch(() => {
     return;
@@ -925,7 +946,11 @@ const bulkAddWishlist = async (data) => {
 const getWishlistInfo = async (token) => {
   let sledgeAuthApp = token ? token : typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
   let url = `${API_URL}/wishlist/info`;
-  return await fetchApi(url, "GET", sledgeAuthApp).then((result) => {
+  return await fetchApi({
+    url,
+    method: "GET",
+    authorization: sledgeAuthApp
+  }).then((result) => {
     return result;
   }).catch(() => {
     return;
@@ -939,7 +964,11 @@ const checkWishlist = async (id, variantId) => {
     variant_id: convertVariantId
   }).toString();
   let url = `${API_URL}/wishlist/check/${convertId}${queryParams}`;
-  return await fetchApi(url, "GET", sledgeAuthApp).then((result) => {
+  return await fetchApi({
+    url,
+    method: "GET",
+    authorization: sledgeAuthApp
+  }).then((result) => {
     return Boolean(result.data);
   }).catch(() => {
     return;
@@ -949,10 +978,16 @@ const addToCartTrigger$1 = async (data) => {
   const { productId } = data;
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
   let url = `${API_URL}/wishlist/cart`;
-  return await fetchApi(url, "POST", sledgeAuthApp, {
+  let payload = {
     product: JSON.stringify({
       id: sanitizeDataId(productId)
     })
+  };
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeAuthApp,
+    payload
   }).then((result) => {
     return result;
   }).catch(() => {
@@ -1077,19 +1112,19 @@ const BadgeInitSelector = (reRender = false) => {
       }
     }
   } else {
-    let element = Array.from(document.querySelectorAll(SELECTOR.WISHLIST.ELEMENT_BADGE));
-    detectInitSelector(
-      element,
-      () => {
-        if (element.length) {
-          element.map((item) => {
-            if (item) {
-              const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
-              if (item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`))
-                item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`).remove();
+    let element2 = Array.from(document.querySelectorAll(SELECTOR.WISHLIST.ELEMENT_BADGE));
+    detectInitSelector({
+      element: element2,
+      init: () => {
+        if (element2.length) {
+          element2.map((item2) => {
+            if (item2) {
+              const USE_PROXY_URL = item2.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
+              if (item2.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`))
+                item2.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`).remove();
               let elementContainerWidget = document.createElement("div");
               elementContainerWidget.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET);
-              item.appendChild(elementContainerWidget);
+              item2.appendChild(elementContainerWidget);
               client.createRoot(elementContainerWidget).render(
                 /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   SledgeContext.Provider,
@@ -1112,7 +1147,7 @@ const BadgeInitSelector = (reRender = false) => {
         }
       },
       reRender
-    );
+    });
   }
 };
 const Trigger = (props) => {
@@ -1366,8 +1401,8 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
   const handleBulkAddWishlist = async () => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g;
     setIsLoadingBulkAdd(true);
-    let data = wishlistData.map((item) => {
-      const { id, variant_id, name, variant_name, url, image_url, currency, price } = item.product;
+    let data = wishlistData.map((item2) => {
+      const { id, variant_id, name, variant_name, url, image_url, currency, price } = item2.product;
       return {
         productId: id,
         productVariantId: variant_id,
@@ -1543,10 +1578,10 @@ const WidgetHeaderLimit = ({ options, defaultLimitOptions, selectedLimit, setSel
     SelectField,
     {
       align: "end",
-      options: getOptions.map((item) => {
+      options: getOptions.map((item2) => {
         return {
-          label: item,
-          value: item
+          label: item2,
+          value: item2
         };
       }),
       value: selectedLimit || getOptions[0],
@@ -1570,8 +1605,8 @@ const WidgetHeaderSort$1 = ({ wishlistSort, selectedSort, setSelectedSort, setIs
     SelectField,
     {
       align: "end",
-      options: wishlistSort.map((item) => {
-        const { name, value } = item;
+      options: wishlistSort.map((item2) => {
+        const { name, value } = item2;
         return {
           label: name,
           value
@@ -1647,7 +1682,12 @@ const getReviewInfo = async (id) => {
   let convertId = sanitizeDataId(id);
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
   let url = `${API_URL}/review/info/${convertId}?${PAYLOAD_API_ALIASES.Authorization}=${sledgeAuthApp}`;
-  return await fetchApi(url, "GET", sledgeAuthApp, void 0, void 0, false).then((result) => {
+  return await fetchApi({
+    url,
+    method: "GET",
+    authorization: sledgeAuthApp,
+    isSimpleRequest: false
+  }).then((result) => {
     return result;
   }).catch(() => {
     return;
@@ -1657,7 +1697,12 @@ const getProductsReviewInfo = async (ids, token) => {
   let convertIds = ids.map((v) => sanitizeDataId(v));
   let sledgeAuthApp = token ? token : typeof localStorage !== "undefined" ? (localStorage == null ? void 0 : localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP)) || "" : "";
   let url = `${API_URL}/review/info/ids/${convertIds.join(",")}?${PAYLOAD_API_ALIASES.Authorization}=${sledgeAuthApp}`;
-  return await fetchApi(url, "GET", sledgeAuthApp, void 0, void 0, false).then((result) => {
+  return await fetchApi({
+    url,
+    method: "GET",
+    authorization: sledgeAuthApp,
+    isSimpleRequest: false
+  }).then((result) => {
     return result;
   }).catch(() => {
     return;
@@ -1737,7 +1782,10 @@ const Rating = (props) => {
     if (!isScrollToElementWidget)
       return;
     setTimeout(() => {
-      scrollToElement(document.getElementById(ELEMENT_ID.PRODUCT_REVIEW.ELEMENT_WIDGET), 50);
+      scrollToElement({
+        element: document.getElementById(ELEMENT_ID.PRODUCT_REVIEW.ELEMENT_WIDGET),
+        headerOffset: 50
+      });
     }, 200);
   };
   React__default.useEffect(() => {
@@ -1796,17 +1844,17 @@ const Rating = (props) => {
       ] }) })
     ] }),
     !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      [1, 2, 3, 4, 5].map((item, index) => {
+      [1, 2, 3, 4, 5].map((item2, index) => {
         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) {
+        if (item2 > ratingValue && ratingValue + 1 === item2) {
           fillOther = `fill-${commaValue}`;
         }
-        return /* @__PURE__ */ createElement("svg", { ...sizing, viewBox: "0 0 30 29", "data-product-review-rating-fill": item <= ratingValue ? "full" : fillOther, key: index }, /* @__PURE__ */ jsxRuntimeExports.jsx("use", { href: "#sledge-product-review-icons-rating-icon" }));
+        return /* @__PURE__ */ createElement("svg", { ...sizing, viewBox: "0 0 30 29", "data-product-review-rating-fill": item2 <= ratingValue ? "full" : fillOther, key: index }, /* @__PURE__ */ jsxRuntimeExports.jsx("use", { href: "#sledge-product-review-icons-rating-icon" }));
       }),
       withTotal ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__rating-summary-total", children: [
         "(",
@@ -1894,8 +1942,8 @@ const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, set
       align: "end",
       prefixLabel: /* @__PURE__ */ jsxRuntimeExports.jsx(SwapIcon, { width: 16, height: 16, color: "currentColor" }),
       prefixSelectedLabel: "Sort by",
-      options: productReviewSort.map((item) => {
-        const { name, value } = item;
+      options: productReviewSort.map((item2) => {
+        const { name, value } = item2;
         return {
           label: name,
           value
@@ -2033,14 +2081,14 @@ const WidgetHeaderSummary = (props) => {
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "38px", height: "22px", color: "lighten", rounded: "md" })
         ] }, index);
-      }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist-progress", children: [5, 4, 3, 2, 1].map((item, index) => {
+      }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist-progress", children: [5, 4, 3, 2, 1].map((item2, index) => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-dist-progress-item", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Rating,
             {
               data: summaryData,
               sledgeSettings,
-              average: item,
+              average: item2,
               size: "sm",
               withSkeletonLoading: false,
               withTotal: false,
@@ -2050,7 +2098,7 @@ const WidgetHeaderSummary = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Progress,
             {
-              value: String(ratingList[item]),
+              value: String(ratingList[item2]),
               total: totalReview,
               fillColor: display_summary_bar_fill_color,
               outlineColor: display_summary_bar_outline_color
@@ -2058,7 +2106,7 @@ const WidgetHeaderSummary = (props) => {
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { children: [
             "(",
-            ratingList[item],
+            ratingList[item2],
             ")"
           ] })
         ] }, index);
@@ -2093,7 +2141,14 @@ const search = async (index, payload) => {
   let headers = {
     "Content-Type": "application/json"
   };
-  return await fetchApi(url, "POST", sledgeInstantSearchAuthApp, payload, headers, false).then((result) => result).catch(() => {
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeInstantSearchAuthApp,
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => result).catch(() => {
     return;
   });
 };
@@ -2103,7 +2158,14 @@ const multiSearch = async (payload, token) => {
   let headers = {
     "Content-Type": "application/json"
   };
-  return await fetchApi(url, "POST", sledgeInstantSearchAuthApp, payload, headers, false).then((result) => result).catch(() => {
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeInstantSearchAuthApp,
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => result).catch(() => {
     return;
   });
 };
@@ -2118,7 +2180,14 @@ const searchTrigger = async (data) => {
     keyword,
     result_count: resultCount
   };
-  return await fetchApi(url, "POST", sledgeAuthApp, payload, headers, false).then((result) => {
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeAuthApp,
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => {
     return result;
   }).catch(() => {
     return;
@@ -2136,7 +2205,14 @@ const productClickTrigger = async (data) => {
       id: sanitizeDataId(productId)
     }
   };
-  return await fetchApi(url, "POST", sledgeAuthApp, payload, headers, false).then((result) => {
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeAuthApp,
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => {
     return result;
   }).catch(() => {
     return;
@@ -2154,7 +2230,14 @@ const addToCartTrigger = async (data) => {
       id: sanitizeDataId(productId)
     }
   };
-  return await fetchApi(url, "POST", sledgeAuthApp, payload, headers, false).then((result) => {
+  return await fetchApi({
+    url,
+    method: "POST",
+    authorization: sledgeAuthApp,
+    payload,
+    headers,
+    isSimpleRequest: false
+  }).then((result) => {
     return result;
   }).catch(() => {
     return;
@@ -2241,9 +2324,9 @@ const ProductGrid = ({
   React__default.useEffect(() => {
     onAfterRenderProduct && onAfterRenderProduct("success");
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item2, index) => {
     var _a, _b, _c;
-    const { product, variants } = item || {};
+    const { product, variants } = item2 || {};
     const { id, title, image, url, vendor = "", currency } = product || {};
     const { id: variant_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
     let isLoadingAddToCart = clickedAddToCartId == variant_id;
@@ -2382,9 +2465,9 @@ const CollectionGrid = ({ className = "", data, cards, isComponentJsVersion, onA
   React__default.useEffect(() => {
     onAfterRenderCollection && onAfterRenderCollection("success");
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__collection-grid ${className}`, children: data.map((item, index) => {
-    const { id, title, body_html, url, image } = item;
-    const getCards = cards ? cards({ data: item }) : null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__collection-grid ${className}`, children: data.map((item2, index) => {
+    const { id, title, body_html, url, image } = item2;
+    const getCards = cards ? cards({ data: item2 }) : null;
     return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index) : /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-image-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-content", children: [
@@ -2399,9 +2482,9 @@ const PageGrid = ({ className = "", data, cards, isComponentJsVersion, onAfterRe
   React__default.useEffect(() => {
     onAfterRenderPage && onAfterRenderPage("success");
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__page-grid ${className}`, children: data.map((item, index) => {
-    const { id, title, body_html, url, image } = item;
-    const getCards = cards ? cards({ data: item }) : null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__page-grid ${className}`, children: data.map((item2, index) => {
+    const { id, title, body_html, url, image } = item2;
+    const getCards = cards ? cards({ data: item2 }) : null;
     return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index) : /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-image-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card-content", children: [
@@ -2416,9 +2499,9 @@ const BlogGrid = ({ className = "", data, cards, isComponentJsVersion, onAfterRe
   React__default.useEffect(() => {
     onAfterRenderBlog && onAfterRenderBlog("success");
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__blog-grid ${className}`, children: data == null ? void 0 : data.map((item, index) => {
-    const { id, title, created_at, url, image } = item;
-    const getCards = cards ? cards({ data: item }) : null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__blog-grid ${className}`, children: data == null ? void 0 : data.map((item2, index) => {
+    const { id, title, created_at, url, image } = item2;
+    const getCards = cards ? cards({ data: item2 }) : null;
     return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-content", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
@@ -2439,9 +2522,9 @@ const ArticleGrid = ({ className = "", data, cards, isComponentJsVersion, onAfte
   React__default.useEffect(() => {
     onAfterRenderArticle && onAfterRenderArticle("success");
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__article-grid ${className}`, children: data == null ? void 0 : data.map((item, index) => {
-    const { id, title, created_at, summary_html, url, image } = item;
-    const getCards = cards ? cards({ data: item }) : null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__article-grid ${className}`, children: data == null ? void 0 : data.map((item2, index) => {
+    const { id, title, created_at, summary_html, url, image } = item2;
+    const getCards = cards ? cards({ data: item2 }) : null;
     return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-card", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-content", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
@@ -2832,6 +2915,7 @@ const SearchIconWidgetPopup = () => {
   const { isRenderApp } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
   const [isLoading, setIsLoading] = React__default.useState(true);
+  const [isHasData, setIsHasData] = React__default.useState(false);
   const [showInfo, setShowInfo] = React__default.useState(false);
   const [keyword, setKeyword] = React__default.useState("");
   const [searchResultProduct, setSearchResultProduct] = React__default.useState([]);
@@ -2841,13 +2925,13 @@ const SearchIconWidgetPopup = () => {
   const [suggestionSettings, setSuggestionSettings] = React__default.useState({});
   const [suggestionIndex, setSuggestionIndex] = React__default.useState("");
   const [handleFunctions, setHandleFunctions] = React__default.useState({
-    onAfterAddToCart: (state) => {
+    onAfterAddToCart: (state2) => {
     },
-    onAfterAddWishlist: (state) => {
+    onAfterAddWishlist: (state2) => {
     },
-    onAfterRemoveWishlist: (state) => {
+    onAfterRemoveWishlist: (state2) => {
     },
-    onAfterRenderProduct: (state) => {
+    onAfterRenderProduct: (state2) => {
     },
     isJsVersion: null,
     productCardsComponent: null,
@@ -2857,8 +2941,9 @@ const SearchIconWidgetPopup = () => {
   });
   const searchFieldRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
-  const handleMultiSearch = async (data, onSearch = false, withFetchReviewInfo = false) => {
+  const handleMultiSearch = async (params) => {
     var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
+    const { data, onSearch = false, withFetchReviewInfo = false } = params;
     setIsLoading(true);
     const { tabs, suffix_index_product, hidden_tags, display, show_out_of_stock } = data;
     const suggestion = ((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion) || {};
@@ -2919,6 +3004,7 @@ const SearchIconWidgetPopup = () => {
     setSearchResultOther(valueSearchResultOther);
     setSuggestionIndex(valueSuggestionIndex);
     setIsLoading(false);
+    setIsHasData(true);
   };
   const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
     var _a2;
@@ -2929,7 +3015,10 @@ const SearchIconWidgetPopup = () => {
     const { display } = response;
     setDisplaySettings(display);
     setSuggestionSettings((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion);
-    await handleMultiSearch(response, false, true);
+    await handleMultiSearch({
+      data: response,
+      withFetchReviewInfo: true
+    });
   };
   React__default.useEffect(() => {
     if (!isRenderAppInstantSearch)
@@ -2970,6 +3059,10 @@ const SearchIconWidgetPopup = () => {
     }
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
   }, [isRenderAppInstantSearch]);
+  React__default.useEffect(() => {
+    if (isHasData)
+      SearchIconWidgetInitSelector();
+  }, [isHasData]);
   React__default.useEffect(() => {
     showInfo ? document.body.classList.add("sledge__open-popup-state") : document.body.classList.remove("sledge__open-popup-state");
   }, [showInfo]);
@@ -2978,7 +3071,10 @@ const SearchIconWidgetPopup = () => {
       const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "");
       const delayDebounceFn = setTimeout(() => {
         if (INSTANT_SEARCH_SETTING)
-          handleMultiSearch(INSTANT_SEARCH_SETTING, true);
+          handleMultiSearch({
+            data: INSTANT_SEARCH_SETTING,
+            onSearch: true
+          });
       }, 500);
       return () => clearTimeout(delayDebounceFn);
     }
@@ -3053,8 +3149,8 @@ const SearchIconWidgetPopup = () => {
               setShowPopupComponent: setShowInfo
             }
           ) : null,
-          searchResultOther && searchResultOther.map((item, index) => {
-            const { hits, name } = item;
+          searchResultOther && searchResultOther.map((item2, index) => {
+            const { hits, name } = item2;
             return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               Global.OtherIndexLists,
               {
@@ -3074,8 +3170,8 @@ const SearchIconWidgetPopup = () => {
             {
               sourceApp: "instant-search",
               type: "medium",
-              data: searchResultProduct.map((item) => {
-                const { variants, ...product } = item || {};
+              data: searchResultProduct.map((item2) => {
+                const { variants, ...product } = item2 || {};
                 return {
                   product,
                   variants
@@ -3109,8 +3205,8 @@ const SearchIconWidgetPopup = () => {
               {
                 sourceApp: "instant-search",
                 type: "medium",
-                data: suggestionSettings[suggestionIndex].products.list.map((item) => {
-                  const { variants, ...product } = item || {};
+                data: suggestionSettings[suggestionIndex].products.list.map((item2) => {
+                  const { variants, ...product } = item2 || {};
                   return {
                     product,
                     variants
@@ -3151,6 +3247,73 @@ const SearchIconWidgetPopup = () => {
     ] })
   ] }) });
 };
+const SearchIconWidgetInitSelector = () => {
+  let element = Array.from(document.querySelectorAll(SELECTOR.INSTANT_SEARCH.ELEMENT_SEARCH_ICON_WIDGET));
+  detectInitSelector({
+    element,
+    init: () => {
+      if (element.length) {
+        element.map((item) => {
+          var _a, _b, _c, _d;
+          if (item) {
+            const ICON_SIZE = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.ICON_SIZE);
+            const ON_AFTER_ADD_WISHLIST = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.ON_AFTER_ADD_WISHLIST);
+            const ON_AFTER_REMOVE_WISHLIST = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.ON_AFTER_REMOVE_WISHLIST);
+            const ON_AFTER_RENDER_PRODUCT = item.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.ON_AFTER_RENDER_PRODUCT);
+            const PRODUCT_CARDS = (_a = item.querySelector(SELECTOR.GLOBAL.ELEMENT_CUSTOM_COMPONENTS)) == null ? void 0 : _a.getAttribute(DATASET_ATTRIBUTE_KEY.GLOBAL.RENDER_PRODUCT_CARD);
+            const SUGGESTION_KEYWORD_LISTS = (_b = item.querySelector(SELECTOR.GLOBAL.ELEMENT_CUSTOM_COMPONENTS)) == null ? void 0 : _b.getAttribute(DATASET_ATTRIBUTE_KEY.INSTANT_SEARCH.RENDER_SUGGESTION_KEYWORD_LIST);
+            const OTHER_INDEX_LISTS = (_c = item.querySelector(SELECTOR.GLOBAL.ELEMENT_CUSTOM_COMPONENTS)) == null ? void 0 : _c.getAttribute(DATASET_ATTRIBUTE_KEY.INSTANT_SEARCH.RENDER_OTHER_INDEX_LIST);
+            const SEARCH_VIEW_MORE_RESULT = (_d = item.querySelector(SELECTOR.GLOBAL.ELEMENT_CUSTOM_COMPONENTS)) == null ? void 0 : _d.getAttribute(DATASET_ATTRIBUTE_KEY.INSTANT_SEARCH.RENDER_SEARCH_VIEW_MORE_RESULT);
+            item.innerHTML = "";
+            client.createRoot(item).render(
+              /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                SledgeContext.Provider,
+                {
+                  value: {
+                    isRenderApp: {
+                      wishlist: true,
+                      productReview: true,
+                      instantSearch: true
+                    },
+                    sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
+                    isJsVersion: true
+                  },
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    SearchIconWidget,
+                    {
+                      size: ICON_SIZE || "sm",
+                      onAfterAddWishlist: (state) => {
+                        if (item)
+                          ON_AFTER_ADD_WISHLIST && eval(ON_AFTER_ADD_WISHLIST) && eval(ON_AFTER_ADD_WISHLIST)({ state });
+                      },
+                      onAfterRemoveWishlist: (state) => {
+                        if (item)
+                          ON_AFTER_REMOVE_WISHLIST && eval(ON_AFTER_REMOVE_WISHLIST) && eval(ON_AFTER_REMOVE_WISHLIST)({ state });
+                      },
+                      onAfterRenderProduct: (state) => {
+                        if (item)
+                          ON_AFTER_RENDER_PRODUCT && eval(ON_AFTER_RENDER_PRODUCT) && eval(ON_AFTER_RENDER_PRODUCT)({ state });
+                      },
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        CustomComponents,
+                        {
+                          suggestionKeywordList: SUGGESTION_KEYWORD_LISTS ? eval(SUGGESTION_KEYWORD_LISTS) : null,
+                          otherIndexList: OTHER_INDEX_LISTS ? eval(OTHER_INDEX_LISTS) : null,
+                          productCard: PRODUCT_CARDS ? eval(PRODUCT_CARDS) : null,
+                          searchViewMoreResult: SEARCH_VIEW_MORE_RESULT ? eval(SEARCH_VIEW_MORE_RESULT) : null
+                        }
+                      )
+                    }
+                  )
+                }
+              ) })
+            );
+          }
+        });
+      }
+    }
+  });
+};
 const SearchResultWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
@@ -3293,8 +3456,8 @@ const SearchResultWidget = (props) => {
             let value = facet[0];
             let items = [];
             if (value === "variants.inventory_quantity") {
-              Object.keys(facetDistribution[value]).map((item) => {
-                return Boolean(Number(item)) ? facetDistribution[value][item] : 0;
+              Object.keys(facetDistribution[value]).map((item2) => {
+                return Boolean(Number(item2)) ? facetDistribution[value][item2] : 0;
               });
               items = [
                 {
@@ -3305,11 +3468,11 @@ const SearchResultWidget = (props) => {
             } else if (value === "variants.price") {
               items = facetStats[value];
             } else {
-              items = Object.keys(facetDistribution[value]).map((item) => {
+              items = Object.keys(facetDistribution[value]).map((item2) => {
                 return {
-                  name: item,
-                  value: item,
-                  total: facetDistribution[value][item] || 0
+                  name: item2,
+                  value: item2,
+                  total: facetDistribution[value][item2] || 0
                 };
               });
             }
@@ -3613,8 +3776,8 @@ const SearchResultWidget = (props) => {
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-container", ref: searchResultContainerRef, children: [
-    isFirstLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? "sledge-instant-search__result-tab" : "sledge-instant-search__result-tab-no-index"}`, children: layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__result-tab-list", children: allowedTabs.map((item) => {
-      const { name, index, total } = item;
+    isFirstLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? "sledge-instant-search__result-tab" : "sledge-instant-search__result-tab-no-index"}`, children: layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__result-tab-list", children: allowedTabs.map((item2) => {
+      const { name, index, total } = item2;
       let isActive = clickedTabIndexId === index;
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { onClick: (e) => handleChangeTabIndex(index, name), className: `${isActive ? "sledge-instant-search__result-tab-list-item-active" : ""}`, children: [
         name,
@@ -3936,13 +4099,13 @@ const ResultProduct = (props) => {
         let isCustom = ["variants.inventory_quantity"].includes(value);
         let isRange = ["variants.price"].includes(value);
         let isArray = ["tags"].includes(value);
-        let items = Array.isArray(facet[1]) && ((_a3 = facet[1]) == null ? void 0 : _a3.length) > 1 ? isRange ? `${value} >= ${facet[1][0]} AND ${value} <= ${facet[1][1]}` : isArray ? `${value} IN [${facet[1]}]` : (_b3 = facet[1]) == null ? void 0 : _b3.map((item) => {
-          return isCustom ? `${value} ${item}` : `${value} = '${item}'`;
+        let items = Array.isArray(facet[1]) && ((_a3 = facet[1]) == null ? void 0 : _a3.length) > 1 ? isRange ? `${value} >= ${facet[1][0]} AND ${value} <= ${facet[1][1]}` : isArray ? `${value} IN [${facet[1]}]` : (_b3 = facet[1]) == null ? void 0 : _b3.map((item2) => {
+          return isCustom ? `${value} ${item2}` : `${value} = '${item2}'`;
         }).join(" OR ") : isCustom ? `${value} ${facet[1]}` : isArray ? `${value} IN [${facet[1]}]` : `${value} = '${facet[1]}'`;
         return items;
       } else
         return null;
-    }).filter((item) => item);
+    }).filter((item2) => item2);
     if (hiddenTags == null ? void 0 : hiddenTags.length)
       filters.push(`tags NOT IN [${hiddenTags}]`);
     if (collectionId)
@@ -3984,7 +4147,10 @@ const ResultProduct = (props) => {
   const handlePageChange = (page) => {
     setCurrentPage(page);
     setTimeout(() => {
-      scrollToElement(searchResultContainerRef.current, 50);
+      scrollToElement({
+        element: searchResultContainerRef.current,
+        headerOffset: 50
+      });
     }, 200);
   };
   const handleChangeKeyword = (value) => {
@@ -4057,17 +4223,17 @@ const ResultProduct = (props) => {
         ] })
       ] });
     } 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) => {
+      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items == null ? void 0 : items.map((item2, index) => {
         var _a3;
         return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Checkbox,
           {
             id: `${value}_${index}`,
             name: value,
-            value: item.value,
-            label: `${item.name}${item.total !== void 0 && isShowNumberMatchingProduct ? ` (${item.total})` : ""}`,
+            value: item2.value,
+            label: `${item2.name}${item2.total !== void 0 && isShowNumberMatchingProduct ? ` (${item2.total})` : ""}`,
             onClick: (e) => handleFilterChange(value, e.currentTarget.value),
-            defaultChecked: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value)),
+            defaultChecked: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item2.value)),
             labelStyle: filter_option_style
           }
         ) }, index);
@@ -4079,8 +4245,8 @@ const ResultProduct = (props) => {
           id: value,
           name: value,
           onValueChange: (getValue) => handleFilterChange(value, getValue, true),
-          items: items == null ? void 0 : items.map((item) => {
-            const { name, value: value2, total } = item;
+          items: items == null ? void 0 : items.map((item2) => {
+            const { name, value: value2, total } = item2;
             return {
               label: `${name} ${total !== void 0 && isShowNumberMatchingProduct ? ` (${total})` : ""}`,
               value: value2
@@ -4097,8 +4263,8 @@ const ResultProduct = (props) => {
           placeholder: `Select ${label}`,
           name: value,
           onValueChange: (getValue) => handleFilterChange(value, getValue, true),
-          items: items == null ? void 0 : items.map((item) => {
-            const { name, value: value2, total } = item;
+          items: items == null ? void 0 : items.map((item2) => {
+            const { name, value: value2, total } = item2;
             return {
               label: `${name} ${total !== void 0 && isShowNumberMatchingProduct ? ` (${total})` : ""}`,
               value: value2
@@ -4108,19 +4274,19 @@ const ResultProduct = (props) => {
         }
       ) });
     } else if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
-      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items == null ? void 0 : items.map((item, index) => {
+      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items == null ? void 0 : items.map((item2, index) => {
         var _a3;
-        let getColorSwatch = (colorSwatches == null ? void 0 : colorSwatches.filter(({ name }) => name == null ? void 0 : name.includes(item.value))[0]) || {};
+        let getColorSwatch = (colorSwatches == null ? void 0 : colorSwatches.filter(({ name }) => name == null ? void 0 : name.includes(item2.value))[0]) || {};
         return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           ColorSwatch,
           {
             id: `${value}_${index}`,
             name: value,
-            value: item.value,
+            value: item2.value,
             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: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item2.value))
           }
         ) }, index);
       }) });
@@ -4189,11 +4355,11 @@ const ResultProduct = (props) => {
         label: getLabel,
         name: getName,
         value: facet[1]
-      }) : (_b2 = facet[1]) == null ? void 0 : _b2.map((item) => {
+      }) : (_b2 = facet[1]) == null ? void 0 : _b2.map((item2) => {
         dataClickedFacets.push({
           label: getLabel,
           name: getName,
-          value: item
+          value: item2
         });
       }) : dataClickedFacets.push({
         label: getLabel,
@@ -4276,8 +4442,8 @@ const ResultProduct = (props) => {
                       fill: "black"
                     }
                   ) }),
-                  options: allowedSorts.map((item) => {
-                    const { label, value } = item;
+                  options: allowedSorts.map((item2) => {
+                    const { label, value } = item2;
                     return {
                       label,
                       value
@@ -4294,10 +4460,10 @@ const ResultProduct = (props) => {
                 SelectField,
                 {
                   align: "end",
-                  options: displaySettings.search.allowed_limit.map((item) => {
+                  options: displaySettings.search.allowed_limit.map((item2) => {
                     return {
-                      label: item,
-                      value: item
+                      label: item2,
+                      value: item2
                     };
                   }),
                   value: clickedLimitId,
@@ -4318,8 +4484,8 @@ const ResultProduct = (props) => {
               {
                 sourceApp: "instant-search",
                 type: "large",
-                data: searchResult.map((item) => {
-                  const { variants, ...product } = item || {};
+                data: searchResult.map((item2) => {
+                  const { variants, ...product } = item2 || {};
                   return {
                     product,
                     variants
@@ -4419,7 +4585,10 @@ const ResultCategory = (props) => {
   const handlePageChange = (page) => {
     setCurrentPage(page);
     setTimeout(() => {
-      scrollToElement(searchResultContainerRef.current, 50);
+      scrollToElement({
+        element: searchResultContainerRef.current,
+        headerOffset: 50
+      });
     }, 200);
   };
   React__default.useEffect(() => {
@@ -4664,8 +4833,8 @@ const SearchWidget = (props) => {
               isComponentJsVersion: isJsVersion
             }
           ) : null,
-          searchResultOther.map((item, index) => {
-            const { hits, name } = item;
+          searchResultOther.map((item2, index) => {
+            const { hits, name } = item2;
             return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Global.OtherIndexLists, { listsComponent: otherIndexListsComponent, name, items: hits, isComponentJsVersion: isJsVersion }) }, index);
           })
         ] }),
@@ -4676,8 +4845,8 @@ const SearchWidget = (props) => {
             {
               sourceApp: "instant-search",
               type: "small",
-              data: searchResultProduct.map((item) => {
-                const { variants, ...product } = item || {};
+              data: searchResultProduct.map((item2) => {
+                const { variants, ...product } = item2 || {};
                 return {
                   product,
                   variants
@@ -4709,8 +4878,8 @@ const SearchWidget = (props) => {
               {
                 sourceApp: "instant-search",
                 type: "small",
-                data: suggestionSettings[suggestionIndex].products.list.map((item) => {
-                  const { variants, ...product } = item || {};
+                data: suggestionSettings[suggestionIndex].products.list.map((item2) => {
+                  const { variants, ...product } = item2 || {};
                   return {
                     product,
                     variants