@sledge-app/react-instant-search 1.0.126 → 1.0.128

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

@@ -87,7 +87,9 @@ const LOCAL_STORAGE_KEY = {
   EXPIRED_AUTH_APP: "sledge-expired-auth-app",
   RECENTLY_VIEWED_APP: "sledge-recently-viewed",
   LIMIT_PRODUCT: "sledge-limit-product",
-  WISHLIST_BADGE_COUNTER: "sledge-wishlist-badge-counter"
+  WISHLIST_BADGE_COUNTER: "sledge-wishlist-badge-counter",
+  PRODUCT_FILTER_INIT_TOTAL_HITS: "sledge-product-filter-init-total-hits",
+  SEARCH_RESULT_INIT_TOTAL_HITS: "sledge-search-result-init-total-hits"
 };
 const INTERNAL_SELECTOR_VALUE = {
   ELEMENT_TOAST_NOTIFICATION: "toast-notification",
@@ -993,7 +995,7 @@ const rowRenderer = ({ virtualized, item, id, labelStyle }) => {
   ] });
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__radio-group-item-flex", children: content }, key || index);
 };
-const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {}, onValueChange, useVirtualized = false, scrollElement, selector }) => {
+const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {}, onValueChange, useVirtualized = false, scrollElement, selector, parentRef }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__radio-group-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     $f99a8c78507165f7$export$be92b6f5f03c0fe9,
     {
@@ -1018,7 +1020,8 @@ const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {},
             labelStyle
           }),
           scrollElement,
-          selector
+          selector,
+          parentRef
         }
       ) : items.map(
         (item, index) => rowRenderer({
@@ -1351,22 +1354,25 @@ const Button = React__default.forwardRef((props, buttonRef) => {
   );
 });
 const SearchInputField$1 = "";
-const SearchInputField = (props) => {
+const SearchInputField = React__default.memo((props) => {
   const { className = "", icon, value = "", withClearField, onChange, onResetField, fieldRef, ...otherProps } = props;
-  const handleResetField = () => {
-    (fieldRef == null ? void 0 : fieldRef.current) && fieldRef.current.focus();
+  const inputRef = React__default.useRef(null);
+  const handleResetField = React__default.useCallback(() => {
+    var _a;
+    const elementCurrent = (fieldRef == null ? void 0 : fieldRef.current) || (inputRef == null ? void 0 : inputRef.current);
+    (_a = elementCurrent == null ? void 0 : elementCurrent.focus) == null ? void 0 : _a.call(elementCurrent);
     onChange && onChange({ value: "" });
     onResetField && onResetField();
-  };
-  const handleChangeField = (e) => {
+  }, []);
+  const handleChangeField = React__default.useCallback((e) => {
     onChange && onChange({ value: e.target.value });
-  };
+  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__search-input-field-wrapper ${className || ""}`, children: [
     !icon ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__search-input-field-icon", children: icon }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "sledge__search-input-field", value, onChange: (e) => handleChangeField(e), ref: fieldRef, ...otherProps }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "sledge__search-input-field", value, onChange: (e) => handleChangeField(e), ref: fieldRef || inputRef, ...otherProps }),
     value && withClearField ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__clear-field-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sledge__clear-field", type: "button", onClick: handleResetField, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { width: 14, height: 14, color: "#393d4e" }) }) }) : null
   ] });
-};
+});
 const SelectField$1 = "";
 const ROTATE_FILTER_ARROW_ANIMATION = {
   open: { rotate: 180 },
@@ -3808,7 +3814,7 @@ const addToCartTrigger = async (data) => {
     return;
   });
 };
-const ProductCard = (props) => {
+const ProductCard = React__default.memo((props) => {
   var _a, _b, _c;
   const {
     item,
@@ -4314,8 +4320,8 @@ ${selectedOption === item2 ? "sledge__product-variant-size-swatch-active" : ""}
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: component }, id);
-};
-const ProductGrid = (props) => {
+});
+const ProductGrid = React__default.memo((props) => {
   const { type, className = "", data, setting, sourceApp = null, useSlider = false, isFlyout = false, onAfterAddToCart, onAfterRenderProduct } = props;
   const { redirect_add_to_cart = true } = setting || {};
   const [clickedAddToCartId, setClickedAddToCartId] = React__default.useState(null);
@@ -4402,7 +4408,7 @@ const ProductGrid = (props) => {
       `sledge-product-card_${index}`
     );
   }) });
-};
+});
 const TextAreaField = "";
 const InputField$1 = "";
 const InputField = (props) => {
@@ -4602,6 +4608,18 @@ const SkeletonItem = ({ width, height, rounded, color, style = {}, className = "
   ) : null });
 };
 const SkeletonProductGrid = ({ count, type, isFlyout = false }) => {
+  var _a;
+  const [dataSettings, setDataSettings] = React__default.useState({});
+  const handleSettings = async (LOCAL_STORAGE_GENERAL_SETTING) => {
+    let response;
+    response = JSON.parse(LOCAL_STORAGE_GENERAL_SETTING);
+    if (!response)
+      return;
+    setDataSettings(response);
+  };
+  React__default.useEffect(() => {
+    handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.GENERAL_SETTING) || null);
+  }, []);
   let components = [];
   for (let i = 0; i < count; i++) {
     components.push(
@@ -4654,7 +4672,7 @@ const SkeletonProductGrid = ({ count, type, isFlyout = false }) => {
       ] }, i)
     );
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid sledge__skeleton-product-grid sledge__skeleton-pointer-events-none", "data-grid-type": type, children: components });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_a = dataSettings == null ? void 0 : dataSettings.skeleton) == null ? void 0 : _a.enable) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid sledge__skeleton-product-grid sledge__skeleton-pointer-events-none", "data-grid-type": type, children: components }) : null });
 };
 const SkeletonReviewGrid = ({ count, type, gridItemHeights = [] }) => {
   let components = [];
@@ -4989,14 +5007,14 @@ const getElement = ({ selector, setUsedScrollElement }) => {
   else
     setUsedScrollElement(element);
 };
-const VirtualizedList = ({ scrollElement, rowCount, rowRenderer: rowRenderer2, selector }) => {
+const VirtualizedList = ({ scrollElement, rowCount, rowRenderer: rowRenderer2, selector, parentRef = null }) => {
   var _a;
   const [usedScrollElement, setUsedScrollElement] = React__default.useState(scrollElement);
   if (!usedScrollElement && selector)
     getElement({ selector, setUsedScrollElement });
   const virtualizer = useVirtualizer({
     count: rowCount,
-    getScrollElement: () => usedScrollElement,
+    getScrollElement: () => (parentRef == null ? void 0 : parentRef.current) || usedScrollElement,
     estimateSize: () => 45
   });
   const items = virtualizer.getVirtualItems();
@@ -5936,6 +5954,130 @@ const handleFacetValues = ({
   });
   return facetValues;
 };
+const keyOpenFilters = ({ items = [] }) => {
+  return (items == null ? void 0 : items.length) ? items.map((props, index) => {
+    const { value, settings } = props;
+    const { collapse } = settings || {};
+    return collapse ? null : `${value}-${index}`;
+  }).filter((item) => item) : [];
+};
+const handleSearchResponse = async (props) => {
+  const {
+    layoutType = "default",
+    clickedTabIndexId,
+    clickedTabIndexType = "product",
+    keyword,
+    sort = [],
+    page = 1,
+    limit = 1,
+    isUseMultiSearch,
+    facets,
+    attributesToRetrieve = [],
+    clickedFacets,
+    setClickedFacets,
+    allowedFilterSlider,
+    hierarchicalFacetAliases,
+    defaultFilterItems,
+    setValueFilterPriceChange,
+    setValueFilterOnSaleChange,
+    setValueFilterSliderOthers,
+    collectionId,
+    hiddenTags,
+    showOutOfStock,
+    hierarchicalProductTypeSettings,
+    hierarchicalCollectionsSettings,
+    usePublishedFilter,
+    tabs = []
+  } = props;
+  const isResultForProduct = clickedTabIndexType === "product";
+  const isTypeCategoryHasPublished = ({ usePublishedFilter: usePublishedFilter2, type }) => Boolean(usePublishedFilter2 && type && ["collection", "page", "article"].includes(type));
+  const { separator: hierarchical_separator, hiddens: hierarchical_hiddens } = hierarchicalProductTypeSettings || {};
+  const {
+    separator: hierarchical_collections_separator,
+    hiddens: hierarchical_collections_hiddens,
+    hidden_ids: hierarchical_collections_hidden_ids,
+    structure: hierarchical_collections_structure
+  } = hierarchicalCollectionsSettings || {};
+  let response;
+  let filterProduct = createQueryFilter({
+    facets,
+    facetsQueryStringObject: clickedFacets,
+    callback: (facetsQueryStringObject) => {
+      setClickedFacets == null ? void 0 : setClickedFacets(facetsQueryStringObject);
+      if (facetsQueryStringObject["variants.price"])
+        setValueFilterPriceChange == null ? void 0 : setValueFilterPriceChange(facetsQueryStringObject["variants.price"]);
+      if (facetsQueryStringObject["variants.sale_percent"])
+        setValueFilterOnSaleChange == null ? void 0 : setValueFilterOnSaleChange(facetsQueryStringObject["variants.sale_percent"]);
+      allowedFilterSlider == null ? void 0 : allowedFilterSlider.map((filterSlider) => {
+        if (!filterSlider || filterSlider && ["variants.price", "variants.sale_percent"].includes(filterSlider))
+          return;
+        if (facetsQueryStringObject[filterSlider])
+          setValueFilterSliderOthers == null ? void 0 : setValueFilterSliderOthers((prevState) => ({ ...prevState, [filterSlider]: facetsQueryStringObject[filterSlider] }));
+      });
+    },
+    separator: hierarchical_separator,
+    separatorCollection: hierarchical_collections_separator,
+    additional: [
+      (hiddenTags == null ? void 0 : hiddenTags.length) ? `'tags' NOT IN ${JSON.stringify(hiddenTags)}` : null,
+      collectionId ? `'collections.id' = '${collectionId}'` : null,
+      !showOutOfStock ? `'availability' IN ${JSON.stringify(["in stock"])}` : null
+    ],
+    allowedFilterSlider,
+    hierarchicalFacetAliases,
+    defaultFilterItems
+  });
+  let filterCategory = "";
+  if (isTypeCategoryHasPublished({ usePublishedFilter, type: clickedTabIndexType })) {
+    filterCategory = DEFAULT_QUERY_PUBLISHED_FILTER;
+  }
+  let bodyProductOrCategory = isResultForProduct ? {
+    q: keyword,
+    sort,
+    page,
+    hitsPerPage: limit,
+    facets,
+    attributesToRetrieve,
+    filter: filterProduct
+  } : {
+    q: keyword,
+    sort,
+    page,
+    hitsPerPage: 12,
+    filter: filterCategory
+  };
+  if (isResultForProduct && layoutType === "product-filter") {
+    response = await search(clickedTabIndexId, bodyProductOrCategory);
+  } else {
+    if (isUseMultiSearch) {
+      let getTabs = isUseMultiSearch ? tabs : tabs.filter(({ index }) => index == null ? void 0 : index.includes(clickedTabIndexId));
+      let body = {
+        queries: getTabs.map((tab) => {
+          const { index, type } = tab;
+          let isCurrentIndex = index.includes(clickedTabIndexId);
+          let isProductIndex = type === "product";
+          return {
+            indexUid: index,
+            ...isCurrentIndex ? bodyProductOrCategory : {
+              q: keyword || "",
+              hitsPerPage: 1,
+              filter: isTypeCategoryHasPublished({ usePublishedFilter, type }) ? DEFAULT_QUERY_PUBLISHED_FILTER : isProductIndex ? filterProduct : "",
+              attributesToRetrieve: [],
+              limit: 0,
+              page: 0,
+              ...isProductIndex ? {
+                facets
+              } : {}
+            }
+          };
+        })
+      };
+      response = await multiSearch(body);
+    } else {
+      response = await search(clickedTabIndexId, bodyProductOrCategory);
+    }
+  }
+  return response;
+};
 const FacetComponent = (props) => {
   var _a, _b, _c, _d, _e;
   const {
@@ -5973,6 +6115,7 @@ const FacetComponent = (props) => {
   const [keywordFacet, setKeywordFacet] = React__default.useState("");
   const [showFacet, setShowFacet] = React__default.useState(false);
   const searchFacetRef = React__default.useRef(null);
+  const ulListRef = React__default.useRef(null);
   const previousState = usePrevious({ keywordFacet });
   const { money_format, default_currency_symbol } = generalDataSettings || {};
   const { button_load_more } = (generalDataSettings == null ? void 0 : generalDataSettings.languages) || {};
@@ -6259,11 +6402,11 @@ const FacetComponent = (props) => {
         }),
         setValueChange: (valueChange) => {
           if (value === "variants.price") {
-            setValueFilterPriceChange(valueChange);
+            setValueFilterPriceChange == null ? void 0 : setValueFilterPriceChange(valueChange);
           } else if (value === "variants.sale_percent") {
-            setValueFilterOnSaleChange(valueChange);
+            setValueFilterOnSaleChange == null ? void 0 : setValueFilterOnSaleChange(valueChange);
           } else {
-            setValueFilterSliderOthers((prevState) => ({ ...prevState, [value]: valueChange }));
+            setValueFilterSliderOthers == null ? void 0 : setValueFilterSliderOthers((prevState) => ({ ...prevState, [value]: valueChange }));
           }
         },
         wrapperClassName: "sledge-instant-search__result-filter-item-list-slider",
@@ -6283,7 +6426,8 @@ const FacetComponent = (props) => {
         rowRenderer: (props2) => handleFacetCheckbox({
           facetValues: currentItems,
           virtualized: props2
-        })
+        }),
+        parentRef: ulListRef
       }
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: handleFacetCheckbox({
       facetValues: currentItems
@@ -6312,7 +6456,8 @@ const FacetComponent = (props) => {
         selector: scrollElementSelector,
         ...scrollElement && {
           scrollElement
-        }
+        },
+        parentRef: ulListRef
       }
     ) });
   } else if (display.toLowerCase() === "select" && (currentItems == null ? void 0 : currentItems.length)) {
@@ -6386,7 +6531,7 @@ const FacetComponent = (props) => {
       ),
       keywordFacet && totalItems && Number(totalItems) > 1 && !show_filter_list_when_search && !showFacet ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-search-text", style: filter_option_style, children: searchFilterShowMoreResult ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: searchFilterShowMoreResult } }) : defaultSearchShowMoreFilter }) : null
     ] }) : null,
-    !show_search || show_search && (show_filter_list_when_search || !show_filter_list_when_search && (!totalItems || Number(totalItems) === 1 && keywordFacet) || showFacet) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: ulClasses, children: blockComponent }) : null
+    !show_search || show_search && (show_filter_list_when_search || !show_filter_list_when_search && (!totalItems || Number(totalItems) === 1 && keywordFacet) || showFacet) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: ulListRef, className: ulClasses, children: blockComponent }) : null
   ] });
 };
 const FilterVerticalComponent = (props) => {
@@ -6476,6 +6621,202 @@ const FilterHorizontalComponent = (props) => {
     }
   ) }, indexFilter) : null;
 };
+const Sort = React__default.memo(
+  (props) => {
+    const { label = "", options = [], clickedOption = "", handleChangeOption = null, overridePlaceholderOnMobile = null } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (options == null ? void 0 : options.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-select-field-sort", children: [
+        label || "Sort by",
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SelectField,
+        {
+          align: "end",
+          prefixLabel: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
+            {
+              d: "M12.6296 4.34737C12.9144 4.34737 13.1497 4.55898 13.1869 4.83354L13.1921 4.90987L13.192 13.7599L15.2892 11.6543C15.5083 11.4341 15.8645 11.4333 16.0847 11.6525C16.2848 11.8517 16.3037 12.1641 16.1408 12.3847L16.0865 12.4479L13.0282 15.5204C13.0097 15.5386 12.991 15.555 12.9712 15.5701L13.0282 15.5204C13.0006 15.5482 12.9708 15.5724 12.9394 15.5932C12.9285 15.6 12.9171 15.607 12.9055 15.6135C12.8946 15.62 12.8837 15.6258 12.8725 15.6311C12.8615 15.6359 12.8504 15.6408 12.8391 15.6454C12.8247 15.6515 12.8099 15.6568 12.795 15.6613C12.7862 15.6637 12.7772 15.6662 12.7681 15.6685C12.7519 15.673 12.7357 15.6763 12.7193 15.6789C12.7116 15.6798 12.7036 15.6809 12.6955 15.6819C12.677 15.6844 12.6587 15.6857 12.6404 15.686C12.6368 15.6857 12.6332 15.6857 12.6296 15.6857L12.6186 15.686C12.6003 15.6857 12.582 15.6844 12.5637 15.6823L12.6296 15.6857C12.5989 15.6857 12.5689 15.6833 12.5396 15.6785C12.5233 15.6763 12.5071 15.673 12.4909 15.6689C12.4824 15.6663 12.4738 15.6639 12.4654 15.6614C12.4493 15.6569 12.4332 15.6512 12.4174 15.6448C12.4088 15.6408 12.4005 15.6372 12.3922 15.6333C12.3793 15.6278 12.3663 15.6211 12.3535 15.6139C12.342 15.6069 12.3307 15.6 12.3196 15.5926C12.3109 15.5875 12.3024 15.5815 12.294 15.5752L12.288 15.5701C12.2682 15.555 12.2494 15.5386 12.2318 15.5209L12.2308 15.5204L9.1725 12.4479C8.95334 12.2278 8.95416 11.8716 9.17434 11.6525C9.3745 11.4532 9.68704 11.4358 9.90687 11.5997L9.96983 11.6543L12.067 13.7614L12.0671 4.90987C12.0671 4.59921 12.3189 4.34737 12.6296 4.34737ZM5.18325 2.3122L5.19421 2.31189C5.21254 2.31224 5.23085 2.31348 5.24908 2.31562L5.18325 2.3122C5.21389 2.3122 5.24396 2.31465 5.27328 2.31937C5.28931 2.32156 5.3054 2.32487 5.32136 2.32889C5.33074 2.33164 5.3403 2.33433 5.34975 2.33725C5.36452 2.34142 5.37882 2.34648 5.39293 2.35213C5.40313 2.35668 5.41346 2.36119 5.42362 2.366C5.4357 2.37123 5.4476 2.37737 5.45931 2.38397C5.46933 2.39014 5.47926 2.39616 5.48898 2.40246C5.49898 2.40841 5.50899 2.41537 5.51882 2.42269L5.582 2.47746L8.64033 5.54996C8.85949 5.77013 8.85867 6.12629 8.63849 6.34545C8.43833 6.54469 8.12579 6.56212 7.90596 6.39822L7.843 6.34361L5.74525 4.23564L5.74575 13.088C5.74575 13.3987 5.49391 13.6505 5.18325 13.6505C4.89848 13.6505 4.66313 13.4389 4.62588 13.1644L4.62075 13.088L4.62025 4.23639L2.52367 6.34361C2.32443 6.54377 2.01197 6.56265 1.79139 6.39977L1.72817 6.34545C1.52801 6.14621 1.50914 5.83376 1.67202 5.61317L1.72633 5.54996L4.78467 2.47746L4.81779 2.44709C4.82557 2.44043 4.83353 2.43399 4.84167 2.42776L4.78467 2.47746C4.81226 2.44974 4.84202 2.42549 4.87341 2.40473C4.88436 2.39791 4.89574 2.39094 4.90738 2.38438C4.91819 2.37787 4.92917 2.37215 4.9403 2.36682C4.95128 2.36196 4.96242 2.35706 4.97375 2.35251C4.98814 2.34636 5.00289 2.34115 5.0178 2.33657C5.02687 2.33414 5.03616 2.33154 5.04555 2.32918C5.06066 2.32503 5.07593 2.32186 5.09129 2.31932C5.10053 2.31817 5.10959 2.31691 5.11871 2.31586C5.13607 2.31348 5.15388 2.31227 5.17171 2.3119C5.17564 2.31224 5.17944 2.3122 5.18325 2.3122Z",
+              fill: "black"
+            }
+          ) }),
+          options: options.map((item) => {
+            const { label: label2, value } = item;
+            return {
+              label: label2,
+              value
+            };
+          }),
+          value: clickedOption,
+          onChange: ({ value }) => handleChangeOption == null ? void 0 : handleChangeOption(value),
+          overridePlaceholderOnMobile,
+          className: "sledge-instant-search__result-select-field-sort"
+        }
+      )
+    ] }) : null });
+  }
+);
+const Limit = React__default.memo(
+  (props) => {
+    const { label = "", options = [], clickedOption = "", handleChangeOption = null, overridePlaceholderOnMobile = null } = props;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (options == null ? void 0 : options.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-select-field-limit", children: [
+        label || "Limit",
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SelectField,
+        {
+          align: "end",
+          options: options.map((item) => {
+            return {
+              label: item,
+              value: item
+            };
+          }),
+          value: clickedOption,
+          onChange: ({ value }) => handleChangeOption == null ? void 0 : handleChangeOption(value),
+          overridePlaceholderOnMobile,
+          className: "sledge-instant-search__result-select-field-limit"
+        }
+      )
+    ] }) : null });
+  }
+);
+const Search = React__default.memo((props) => {
+  const { placeholder = "", value = "", handleChangeSearch = null } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SearchInputField,
+    {
+      type: "text",
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
+      placeholder: placeholder || "Search products...",
+      value: value || "",
+      onChange: ({ value: value2 }) => handleChangeSearch == null ? void 0 : handleChangeSearch(value2),
+      onResetField: () => handleChangeSearch == null ? void 0 : handleChangeSearch(""),
+      className: "sledge-instant-search__result-data-keyword-form",
+      withClearField: true
+    }
+  );
+});
+const FacetBlockSelected = React__default.memo(
+  (props) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const {
+      label,
+      name,
+      value: valueProp,
+      index,
+      defaultFilterItems = [],
+      generalDataSettings = {},
+      languageSettings = {},
+      hierarchicalCollectionsSettings = {},
+      hierarchicalProductTypeSettings = {},
+      displaySettings = {},
+      settings = {},
+      handleFilterChange,
+      allowedFilterSlider
+    } = props;
+    const { money_format } = generalDataSettings || {};
+    const { separator: hierarchical_collections_separator } = hierarchicalCollectionsSettings || {};
+    const {
+      color: filter_option_color,
+      font_size: filter_option_font_size,
+      font_weight: filter_option_font_weight,
+      text_transform: filter_option_text_transform
+    } = ((_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.option) || {};
+    const filter_option_style = {
+      ...filter_option_color && { color: filter_option_color },
+      ...filter_option_font_size && { fontSize: filter_option_font_size },
+      ...filter_option_font_weight && { fontWeight: filter_option_font_weight },
+      ...filter_option_text_transform && { textTransform: filter_option_text_transform }
+    };
+    let value = valueProp;
+    if (name === HIERARCHICAL_FACET_OBJECT_ALIASES.collections) {
+      if ((_b = String(value)) == null ? void 0 : _b.includes(hierarchical_collections_separator)) {
+        let arrValue = String(value).split(hierarchical_collections_separator);
+        value = (arrValue == null ? void 0 : arrValue.length) ? arrValue.map((item) => {
+          var _a2;
+          return ((_a2 = parseFacetObject({ facet: item })) == null ? void 0 : _a2.collection_title) || item;
+        }).join(hierarchical_collections_separator) : valueProp;
+      } else {
+        value = ((_c = parseFacetObject({ facet: valueProp })) == null ? void 0 : _c.collection_title) || valueProp;
+      }
+    }
+    let valueText = (languageSettings == null ? void 0 : languageSettings[value]) || value;
+    let isRange = allowedFilterSlider == null ? void 0 : allowedFilterSlider.includes(name);
+    let getLabel = label;
+    let getSettings = {};
+    let isPriceValue = false;
+    let isSalePercent = false;
+    if (name === "variants.price") {
+      isPriceValue = true;
+    } else if (name === "variants.sale_percent") {
+      isSalePercent = true;
+    }
+    if (defaultFilterItems == null ? void 0 : defaultFilterItems.length) {
+      defaultFilterItems.map((defaultFilterItem) => {
+        const { label: defaultFilterItemLabel, items, settings: defaultFilterItemSettings } = defaultFilterItem;
+        if (items == null ? void 0 : items.includes(value)) {
+          getLabel = defaultFilterItemLabel;
+          getSettings = defaultFilterItemSettings;
+        }
+      });
+    }
+    (_d = getSettings == null ? void 0 : getSettings.delete_prefix) == null ? void 0 : _d.map((deletePrefix) => {
+      if (String(valueText).startsWith(deletePrefix))
+        valueText = String(valueText).replace(deletePrefix, "");
+    });
+    if (isRange) {
+      const getValueRange = new Set(value).size === 1 ? [value[0]] : value;
+      valueText = (_e = getValueRange == null ? void 0 : getValueRange.map((valueItem) => isPriceValue ? shopifyFormatMoney(valueItem * 100, money_format) : isSalePercent ? `${valueItem}%` : valueItem)) == null ? void 0 : _e.join(" - ");
+    } else {
+      valueText = (_f = String(valueText)) == null ? void 0 : _f.replaceAll(hierarchical_collections_separator, " > ");
+    }
+    valueText = (_g = String(valueText)) == null ? void 0 : _g.replaceAll("_", " ");
+    let aliases = {};
+    let aliasValue = "";
+    let aliasSeparator = "";
+    if (name === HIERARCHICAL_FACET_OBJECT_ALIASES.collections) {
+      aliases = settings.collectionAliases || {};
+      aliasSeparator = hierarchicalCollectionsSettings.separator;
+    }
+    if (name === HIERARCHICAL_FACET_OBJECT_ALIASES.product_type) {
+      aliases = settings.productTypeAliases || {};
+      aliasSeparator = hierarchicalProductTypeSettings.separator;
+    }
+    if ([HIERARCHICAL_FACET_OBJECT_ALIASES.collections, HIERARCHICAL_FACET_OBJECT_ALIASES.product_type].includes(name) && aliasSeparator) {
+      const splitedValues = value.split(aliasSeparator);
+      let newSplitedValues = [];
+      for (const splitedValue of splitedValues) {
+        newSplitedValues.push(aliases[splitedValue.trim()] || splitedValue);
+      }
+      aliasValue = newSplitedValues.join(" > ");
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-refine-selected", style: filter_option_style, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-list", dangerouslySetInnerHTML: { __html: `${getLabel}: ${aliasValue || valueText}` } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          className: "sledge-instant-search__result-filter-item-refine-title-clear",
+          onClick: () => handleFilterChange == null ? void 0 : handleFilterChange({
+            parentId: name,
+            value
+          }),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 12, height: 12, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
+            {
+              d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+              fill: "currentColor",
+              fillRule: "evenodd",
+              clipRule: "evenodd"
+            }
+          ) })
+        }
+      )
+    ] }, index);
+  }
+);
 const ButtonLoadMore = ({ text, onClick, isInfiniteScroll, currentPage, totalPage, totalResult, pageInfo: pageInfoProp, isVisibleLoadMore, ...otherProps }) => {
   const [ref, entry] = useIntersectionObserver({
     threshold: 0,
@@ -6532,9 +6873,11 @@ const SearchResultWidget = (props) => {
     data: propsData,
     sledgeSettings
   } = props;
-  const isFirstRender = useIsFirstRender();
+  useIsFirstRender();
   const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : DEFAULT_QUERY_PARAM.KEYWORD;
   const querySortBy = (query == null ? void 0 : query.sortBy) ? query.sortBy : DEFAULT_QUERY_PARAM.SORT_BY;
+  const queryPage = (query == null ? void 0 : query.page) ? query.page : DEFAULT_QUERY_PARAM.PAGE;
+  const queryLimit = (query == null ? void 0 : query.limit) ? query.limit : DEFAULT_QUERY_PARAM.LIMIT;
   const { collectionId } = params || {};
   const searchParams = typeof document !== "undefined" ? new URLSearchParams((_a = document == null ? void 0 : document.location) == null ? void 0 : _a.search) : null;
   const [settings] = React__default.useState(typeof localStorage !== "undefined" ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "{}") : {});
@@ -6549,6 +6892,7 @@ const SearchResultWidget = (props) => {
   const [allowedSorts, setAllowedSorts] = React__default.useState(((_b = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _b.allowed_sorts) || []);
   const [allowedFilter, setAllowedFilter] = React__default.useState([]);
   const [allowedTabs, setAllowedTabs] = React__default.useState([]);
+  const [tabs, setTabs] = React__default.useState([]);
   const [facets, setFacets] = React__default.useState([]);
   const [indexProduct, setIndexProduct] = React__default.useState(((_c = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _c.index_product) || "");
   const [hiddenTags, setHiddenTags] = React__default.useState(((_d = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _d.hidden_tags) || []);
@@ -6579,6 +6923,9 @@ const SearchResultWidget = (props) => {
   const [hierarchicalFacetAliases, setHierarchicalFacetAliases] = React__default.useState([]);
   const [usePublishedFilter, setUsePublishedFilter] = React__default.useState(false);
   const [showOutOfStock, setShowOutOfStock] = React__default.useState(false);
+  const [valueFilterPriceChange, setValueFilterPriceChange] = React__default.useState([]);
+  const [valueFilterOnSaleChange, setValueFilterOnSaleChange] = React__default.useState([]);
+  const [valueFilterSliderOthers, setValueFilterSliderOthers] = React__default.useState({});
   const debouncedKeyword = useDebounce(keyword, 500);
   let productCardsComponent = null;
   let collectionCardsComponent = null;
@@ -6605,82 +6952,116 @@ const SearchResultWidget = (props) => {
   const { value: valueRenderInstantSearchResult, trigger: triggerRenderInstantSearchResult } = ((_l = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.instantSearch) == null ? void 0 : _l.searchResult) || {};
   const searchResultContainerRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
-  const handleChangeTabIndex = (params2) => {
-    const { id, name, type } = params2;
-    setClickedTabIndexId(id);
-    setClickedTabIndexName(name);
-    setClickedTabIndexType(type);
-    setResultComponent(id.includes(indexProduct) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultCategory, {}));
-  };
-  const handleInitStates = async (data) => {
-    var _a2, _b2, _c2, _d2, _e2;
-    const { filters, index_product, tabs, hidden_tags, show_out_of_stock, display, use_published_filter } = data;
-    let getTabs = layoutType === "product-filter" ? tabs.filter(({ index }) => index == null ? void 0 : index.includes(index_product)) : tabs;
-    let response;
-    let body = {
-      queries: getTabs.map((tab) => {
-        const { index, type } = tab;
-        const isTypeCategoryHasPublished = Boolean(use_published_filter && type && ["collection", "page", "article"].includes(type));
-        let filter = "";
-        let isSetFilter = false;
-        let getFacets = [];
-        if (!isSetFilter)
-          filters == null ? void 0 : filters.map((filter2) => {
-            const { active, collections, items } = filter2;
-            if (!active)
-              return;
-            const newItems = items == null ? void 0 : items.map(({ value, ...otherItem }) => (otherItem == null ? void 0 : otherItem.display) === "tree" ? HIERARCHICAL_FACET_OBJECT_ALIASES[value] || value : value);
-            if (collectionId && (collections == null ? void 0 : collections.includes(String(collectionId)))) {
-              isSetFilter = true;
-              getFacets = newItems;
-            } else {
-              if (collections == null ? void 0 : collections.includes("all")) {
-                isSetFilter = true;
-                getFacets = newItems;
-              }
-            }
-          });
-        let isProductIndex = index.includes(index_product);
-        let isHasProductFacets = isProductIndex && getFacets.length;
-        let additionalFilter = [];
-        if (hidden_tags == null ? void 0 : hidden_tags.length)
-          additionalFilter.push(`'tags' NOT IN ${JSON.stringify(hidden_tags)}`);
-        if (!show_out_of_stock)
-          additionalFilter.push(`'availability' IN ${JSON.stringify(["in stock"])}`);
-        if (collectionId)
-          additionalFilter.push(`'collections.id' = '${collectionId}'`);
-        if (isHasProductFacets)
-          setFacets(getFacets);
-        if (isProductIndex) {
-          filter = [...new Set(additionalFilter.concat(DEFAULT_QUERY_PRODUCT_MEILISEARCH))].join(" AND ");
-        } else if (isTypeCategoryHasPublished) {
-          filter = DEFAULT_QUERY_PUBLISHED_FILTER;
+  const handleChangeTabIndex = React__default.useCallback(
+    (params2) => {
+      const { id, name, type } = params2;
+      setClickedTabIndexId(id);
+      setClickedTabIndexName(name);
+      setClickedTabIndexType(type);
+      setResultComponent(id.includes(indexProduct) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultCategory, {}));
+    },
+    [indexProduct]
+  );
+  const handleFilterStates = ({ data = {}, valueSearchResultFacets = {} }) => {
+    var _a2, _b2, _c2;
+    const { filters } = data;
+    let allowedFilters = ((_b2 = (_a2 = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _a2.filters) == null ? void 0 : _b2.length) ? (_c2 = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _c2.filters : (filters == null ? void 0 : filters.length) ? filters : [];
+    let isSetFilter = false;
+    let valueAllowedFilter = [];
+    let valueDefaultFilterItems = [];
+    let valueAllowedFilterSlider = [];
+    let valueHierarchicalFacetAliases = [];
+    if (!isSetFilter) {
+      allowedFilters == null ? void 0 : allowedFilters.map((filter) => {
+        const { active, collections, items } = filter;
+        if (!active)
+          return;
+        const newItems = items == null ? void 0 : items.map(({ value, ...otherItem }) => {
+          return {
+            ...otherItem,
+            value: (otherItem == null ? void 0 : otherItem.display) === "tree" ? HIERARCHICAL_FACET_OBJECT_ALIASES[value] || value : value
+          };
+        });
+        if (collectionId && (collections == null ? void 0 : collections.includes(String(collectionId)))) {
+          isSetFilter = true;
+          valueAllowedFilter = newItems;
+        } else {
+          if (collections == null ? void 0 : collections.includes("all")) {
+            isSetFilter = true;
+            valueAllowedFilter = newItems;
+          }
+        }
+      });
+    }
+    if (valueAllowedFilter == null ? void 0 : valueAllowedFilter.length) {
+      valueDefaultFilterItems = valueAllowedFilter.map((filter) => {
+        var _a3;
+        const { value, label, display, settings: settings2 } = filter;
+        const { prefix, filter_list, selected_filter } = settings2 || {};
+        const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display.toLowerCase());
+        if (isDisplaySlider)
+          return;
+        let items = [];
+        if (display.toLowerCase() === "tree") {
+          for (let level = 0; level < MAX_LIMIT_HIERARCHICAL; level++) {
+            items = [...items, ...(valueSearchResultFacets == null ? void 0 : valueSearchResultFacets[`${value}.lvl${level}`]) || []];
+          }
+        } else {
+          items = valueSearchResultFacets == null ? void 0 : valueSearchResultFacets[value];
         }
         return {
-          indexUid: index,
-          q: keyword || "",
-          hitsPerPage: 1,
-          facets: isHasProductFacets ? getFacets : [],
-          filter,
-          attributesToRetrieve: [],
-          limit: 0,
-          page: 0
+          value,
+          label,
+          settings: settings2,
+          items: (_a3 = items == null ? void 0 : items.map((item) => {
+            const isManualFilter = item && filter_list === "manual" && !(selected_filter == null ? void 0 : selected_filter.includes(item == null ? void 0 : item.value));
+            const isPrefixFilter = item && filter_list === "prefix" && !(prefix == null ? void 0 : prefix.find((prefixItem) => {
+              var _a4;
+              return (_a4 = item == null ? void 0 : item.value) == null ? void 0 : _a4.startsWith(prefixItem);
+            }));
+            if (!item || isManualFilter || isPrefixFilter)
+              return;
+            return item.value;
+          })) == null ? void 0 : _a3.filter((item) => item)
         };
-      })
+      }).filter((item) => item);
+      valueAllowedFilterSlider = valueAllowedFilter.map((filter) => {
+        const { value, display } = filter;
+        const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display.toLowerCase());
+        if (!isDisplaySlider)
+          return;
+        return value;
+      }).filter((item) => item);
+      valueHierarchicalFacetAliases = valueAllowedFilter.map((filter) => {
+        const { value, display } = filter;
+        const isDisplayTree = display.toLowerCase() === "tree";
+        if (!isDisplayTree)
+          return;
+        return value;
+      }).filter((item) => item);
+    }
+    return {
+      isSetFilter,
+      valueAllowedFilter,
+      valueDefaultFilterItems,
+      valueAllowedFilterSlider,
+      valueHierarchicalFacetAliases
     };
-    if (propsData && initStatesFirstTime) {
-      response = propsData.result;
-      setInitStatesFirstTime(false);
-    } else
-      response = await multiSearch(body);
-    if (!response)
-      return;
-    const { results } = response;
-    setIsFirstLoading(false);
-    setIsLoading(false);
-    const { facetStats, totalHits, facetDistribution } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(index_product))) || {};
+  };
+  const handleSetInitStates = ({ results = {}, data = {}, callback }) => {
+    var _a2, _b2, _c2;
+    const { filters, index_product, tabs: tabs2, hidden_tags, show_out_of_stock, display, use_published_filter } = data;
+    const { facetStats, totalHits: totalHitsResult, facetDistribution } = layoutType === "default" ? ((_a2 = results == null ? void 0 : results.find) == null ? void 0 : _a2.call(results, ({ indexUid }) => indexUid.includes(index_product))) || {} : results || {};
+    let totalHits = totalHitsResult || 0;
+    if (typeof localStorage !== "undefined") {
+      const INIT_TOTAL_HITS = Number(localStorage.getItem(layoutType === "default" ? LOCAL_STORAGE_KEY.SEARCH_RESULT_INIT_TOTAL_HITS : LOCAL_STORAGE_KEY.PRODUCT_FILTER_INIT_TOTAL_HITS) || 0);
+      if (!(INIT_TOTAL_HITS > 1)) {
+        localStorage.setItem(layoutType === "default" ? LOCAL_STORAGE_KEY.SEARCH_RESULT_INIT_TOTAL_HITS : LOCAL_STORAGE_KEY.PRODUCT_FILTER_INIT_TOTAL_HITS, totalHits);
+      }
+      totalHits = totalHits <= 1 ? INIT_TOTAL_HITS : totalHits;
+    }
     setTotalHitsProduct(totalHits || 0);
-    let valueHideFilterWhenOneValue = ((_a2 = display == null ? void 0 : display.filter) == null ? void 0 : _a2.hide_when_one_value) && totalHits <= 1;
+    let valueHideFilterWhenOneValue = ((_b2 = display == null ? void 0 : display.filter) == null ? void 0 : _b2.hide_when_one_value) && totalHits <= 1;
     let valueSearchResultFacets = facetDistribution ? Object.fromEntries(
       Object.entries(facetDistribution).map((facet) => {
         let value = facet[0];
@@ -6707,96 +7088,79 @@ const SearchResultWidget = (props) => {
     setSearchResultFacets(valueSearchResultFacets);
     setDefaultFacetStats(facetStats);
     setHideFilterWhenOneValue(valueHideFilterWhenOneValue);
-    let allowedFilters = ((_c2 = (_b2 = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _b2.filters) == null ? void 0 : _c2.length) ? (_d2 = sledgeSettings == null ? void 0 : sledgeSettings.instantsearch) == null ? void 0 : _d2.filters : (filters == null ? void 0 : filters.length) ? filters : [];
-    if (!(!((_e2 = display == null ? void 0 : display.filter) == null ? void 0 : _e2.enable_on_search) || valueHideFilterWhenOneValue)) {
-      let isSetFilter = false;
-      let valueAllowedFilter = [];
-      if (!isSetFilter)
-        allowedFilters == null ? void 0 : allowedFilters.map((filter) => {
-          const { active, collections, items } = filter;
-          if (!active)
-            return;
-          const newItems = items == null ? void 0 : items.map(({ value, ...otherItem }) => {
-            return {
-              ...otherItem,
-              value: (otherItem == null ? void 0 : otherItem.display) === "tree" ? HIERARCHICAL_FACET_OBJECT_ALIASES[value] || value : value
-            };
-          });
-          if (collectionId && (collections == null ? void 0 : collections.includes(String(collectionId)))) {
-            isSetFilter = true;
-            valueAllowedFilter = newItems;
-          } else {
-            if (collections == null ? void 0 : collections.includes("all")) {
-              isSetFilter = true;
-              valueAllowedFilter = newItems;
-            }
-          }
-        });
+    const { isSetFilter, valueAllowedFilter, valueDefaultFilterItems, valueAllowedFilterSlider, valueHierarchicalFacetAliases } = handleFilterStates({
+      data,
+      valueSearchResultFacets
+    });
+    if (!(!((_c2 = display == null ? void 0 : display.filter) == null ? void 0 : _c2.enable_on_search) || valueHideFilterWhenOneValue)) {
       if (isSetFilter)
         setAllowedFilter(valueAllowedFilter);
       if (valueAllowedFilter == null ? void 0 : valueAllowedFilter.length) {
-        let valueDefaultFilterItems = valueAllowedFilter.map((filter) => {
-          var _a3;
-          const { value, label, display: display2, settings: settings2 } = filter;
-          const { prefix, filter_list, selected_filter } = settings2 || {};
-          const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display2.toLowerCase());
-          if (isDisplaySlider)
-            return;
-          let items = [];
-          if (display2.toLowerCase() === "tree") {
-            for (let level = 0; level < MAX_LIMIT_HIERARCHICAL; level++) {
-              items = [...items, ...(valueSearchResultFacets == null ? void 0 : valueSearchResultFacets[`${value}.lvl${level}`]) || []];
-            }
-          } else {
-            items = valueSearchResultFacets[value];
-          }
-          return {
-            value,
-            label,
-            settings: settings2,
-            items: (_a3 = items == null ? void 0 : items.map((item) => {
-              const isManualFilter = item && filter_list === "manual" && !(selected_filter == null ? void 0 : selected_filter.includes(item == null ? void 0 : item.value));
-              const isPrefixFilter = item && filter_list === "prefix" && !(prefix == null ? void 0 : prefix.find((prefixItem) => {
-                var _a4;
-                return (_a4 = item == null ? void 0 : item.value) == null ? void 0 : _a4.startsWith(prefixItem);
-              }));
-              if (!item || isManualFilter || isPrefixFilter)
-                return;
-              return item.value;
-            })) == null ? void 0 : _a3.filter((item) => item)
-          };
-        }).filter((item) => item);
-        let valueAllowedFilterSlider = valueAllowedFilter.map((filter) => {
-          const { value, display: display2 } = filter;
-          const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display2.toLowerCase());
-          if (!isDisplaySlider)
-            return;
-          return value;
-        }).filter((item) => item);
-        let valueHierarchicalFacetAliases = valueAllowedFilter.map((filter) => {
-          const { value, display: display2 } = filter;
-          const isDisplayTree = display2.toLowerCase() === "tree";
-          if (!isDisplayTree)
-            return;
-          return value;
-        }).filter((item) => item);
         setDefaultFilterItems(valueDefaultFilterItems);
         setAllowedFilterSlider(valueAllowedFilterSlider);
         setHierarchicalFacetAliases(valueHierarchicalFacetAliases);
       }
     }
-    setAllowedTabs(
-      tabs == null ? void 0 : tabs.map((tab) => {
-        const { index } = tab;
-        const { totalHits: totalHits2 } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid === index)) || {};
-        return {
-          ...tab,
-          ...{
-            total: totalHits2
+    if (layoutType === "default") {
+      setAllowedTabs(
+        tabs2 == null ? void 0 : tabs2.map((tab) => {
+          var _a3;
+          const { index } = tab;
+          const { totalHits: totalHits2 } = ((_a3 = results == null ? void 0 : results.find) == null ? void 0 : _a3.call(results, ({ indexUid }) => indexUid === index)) || {};
+          return {
+            ...tab,
+            ...{
+              total: totalHits2
+            }
+          };
+        })
+      );
+    }
+    callback == null ? void 0 : callback({
+      valueAllowedFilter
+    });
+  };
+  const handleInitStates = async (data) => {
+    const { filters, index_product, tabs: tabs2, hidden_tags, show_out_of_stock, display, use_published_filter } = data;
+    let getTabs = layoutType === "product-filter" ? tabs2.filter(({ index }) => index == null ? void 0 : index.includes(index_product)) : tabs2;
+    getTabs.map((tab) => {
+      const { index } = tab;
+      let isSetFilter2 = false;
+      let getFacets = [];
+      if (!isSetFilter2)
+        filters == null ? void 0 : filters.map((filter) => {
+          const { active, collections, items } = filter;
+          if (!active)
+            return;
+          const newItems = items == null ? void 0 : items.map(({ value, ...otherItem }) => (otherItem == null ? void 0 : otherItem.display) === "tree" ? HIERARCHICAL_FACET_OBJECT_ALIASES[value] || value : value);
+          if (collectionId && (collections == null ? void 0 : collections.includes(String(collectionId)))) {
+            isSetFilter2 = true;
+            getFacets = newItems;
+          } else {
+            if (collections == null ? void 0 : collections.includes("all")) {
+              isSetFilter2 = true;
+              getFacets = newItems;
+            }
           }
-        };
-      })
-    );
+        });
+      let isProductIndex = index.includes(index_product);
+      let isHasProductFacets = isProductIndex && getFacets.length;
+      if (isHasProductFacets)
+        setFacets(getFacets);
+    });
+    const { isSetFilter, valueAllowedFilter, valueDefaultFilterItems, valueAllowedFilterSlider, valueHierarchicalFacetAliases } = handleFilterStates({
+      data
+    });
+    if (isSetFilter)
+      setAllowedFilter(valueAllowedFilter);
+    if (valueAllowedFilter == null ? void 0 : valueAllowedFilter.length) {
+      setDefaultFilterItems(valueDefaultFilterItems);
+      setAllowedFilterSlider(valueAllowedFilterSlider);
+      setHierarchicalFacetAliases(valueHierarchicalFacetAliases);
+    }
+    setIsFirstLoading(false);
+    setIsLoading(false);
+    return;
   };
   const handleSettings = (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
     var _a2;
@@ -6815,7 +7179,7 @@ const SearchResultWidget = (props) => {
       allowed_sorts,
       default_sort,
       index_product,
-      tabs,
+      tabs: tabs2,
       hidden_tags,
       display,
       colors,
@@ -6859,7 +7223,8 @@ const SearchResultWidget = (props) => {
     setAttributesToRetrieve(attributes_to_retrieve);
     setUsePublishedFilter(use_published_filter);
     setShowOutOfStock(show_out_of_stock);
-    getFirstIndex = tabs.find(({ index }) => index.includes(index_product));
+    setTabs(tabs2);
+    getFirstIndex = tabs2.find(({ index }) => index.includes(index_product));
     if (Object.keys(getFirstIndex).length) {
       setClickedTabIndexId(getFirstIndex.index);
       setClickedTabIndexName(getFirstIndex.name);
@@ -6867,18 +7232,22 @@ const SearchResultWidget = (props) => {
     }
     setIsLoadingSetting(false);
   };
-  const handleChangeKeyword = (value) => {
+  const handleChangeKeyword = React__default.useCallback((value) => {
     const searchParams2 = new URLSearchParams(document.location.search);
     searchParams2.set(queryKeyword, value);
     setKeyword(value);
     window.history.pushState(null, "", `${document.location.pathname}?${searchParams2.toString()}`);
+  }, []);
+  const initStates = () => {
+    const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
+    if (INSTANT_SEARCH_SETTING)
+      handleInitStates(INSTANT_SEARCH_SETTING);
   };
   useEffectCallback(() => {
     var _a2, _b2, _c2, _d2;
     if (!isRenderAppInstantSearch)
       return;
-    const searchParams2 = new URLSearchParams(document.location.search);
-    setKeyword((searchParams2 == null ? void 0 : searchParams2.get(queryKeyword)) || "");
+    initStates();
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
     if (typeof window !== "undefined") {
       if (layoutType === "default") {
@@ -6901,13 +7270,9 @@ const SearchResultWidget = (props) => {
       triggerRenderInstantSearchResult("");
     setKeyword(valueRenderInstantSearchResult);
   }, [valueRenderInstantSearchResult]);
-  useEffectCallback(() => {
-    if (isFirstRender || isLoadingSetting)
-      return;
-    const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
-    if (INSTANT_SEARCH_SETTING)
-      handleInitStates(INSTANT_SEARCH_SETTING);
-  }, [debouncedKeyword, isFirstRender, isLoadingSetting]);
+  useEffectOnChange(() => {
+    initStates();
+  }, [debouncedKeyword]);
   const filterHorizontalSkeletonComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-skeleton", children: [1, 2, 3, 4, 5, 6, 7].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "106px", height: "42px", rounded: "md", color: "lighten" }, index)) });
   const tabSkeleton = layoutType === "default" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-tab-list sledge-instant-search__result-tab-list-skeleton", children: [1, 2, 3, 4, 5].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "122px", height: "28px", rounded: "md", color: "lighten" }, index)) }) : null;
   const filterHorizontalSkeleton = ((_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" && !hideFilterWhenOneValue ? filterHorizontalSkeletonComponent : null;
@@ -7271,16 +7636,32 @@ const SearchResultWidget = (props) => {
       allowedFilterSlider,
       hierarchicalFacetAliases,
       usePublishedFilter,
-      showOutOfStock
+      showOutOfStock,
+      handleSetInitStates,
+      querySortBy,
+      queryPage,
+      queryLimit,
+      valueFilterPriceChange,
+      setValueFilterPriceChange,
+      valueFilterOnSaleChange,
+      setValueFilterOnSaleChange,
+      valueFilterSliderOthers,
+      setValueFilterSliderOthers,
+      tabs,
+      initStatesFirstTime,
+      setInitStatesFirstTime,
+      allowedTabs,
+      setAllowedTabs
     })
   ] });
 };
-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, _C, _D;
+const ResultProduct = React__default.memo((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;
   const {
     layoutType,
     keyword,
     clickedTabIndexId,
+    clickedTabIndexType,
     isLoadingSetting,
     allowedSorts,
     allowedFilter,
@@ -7336,11 +7717,24 @@ const ResultProduct = (props) => {
     attributesToRetrieve,
     allowedFilterSlider,
     hierarchicalFacetAliases,
-    showOutOfStock
+    showOutOfStock,
+    handleSetInitStates,
+    querySortBy = "",
+    queryPage = "",
+    queryLimit = "",
+    valueFilterPriceChange,
+    setValueFilterPriceChange,
+    valueFilterOnSaleChange,
+    setValueFilterOnSaleChange,
+    valueFilterSliderOthers,
+    setValueFilterSliderOthers,
+    usePublishedFilter,
+    tabs,
+    initStatesFirstTime,
+    setInitStatesFirstTime,
+    allowedTabs,
+    setAllowedTabs
   } = props || {};
-  const querySortBy = (query == null ? void 0 : query.sortBy) ? query.sortBy : DEFAULT_QUERY_PARAM.SORT_BY;
-  const queryPage = (query == null ? void 0 : query.page) ? query.page : DEFAULT_QUERY_PARAM.PAGE;
-  const queryLimit = (query == null ? void 0 : query.limit) ? query.limit : DEFAULT_QUERY_PARAM.LIMIT;
   const { collectionId, collectionName } = params || {};
   const isLoadMore = ["load_more", "infinite_scroll"].includes((_a = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _a.pagination_type);
   const [isLoadingProduct, setIsLoadingProduct] = React__default.useState(!propsData);
@@ -7348,11 +7742,9 @@ const ResultProduct = (props) => {
   const [clickedSortId, setClickedSortId] = React__default.useState(defaultSort || "");
   const [clickedLimitId, setClickedLimitId] = React__default.useState(Number((searchParams == null ? void 0 : searchParams.get(queryLimit)) || defaultLimit || DEFAULT_LIMIT_VALUE[0]));
   const [clickedOpenFilters, setClickedOpenFilters] = React__default.useState(
-    (allowedFilter == null ? void 0 : allowedFilter.length) ? allowedFilter.map((props2, index) => {
-      const { value, settings: settings2 } = props2;
-      const { collapse } = settings2 || {};
-      return collapse ? null : `${value}-${index}`;
-    }).filter((item) => item) : []
+    keyOpenFilters({
+      items: allowedFilter
+    })
   );
   const [triggerClickedFacets, setTriggerClickedFacets] = React__default.useState(false);
   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) || []);
@@ -7360,9 +7752,6 @@ const ResultProduct = (props) => {
   const [currentPage, setCurrentPage] = React__default.useState(Number(searchParams == null ? void 0 : searchParams.get(queryPage)) && !isLoadMore ? Number(searchParams == null ? void 0 : searchParams.get(queryPage)) : 1);
   const [totalPage, setTotalPage] = React__default.useState(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 [valueFilterOnSaleChange, setValueFilterOnSaleChange] = React__default.useState([]);
-  const [valueFilterSliderOthers, setValueFilterSliderOthers] = React__default.useState({});
   const [handleSearchResultFirstTime, setHandleSearchResultFirstTime] = React__default.useState(true);
   const [searchFacetDistribution, setSearchFacetDistribution] = React__default.useState({});
   const [isLoadingButtonLoadMore, setIsLoadingButtonLoadMore] = React__default.useState(false);
@@ -7385,7 +7774,6 @@ const ResultProduct = (props) => {
     hidden_ids: hierarchical_collections_hidden_ids,
     structure: hierarchical_collections_structure
   } = hierarchicalCollectionsSettings || {};
-  const { money_format } = generalDataSettings || {};
   const { button_load_more, button_loading, mobile_sort_placeholder } = (generalDataSettings == null ? void 0 : generalDataSettings.languages) || {};
   const summaryTextGenerator = (totalResult) => {
     var _a2;
@@ -7440,12 +7828,12 @@ const ResultProduct = (props) => {
     ...filter_title_font_weight && { fontWeight: filter_title_font_weight },
     ...filter_title_text_transform && { textTransform: filter_title_text_transform }
   };
-  const filter_option_style = {
+  ({
     ...filter_option_color && { color: filter_option_color },
     ...filter_option_font_size && { fontSize: filter_option_font_size },
     ...filter_option_font_weight && { fontWeight: filter_option_font_weight },
     ...filter_option_text_transform && { textTransform: filter_option_text_transform }
-  };
+  });
   ({
     ...filter_button_text_color && { color: filter_button_text_color },
     ...filter_button_border_color && { borderColor: filter_button_border_color },
@@ -7481,98 +7869,140 @@ const ResultProduct = (props) => {
     }).toString();
     window.history.pushState(null, "", `${document.location.pathname}${(newQueryString == null ? void 0 : newQueryString.length) ? `?${newQueryString}` : ""}`);
   };
-  const handleChangeSort = (value) => {
+  const handleChangeSort = React__default.useCallback((value) => {
     const searchParams2 = new URLSearchParams(document.location.search);
     searchParams2.set(querySortBy, value);
     setClickedSortId(value);
     window.history.pushState(null, "", `${document.location.pathname}?${searchParams2.toString()}`);
-  };
-  const handleChangeLimit = (value) => {
+  }, []);
+  const handleChangeLimit = React__default.useCallback((value) => {
     const searchParams2 = new URLSearchParams(document.location.search);
     searchParams2.set(queryLimit, String(value));
     setClickedLimitId(Number(value));
     localStorage == null ? void 0 : localStorage.setItem(LOCAL_STORAGE_KEY.LIMIT_PRODUCT, value);
     window.history.pushState(null, "", `${document.location.pathname}?${searchParams2.toString()}`);
-  };
-  const handleOpenFilterVertical = (id) => {
-    let valueClickedOpenFilters = clickedOpenFilters;
-    if (valueClickedOpenFilters.includes(id)) {
-      const findIndex = valueClickedOpenFilters.indexOf(id);
-      if (findIndex > -1)
-        valueClickedOpenFilters.splice(findIndex, 1);
-    } else {
-      valueClickedOpenFilters.push(id);
-    }
-    setClickedOpenFilters(valueClickedOpenFilters);
-    setTimeout(() => {
-      setSeparatedFilterItem == null ? void 0 : setSeparatedFilterItem((old) => {
-        const fixState = {
-          ...old,
-          [id]: null
-        };
-        return fixState;
-      });
-    }, 100);
-  };
-  const handleFilterReset = () => {
+  }, []);
+  const handleOpenFilterVertical = React__default.useCallback(
+    (id) => {
+      let valueClickedOpenFilters = clickedOpenFilters;
+      if (valueClickedOpenFilters.includes(id)) {
+        const findIndex = valueClickedOpenFilters.indexOf(id);
+        if (findIndex > -1)
+          valueClickedOpenFilters.splice(findIndex, 1);
+      } else {
+        valueClickedOpenFilters.push(id);
+      }
+      setClickedOpenFilters(valueClickedOpenFilters);
+      setTimeout(() => {
+        setSeparatedFilterItem == null ? void 0 : setSeparatedFilterItem((old) => {
+          const fixState = {
+            ...old,
+            [id]: null
+          };
+          return fixState;
+        });
+      }, 100);
+    },
+    [clickedOpenFilters]
+  );
+  const handleFilterReset = React__default.useCallback(() => {
     setClickedFacets == null ? void 0 : setClickedFacets({});
     setTriggerClickedFacets(!triggerClickedFacets);
     handleQueryStringFilter({});
-    setValueFilterPriceChange([]);
-    setValueFilterOnSaleChange([]);
-    setValueFilterSliderOthers({});
-  };
-  const handleFilterChange = ({ parentId, value, force = false }) => {
-    var _a2;
-    let facets2 = [value];
-    let isRange = allowedFilterSlider == null ? void 0 : allowedFilterSlider.includes(parentId);
-    let isHierarchical = hierarchicalFacetAliases == null ? void 0 : hierarchicalFacetAliases.includes(parentId);
-    if (clickedFacets) {
-      if (force) {
-        facets2 = [value];
-      } else {
-        if ((_a2 = clickedFacets[parentId]) == null ? void 0 : _a2.includes(value)) {
-          facets2 = clickedFacets[parentId].filter((facet) => facet !== value);
-          if (isHierarchical)
-            facets2 = facets2.filter((facet) => !facet.startsWith(value));
+    setValueFilterPriceChange == null ? void 0 : setValueFilterPriceChange([]);
+    setValueFilterOnSaleChange == null ? void 0 : setValueFilterOnSaleChange([]);
+    setValueFilterSliderOthers == null ? void 0 : setValueFilterSliderOthers({});
+  }, [triggerClickedFacets]);
+  const handleFilterChange = React__default.useCallback(
+    ({ parentId, value, force = false }) => {
+      var _a2;
+      let facets2 = [value];
+      let isRange = allowedFilterSlider == null ? void 0 : allowedFilterSlider.includes(parentId);
+      let isHierarchical = hierarchicalFacetAliases == null ? void 0 : hierarchicalFacetAliases.includes(parentId);
+      if (clickedFacets) {
+        if (force) {
+          facets2 = [value];
         } else {
-          if (isRange) {
-            if (clickedFacets[parentId], clickedFacets[parentId] === value) {
-              facets2 = [];
-              if (parentId === "variants.price") {
-                setValueFilterPriceChange([]);
-              } else if (parentId === "variants.sale_percent") {
-                setValueFilterOnSaleChange([]);
+          if ((_a2 = clickedFacets[parentId]) == null ? void 0 : _a2.includes(value)) {
+            facets2 = clickedFacets[parentId].filter((facet) => facet !== value);
+            if (isHierarchical)
+              facets2 = facets2.filter((facet) => !facet.startsWith(value));
+          } else {
+            if (isRange) {
+              if (clickedFacets[parentId], clickedFacets[parentId] === value) {
+                facets2 = [];
+                if (parentId === "variants.price") {
+                  setValueFilterPriceChange == null ? void 0 : setValueFilterPriceChange([]);
+                } else if (parentId === "variants.sale_percent") {
+                  setValueFilterOnSaleChange == null ? void 0 : setValueFilterOnSaleChange([]);
+                } else {
+                  setValueFilterSliderOthers == null ? void 0 : setValueFilterSliderOthers((prevState) => ({ ...prevState, [parentId]: [] }));
+                }
               } else {
-                setValueFilterSliderOthers((prevState) => ({ ...prevState, [parentId]: [] }));
+                facets2 = (value == null ? void 0 : value.length) === 1 ? [...value, ...value] : value;
               }
             } else {
-              facets2 = (value == null ? void 0 : value.length) === 1 ? [...value, ...value] : value;
+              facets2 = clickedFacets[parentId] ? [...clickedFacets[parentId], value] : [value];
             }
-          } else {
-            facets2 = clickedFacets[parentId] ? [...clickedFacets[parentId], value] : [value];
           }
         }
       }
-    }
-    let valueClickedFacets = {
-      ...clickedFacets,
-      ...{
-        [parentId]: facets2
-      }
-    };
-    let handleQueryStringFilterProp = valueClickedFacets;
-    if (Object.hasOwn(handleQueryStringFilterProp, "variants.inventory_quantity"))
-      handleQueryStringFilterProp == null ? true : delete handleQueryStringFilterProp["variants.inventory_quantity"];
-    handleQueryStringFilter(handleQueryStringFilterProp);
-    setClickedFacets == null ? void 0 : setClickedFacets(valueClickedFacets);
-    setTriggerClickedFacets(!triggerClickedFacets);
-  };
+      let valueClickedFacets = {
+        ...clickedFacets,
+        ...{
+          [parentId]: facets2
+        }
+      };
+      let handleQueryStringFilterProp = valueClickedFacets;
+      if (Object.hasOwn(handleQueryStringFilterProp, "variants.inventory_quantity"))
+        handleQueryStringFilterProp == null ? true : delete handleQueryStringFilterProp["variants.inventory_quantity"];
+      handleQueryStringFilter(handleQueryStringFilterProp);
+      setClickedFacets == null ? void 0 : setClickedFacets(valueClickedFacets);
+      setTriggerClickedFacets(!triggerClickedFacets);
+    },
+    [allowedFilterSlider, hierarchicalFacetAliases, clickedFacets, triggerClickedFacets]
+  );
   const handleSearchResultData = (props2) => {
-    const { isLoadMore: isLoadMore2 = false, result, onSearch } = props2;
+    var _a2;
+    const { isLoadMore: isLoadMore2 = false, result: resultProp, onSearch } = props2;
+    const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
+    const { index_product } = INSTANT_SEARCH_SETTING || {};
+    const isFirstTimeOrOnSearch = handleSearchResultFirstTime && initStatesFirstTime || onSearch;
+    const resultData = layoutType === "default" && isFirstTimeOrOnSearch ? resultProp == null ? void 0 : resultProp.results : resultProp;
+    const result = layoutType === "default" && isFirstTimeOrOnSearch ? (_a2 = resultData == null ? void 0 : resultData.find) == null ? void 0 : _a2.call(resultData, ({ indexUid }) => indexUid.includes(index_product)) : resultData;
     if (!result)
       return;
     const { hits, processingTimeMs, totalHits, totalPages, facetDistribution } = result;
+    if (isFirstTimeOrOnSearch) {
+      handleSetInitStates == null ? void 0 : handleSetInitStates({
+        results: resultData,
+        data: INSTANT_SEARCH_SETTING,
+        callback: ({ valueAllowedFilter }) => {
+          if (handleSearchResultFirstTime || onSearch && !(clickedOpenFilters == null ? void 0 : clickedOpenFilters.length)) {
+            setClickedOpenFilters(
+              keyOpenFilters({
+                items: valueAllowedFilter
+              })
+            );
+          }
+        }
+      });
+    } else {
+      if (allowedTabs == null ? void 0 : allowedTabs.length) {
+        setAllowedTabs == null ? void 0 : setAllowedTabs(
+          allowedTabs.map((tab) => {
+            const { index, total } = tab;
+            let isCurrentIndex = index.includes(clickedTabIndexId);
+            return {
+              ...tab,
+              ...{
+                total: isCurrentIndex ? totalHits : total
+              }
+            };
+          })
+        );
+      }
+    }
     if (onSearch && (keyword == null ? void 0 : keyword.length)) {
       searchTrigger({
         keyword,
@@ -7594,7 +8024,7 @@ const ResultProduct = (props) => {
     var _a2, _b2;
     if (!clickedTabIndexId)
       return;
-    const { isLoadMore: isLoadMore2 = false, isReplaceData = false } = props2;
+    const { isLoadMore: isLoadMore2 = false, isReplaceData = false, onSearch } = props2;
     if (isReplaceData) {
       setCurrentPage(1);
       setSearchResult([]);
@@ -7605,56 +8035,48 @@ const ResultProduct = (props) => {
     }
     setIsLoading(isReplaceData ? true : !isLoadMore2);
     let response;
-    let filter = createQueryFilter({
-      facets,
-      facetsQueryStringObject: clickedFacets,
-      callback: (facetsQueryStringObject) => {
-        setClickedFacets == null ? void 0 : setClickedFacets(facetsQueryStringObject);
-        if (facetsQueryStringObject["variants.price"])
-          setValueFilterPriceChange(facetsQueryStringObject["variants.price"]);
-        if (facetsQueryStringObject["variants.sale_percent"])
-          setValueFilterOnSaleChange(facetsQueryStringObject["variants.sale_percent"]);
-        allowedFilterSlider == null ? void 0 : allowedFilterSlider.map((filterSlider) => {
-          if (!filterSlider || filterSlider && ["variants.price", "variants.sale_percent"].includes(filterSlider))
-            return;
-          if (facetsQueryStringObject[filterSlider])
-            setValueFilterSliderOthers((prevState) => ({ ...prevState, [filterSlider]: facetsQueryStringObject[filterSlider] }));
-        });
-      },
-      separator: hierarchical_separator,
-      separatorCollection: hierarchical_collections_separator,
-      additional: [
-        (hiddenTags == null ? void 0 : hiddenTags.length) ? `'tags' NOT IN ${JSON.stringify(hiddenTags)}` : null,
-        collectionId ? `'collections.id' = '${collectionId}'` : null,
-        !showOutOfStock ? `'availability' IN ${JSON.stringify(["in stock"])}` : null
-      ],
-      allowedFilterSlider,
-      hierarchicalFacetAliases,
-      defaultFilterItems
-    });
     let sort = soldProductAtEnd ? ["availability:asc"] : [];
     if (clickedSortId)
       sort.push(clickedSortId);
-    let body = {
-      q: keyword,
-      sort,
-      page: isReplaceData ? 1 : currentPage,
-      hitsPerPage: clickedLimitId,
-      facets,
-      attributesToRetrieve,
-      filter
-    };
     if (propsData && handleSearchResultFirstTime) {
       response = (_b2 = (_a2 = propsData == null ? void 0 : propsData.result) == null ? void 0 : _a2.results) == null ? void 0 : _b2[0];
-      setHandleSearchResultFirstTime(false);
-    } else
-      response = await search(clickedTabIndexId, body);
+    } else {
+      response = await handleSearchResponse({
+        layoutType,
+        clickedTabIndexId,
+        clickedTabIndexType,
+        keyword,
+        sort,
+        page: isReplaceData ? 1 : currentPage,
+        limit: clickedLimitId,
+        isUseMultiSearch: handleSearchResultFirstTime && initStatesFirstTime || onSearch,
+        facets,
+        attributesToRetrieve,
+        clickedFacets,
+        setClickedFacets,
+        allowedFilterSlider,
+        hierarchicalFacetAliases,
+        defaultFilterItems,
+        setValueFilterPriceChange,
+        setValueFilterOnSaleChange,
+        setValueFilterSliderOthers,
+        collectionId,
+        hiddenTags,
+        showOutOfStock,
+        hierarchicalProductTypeSettings,
+        hierarchicalCollectionsSettings,
+        usePublishedFilter,
+        tabs
+      });
+    }
+    setHandleSearchResultFirstTime(false);
+    setInitStatesFirstTime == null ? void 0 : setInitStatesFirstTime(false);
     handleSearchResultData({
       result: response,
       ...props2
     });
   };
-  const handlePageChange = (page) => {
+  const handlePageChange = React__default.useCallback((page) => {
     const searchParams2 = new URLSearchParams(document.location.search);
     searchParams2.set(queryPage, String(page));
     searchParams2.set(queryLimit, String(clickedLimitId));
@@ -7667,12 +8089,12 @@ const ResultProduct = (props) => {
       });
     }, 200);
     window.history.pushState(null, "", `${document.location.pathname}?${searchParams2.toString()}`);
-  };
-  const handleLoadMore = () => {
+  }, []);
+  const handleLoadMore = React__default.useCallback(() => {
     setCurrentPage(currentPage + 1);
     setIsLoadingButtonLoadMore(true);
     setIsReplaceWidgetList == null ? void 0 : setIsReplaceWidgetList(true);
-  };
+  }, []);
   React__default.useEffect(() => {
     var _a2, _b2, _c2, _d2;
     if (typeof window !== "undefined") {
@@ -7750,93 +8172,6 @@ const ResultProduct = (props) => {
     if ((_a2 = filter == null ? void 0 : filter.settings) == null ? void 0 : _a2.keep_counter)
       keepCounterFacets.push(filter == null ? void 0 : filter.value);
   });
-  const facetBlockSelected = ({ label, name, value: valueProp, index }) => {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
-    let value = valueProp;
-    if (name === HIERARCHICAL_FACET_OBJECT_ALIASES.collections) {
-      if ((_a2 = String(value)) == null ? void 0 : _a2.includes(hierarchical_collections_separator)) {
-        let arrValue = String(value).split(hierarchical_collections_separator);
-        value = (arrValue == null ? void 0 : arrValue.length) ? arrValue.map((item) => {
-          var _a3;
-          return ((_a3 = parseFacetObject({ facet: item })) == null ? void 0 : _a3.collection_title) || item;
-        }).join(hierarchical_collections_separator) : valueProp;
-      } else {
-        value = ((_b2 = parseFacetObject({ facet: valueProp })) == null ? void 0 : _b2.collection_title) || valueProp;
-      }
-    }
-    let valueText = (languageSettings == null ? void 0 : languageSettings[value]) || value;
-    let isRange = allowedFilterSlider == null ? void 0 : allowedFilterSlider.includes(name);
-    let getLabel = label;
-    let getSettings = {};
-    let isPriceValue = false;
-    let isSalePercent = false;
-    if (name === "variants.price") {
-      isPriceValue = true;
-    } else if (name === "variants.sale_percent") {
-      isSalePercent = true;
-    }
-    if (defaultFilterItems == null ? void 0 : defaultFilterItems.length) {
-      defaultFilterItems.map((defaultFilterItem) => {
-        const { label: defaultFilterItemLabel, items, settings: defaultFilterItemSettings } = defaultFilterItem;
-        if (items == null ? void 0 : items.includes(value)) {
-          getLabel = defaultFilterItemLabel;
-          getSettings = defaultFilterItemSettings;
-        }
-      });
-    }
-    (_c2 = getSettings == null ? void 0 : getSettings.delete_prefix) == null ? void 0 : _c2.map((deletePrefix) => {
-      if (String(valueText).startsWith(deletePrefix))
-        valueText = String(valueText).replace(deletePrefix, "");
-    });
-    if (isRange) {
-      const getValueRange = new Set(value).size === 1 ? [value[0]] : value;
-      valueText = (_d2 = getValueRange == null ? void 0 : getValueRange.map((valueItem) => isPriceValue ? shopifyFormatMoney(valueItem * 100, money_format) : isSalePercent ? `${valueItem}%` : valueItem)) == null ? void 0 : _d2.join(" - ");
-    } else {
-      valueText = (_e2 = String(valueText)) == null ? void 0 : _e2.replaceAll(hierarchical_collections_separator, " > ");
-    }
-    valueText = (_f2 = String(valueText)) == null ? void 0 : _f2.replaceAll("_", " ");
-    let aliases = {};
-    let aliasValue = "";
-    let aliasSeparator = "";
-    if (name === HIERARCHICAL_FACET_OBJECT_ALIASES.collections) {
-      aliases = settings.collectionAliases || {};
-      aliasSeparator = hierarchicalCollectionsSettings.separator;
-    }
-    if (name === HIERARCHICAL_FACET_OBJECT_ALIASES.product_type) {
-      aliases = settings.productTypeAliases || {};
-      aliasSeparator = hierarchicalProductTypeSettings.separator;
-    }
-    if ([HIERARCHICAL_FACET_OBJECT_ALIASES.collections, HIERARCHICAL_FACET_OBJECT_ALIASES.product_type].includes(name) && aliasSeparator) {
-      const splitedValues = value.split(aliasSeparator);
-      let newSplitedValues = [];
-      for (const splitedValue of splitedValues) {
-        newSplitedValues.push(aliases[splitedValue.trim()] || splitedValue);
-      }
-      aliasValue = newSplitedValues.join(" > ");
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-refine-selected", style: filter_option_style, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-list", dangerouslySetInnerHTML: { __html: `${getLabel}: ${aliasValue || valueText}` } }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "span",
-        {
-          className: "sledge-instant-search__result-filter-item-refine-title-clear",
-          onClick: () => handleFilterChange({
-            parentId: name,
-            value
-          }),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 12, height: 12, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
-              fill: "currentColor",
-              fillRule: "evenodd",
-              clipRule: "evenodd"
-            }
-          ) })
-        }
-      )
-    ] }, index);
-  };
   const filterSettings = ({
     filter,
     scrollElementSelector
@@ -7944,12 +8279,24 @@ const ResultProduct = (props) => {
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-item-refine-selected-flex", children: dataClickedFacets.map((itemClickedFacet, index) => {
       const { label, name, value } = itemClickedFacet;
-      return facetBlockSelected({
-        label,
-        name,
-        value,
-        index
-      });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FacetBlockSelected,
+        {
+          label,
+          name,
+          value,
+          index,
+          defaultFilterItems,
+          generalDataSettings,
+          languageSettings,
+          hierarchicalCollectionsSettings,
+          hierarchicalProductTypeSettings,
+          displaySettings,
+          settings,
+          handleFilterChange,
+          allowedFilterSlider
+        }
+      );
     }) })
   ] }) : null;
   const filterVerticalComponents = ({ filterLayoutType }) => allowedFilter == null ? void 0 : allowedFilter.map((filter, indexFilter) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -8026,29 +8373,29 @@ const ResultProduct = (props) => {
         ),
         dataClickedFacets.map((itemClickedFacet, index) => {
           const { label, name, value } = itemClickedFacet;
-          return facetBlockSelected({
-            label,
-            name,
-            value,
-            index
-          });
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FacetBlockSelected,
+            {
+              label,
+              name,
+              value,
+              index,
+              defaultFilterItems,
+              generalDataSettings,
+              languageSettings,
+              hierarchicalCollectionsSettings,
+              hierarchicalProductTypeSettings,
+              displaySettings,
+              settings,
+              handleFilterChange,
+              allowedFilterSlider
+            }
+          );
         })
       ] }) : null
     ] }) }) }) : null;
   };
-  const searchInputFieldComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SearchInputField,
-    {
-      type: "text",
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
-      placeholder: (language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product) || "Search products...",
-      value: keyword,
-      onChange: ({ value }) => handleChangeKeyword == null ? void 0 : handleChangeKeyword(value),
-      onResetField: () => handleChangeKeyword == null ? void 0 : handleChangeKeyword(""),
-      className: "sledge-instant-search__result-data-keyword-form",
-      withClearField: true
-    }
-  );
+  const searchInputFieldComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { placeholder: language_search_form_placeholder == null ? void 0 : language_search_form_placeholder.product, value: keyword, handleChangeSearch: handleChangeKeyword });
   const renderFilterLayoutOnMobile = () => {
     var _a2;
     switch ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.mobile_layout) {
@@ -8088,7 +8435,7 @@ const ResultProduct = (props) => {
     ),
     ((_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) === "horizontal" && (allowedFilter == null ? void 0 : allowedFilter.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile", children: filterHorizontalBlockComponent({ deviceType: "desktop" }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_s = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _s.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.enable_on_search) && ((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.layout) === "vertical" && !hideFilterWhenOneValue ? !(allowedFilter == null ? void 0 : allowedFilter.find(({ display }) => (display == null ? void 0 : display.toLowerCase()) === "tree")) && isFirstLoading || (allowedFilter == null ? void 0 : allowedFilter.find(({ display }) => (display == null ? void 0 : display.toLowerCase()) === "tree")) && isLoadingProduct ? /* @__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: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_t = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _t.enable_on_search) && ((_u = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _u.layout) === "vertical" && !hideFilterWhenOneValue ? !(allowedFilter == null ? void 0 : allowedFilter.find(({ display }) => (display == null ? void 0 : display.toLowerCase()) === "tree")) && isFirstLoading || (allowedFilter == null ? void 0 : allowedFilter.find(({ display }) => (display == null ? void 0 : display.toLowerCase()) === "tree")) && isLoadingProduct ? /* @__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 || handleSearchResultFirstTime ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         filterVerticalSelected,
         filterVerticalComponents({
           filterLayoutType: "standard"
@@ -8114,64 +8461,24 @@ const ResultProduct = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-lg-on-mobile sledge-instant-search__search-field-lg", children: searchInputFieldComponent }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__hide-element-mobile-on-lg sledge-instant-search__filter-horizontal-block-mobile", children: renderFilterLayoutOnMobile() }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-summary-item sledge-instant-search__result-data-summary-select-field", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-select-field-sort", children: [
-                language_sort_by || "Sort by",
-                ":"
-              ] }),
-              allowedSorts && Boolean(allowedSorts == null ? void 0 : allowedSorts.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                SelectField,
-                {
-                  align: "end",
-                  prefixLabel: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "path",
-                    {
-                      d: "M12.6296 4.34737C12.9144 4.34737 13.1497 4.55898 13.1869 4.83354L13.1921 4.90987L13.192 13.7599L15.2892 11.6543C15.5083 11.4341 15.8645 11.4333 16.0847 11.6525C16.2848 11.8517 16.3037 12.1641 16.1408 12.3847L16.0865 12.4479L13.0282 15.5204C13.0097 15.5386 12.991 15.555 12.9712 15.5701L13.0282 15.5204C13.0006 15.5482 12.9708 15.5724 12.9394 15.5932C12.9285 15.6 12.9171 15.607 12.9055 15.6135C12.8946 15.62 12.8837 15.6258 12.8725 15.6311C12.8615 15.6359 12.8504 15.6408 12.8391 15.6454C12.8247 15.6515 12.8099 15.6568 12.795 15.6613C12.7862 15.6637 12.7772 15.6662 12.7681 15.6685C12.7519 15.673 12.7357 15.6763 12.7193 15.6789C12.7116 15.6798 12.7036 15.6809 12.6955 15.6819C12.677 15.6844 12.6587 15.6857 12.6404 15.686C12.6368 15.6857 12.6332 15.6857 12.6296 15.6857L12.6186 15.686C12.6003 15.6857 12.582 15.6844 12.5637 15.6823L12.6296 15.6857C12.5989 15.6857 12.5689 15.6833 12.5396 15.6785C12.5233 15.6763 12.5071 15.673 12.4909 15.6689C12.4824 15.6663 12.4738 15.6639 12.4654 15.6614C12.4493 15.6569 12.4332 15.6512 12.4174 15.6448C12.4088 15.6408 12.4005 15.6372 12.3922 15.6333C12.3793 15.6278 12.3663 15.6211 12.3535 15.6139C12.342 15.6069 12.3307 15.6 12.3196 15.5926C12.3109 15.5875 12.3024 15.5815 12.294 15.5752L12.288 15.5701C12.2682 15.555 12.2494 15.5386 12.2318 15.5209L12.2308 15.5204L9.1725 12.4479C8.95334 12.2278 8.95416 11.8716 9.17434 11.6525C9.3745 11.4532 9.68704 11.4358 9.90687 11.5997L9.96983 11.6543L12.067 13.7614L12.0671 4.90987C12.0671 4.59921 12.3189 4.34737 12.6296 4.34737ZM5.18325 2.3122L5.19421 2.31189C5.21254 2.31224 5.23085 2.31348 5.24908 2.31562L5.18325 2.3122C5.21389 2.3122 5.24396 2.31465 5.27328 2.31937C5.28931 2.32156 5.3054 2.32487 5.32136 2.32889C5.33074 2.33164 5.3403 2.33433 5.34975 2.33725C5.36452 2.34142 5.37882 2.34648 5.39293 2.35213C5.40313 2.35668 5.41346 2.36119 5.42362 2.366C5.4357 2.37123 5.4476 2.37737 5.45931 2.38397C5.46933 2.39014 5.47926 2.39616 5.48898 2.40246C5.49898 2.40841 5.50899 2.41537 5.51882 2.42269L5.582 2.47746L8.64033 5.54996C8.85949 5.77013 8.85867 6.12629 8.63849 6.34545C8.43833 6.54469 8.12579 6.56212 7.90596 6.39822L7.843 6.34361L5.74525 4.23564L5.74575 13.088C5.74575 13.3987 5.49391 13.6505 5.18325 13.6505C4.89848 13.6505 4.66313 13.4389 4.62588 13.1644L4.62075 13.088L4.62025 4.23639L2.52367 6.34361C2.32443 6.54377 2.01197 6.56265 1.79139 6.39977L1.72817 6.34545C1.52801 6.14621 1.50914 5.83376 1.67202 5.61317L1.72633 5.54996L4.78467 2.47746L4.81779 2.44709C4.82557 2.44043 4.83353 2.43399 4.84167 2.42776L4.78467 2.47746C4.81226 2.44974 4.84202 2.42549 4.87341 2.40473C4.88436 2.39791 4.89574 2.39094 4.90738 2.38438C4.91819 2.37787 4.92917 2.37215 4.9403 2.36682C4.95128 2.36196 4.96242 2.35706 4.97375 2.35251C4.98814 2.34636 5.00289 2.34115 5.0178 2.33657C5.02687 2.33414 5.03616 2.33154 5.04555 2.32918C5.06066 2.32503 5.07593 2.32186 5.09129 2.31932C5.10053 2.31817 5.10959 2.31691 5.11871 2.31586C5.13607 2.31348 5.15388 2.31227 5.17171 2.3119C5.17564 2.31224 5.17944 2.3122 5.18325 2.3122Z",
-                      fill: "black"
-                    }
-                  ) }),
-                  options: allowedSorts.map((item) => {
-                    const { label, value } = item;
-                    return {
-                      label,
-                      value
-                    };
-                  }),
-                  value: clickedSortId,
-                  onChange: ({ value }) => handleChangeSort(value),
-                  ...!mobileShowSelectedSort ? {
-                    overridePlaceholderOnMobile: mobile_sort_placeholder || "Sort"
-                  } : {}
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                language_limit || "Limit",
-                ":"
-              ] }),
-              ((_x = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _x.allowed_limit) && Boolean((_z = (_y = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _y.allowed_limit) == null ? void 0 : _z.length) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                SelectField,
-                {
-                  align: "end",
-                  options: displaySettings.search.allowed_limit.map((item) => {
-                    return {
-                      label: item,
-                      value: item
-                    };
-                  }),
-                  value: clickedLimitId,
-                  onChange: ({ value }) => handleChangeLimit(value)
-                }
-              )
-            ] })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Sort,
+              {
+                label: language_sort_by,
+                options: allowedSorts,
+                clickedOption: clickedSortId,
+                handleChangeOption: handleChangeSort,
+                overridePlaceholderOnMobile: !mobileShowSelectedSort ? mobile_sort_placeholder || "Sort" : null
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Limit, { label: language_limit, options: (_x = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _x.allowed_limit, clickedOption: clickedLimitId, handleChangeOption: handleChangeLimit }) })
           ] })
         ] }),
         isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           productGridSkeleton,
           (searchResult == null ? void 0 : searchResult.length) ? paginationComponent : null
         ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          ((_A = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _A.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 }) }),
+          ((_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 }) }),
           (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               ProductGrid,
@@ -8186,9 +8493,9 @@ const ResultProduct = (props) => {
                   };
                 }),
                 setting: {
-                  show_vendor: (_B = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _B.show_vendor,
-                  show_sku: (_C = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _C.show_sku,
-                  show_price: (_D = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _D.show_price,
+                  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,
                   language_button_add_to_cart: language_add_to_cart,
                   language_button_out_of_stock: languageSettings && languageSettings["out of stock"] ? languageSettings["out of stock"] : ""
                 },
@@ -8209,9 +8516,10 @@ const ResultProduct = (props) => {
       ] })
     ] }) })
   ] });
-};
-const ResultCategory = (props) => {
+});
+const ResultCategory = React__default.memo((props) => {
   const {
+    layoutType,
     keyword,
     debouncedKeyword,
     clickedTabIndexId,
@@ -8232,9 +8540,28 @@ const ResultCategory = (props) => {
     isReplaceWidgetList,
     setIsReplaceWidgetList,
     handleChangeKeyword,
-    usePublishedFilter
+    usePublishedFilter,
+    handleSetInitStates,
+    facets,
+    params,
+    clickedFacets,
+    setClickedFacets,
+    allowedFilterSlider,
+    hierarchicalProductTypeSettings,
+    hierarchicalCollectionsSettings,
+    hiddenTags,
+    showOutOfStock,
+    hierarchicalFacetAliases,
+    defaultFilterItems,
+    setValueFilterPriceChange,
+    setValueFilterOnSaleChange,
+    setValueFilterSliderOthers,
+    tabs,
+    initStatesFirstTime,
+    setInitStatesFirstTime,
+    parentPreviousState
   } = props || {};
-  const isTypeCategoryHasPublished = Boolean(usePublishedFilter && clickedTabIndexType && ["collection", "page", "article"].includes(clickedTabIndexType));
+  const { collectionId, collectionName } = params || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
   const [isLoading, setIsLoading] = React__default.useState(true);
   const [searchResult, setSearchResult] = React__default.useState([]);
@@ -8272,9 +8599,22 @@ const ResultCategory = (props) => {
       getSummaryText = getSummaryText.replaceAll(OBJECT_DATA_STRING_KEY.TOTAL_RESULT, totalResult);
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.show_total_products) ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-data-summary-text", children: isSummaryTextFromLanguage ? getSummaryText : defaultSummaryText }) : null });
   };
-  const handleSearchResultData = (result) => {
+  const handleSearchResultData = (props2) => {
+    var _a;
+    const { isReplaceData = false, result: resultProp, onSearch } = props2;
+    const INSTANT_SEARCH_SETTING = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
+    const handleSearchResultFirstTime = isFirstLoading;
+    const isFirstTimeOrOnSearch = handleSearchResultFirstTime && initStatesFirstTime || onSearch;
+    const resultData = isFirstTimeOrOnSearch ? resultProp == null ? void 0 : resultProp.results : resultProp;
+    const result = isFirstTimeOrOnSearch ? (_a = resultData == null ? void 0 : resultData.find) == null ? void 0 : _a.call(resultData, ({ indexUid }) => indexUid.includes(clickedTabIndexId)) : resultData;
     if (!result)
       return;
+    if (isFirstTimeOrOnSearch) {
+      handleSetInitStates == null ? void 0 : handleSetInitStates({
+        results: resultData,
+        data: INSTANT_SEARCH_SETTING
+      });
+    }
     const { hits, processingTimeMs, totalHits, totalPages } = result;
     setIsFirstLoading(false);
     setIsLoading(false);
@@ -8285,26 +8625,44 @@ const ResultCategory = (props) => {
     setTotalSearchResult(totalHits || 0);
     setSummaryText(summaryTextGenerator(totalHits));
   };
-  const handleSearchResult = async (isReplaceData = false) => {
+  const handleSearchResult = async (props2) => {
+    const { isReplaceData = false, onSearch } = props2;
+    const handleSearchResultFirstTime = isFirstLoading;
     if (!clickedTabIndexId)
       return;
     if (isReplaceData)
       setCurrentPage(1);
-    let filter = "";
-    if (isTypeCategoryHasPublished) {
-      filter = DEFAULT_QUERY_PUBLISHED_FILTER;
-    }
     setIsLoading(true);
-    let response;
-    let body = {
-      q: keyword,
-      sort: [],
+    let response = await handleSearchResponse({
+      layoutType,
+      clickedTabIndexId,
+      clickedTabIndexType,
+      keyword,
       page: isReplaceData ? 1 : currentPage,
-      hitsPerPage: 12,
-      filter
-    };
-    response = await search(clickedTabIndexId, body);
-    handleSearchResultData(response);
+      limit: 12,
+      isUseMultiSearch: handleSearchResultFirstTime && initStatesFirstTime || onSearch,
+      facets,
+      clickedFacets,
+      setClickedFacets,
+      allowedFilterSlider,
+      hierarchicalFacetAliases,
+      defaultFilterItems,
+      setValueFilterPriceChange,
+      setValueFilterOnSaleChange,
+      setValueFilterSliderOthers,
+      collectionId,
+      hiddenTags,
+      showOutOfStock,
+      hierarchicalProductTypeSettings,
+      hierarchicalCollectionsSettings,
+      usePublishedFilter,
+      tabs
+    });
+    setInitStatesFirstTime == null ? void 0 : setInitStatesFirstTime(false);
+    handleSearchResultData({
+      result: response,
+      ...props2
+    });
   };
   const handlePageChange = (page) => {
     setCurrentPage(page);
@@ -8317,25 +8675,34 @@ const ResultCategory = (props) => {
     }, 200);
   };
   React__default.useEffect(() => {
-    handleSearchResult();
-  }, [debouncedKeyword]);
+    let isKeywordChanged = Boolean(parentPreviousState && parentPreviousState.keyword !== keyword);
+    if (isKeywordChanged) {
+      const delayDebounceFn = setTimeout(() => {
+        handleSearchResult({
+          onSearch: true
+        });
+      }, 500);
+      return () => clearTimeout(delayDebounceFn);
+    } else {
+      handleSearchResult({
+        onSearch: false
+      });
+    }
+  }, [keyword]);
   React__default.useEffect(() => {
     let isRefreshSearchResult = Boolean(previousState && (previousState == null ? void 0 : previousState.clickedTabIndexId) !== clickedTabIndexId);
     if (isReplaceWidgetList || isRefreshSearchResult) {
-      handleSearchResult(isRefreshSearchResult);
+      handleSearchResult({
+        isReplaceData: isRefreshSearchResult
+      });
     }
   }, [isReplaceWidgetList, clickedTabIndexId]);
   const searchKeywordComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-keyword sledge-instant-search__result-data-keyword-category", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SearchInputField,
+    Search,
     {
-      type: "text",
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
       placeholder: clickedTabIndexType && language_search_form_placeholder[clickedTabIndexType] ? language_search_form_placeholder[clickedTabIndexType] : `Search ${clickedTabIndexName ? clickedTabIndexName.toLowerCase() : ""}...`,
       value: keyword,
-      onChange: ({ value }) => handleChangeKeyword == null ? void 0 : handleChangeKeyword(value),
-      onResetField: () => handleChangeKeyword == null ? void 0 : handleChangeKeyword(""),
-      className: "sledge-instant-search__result-data-keyword-form",
-      withClearField: true
+      handleChangeSearch: handleChangeKeyword
     }
   ) });
   const summaryTextSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "117px", height: "28px", color: "lighten", rounded: "md" }) });
@@ -8346,30 +8713,31 @@ const ResultCategory = (props) => {
     skeletonLoadingComponent
   ] });
   const ProvideElementLoading = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    searchKeywordComponent,
     summaryTextSkeleton,
     skeletonLoadingComponent
   ] });
   const ProvideElement = (elementProps) => clickedTabIndexType === "collection" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionGrid, { cards: collectionCardsComponent, onAfterRenderCollection, ...elementProps }) : clickedTabIndexType === "page" ? /* @__PURE__ */ jsxRuntimeExports.jsx(PageGrid, { cards: pageCardsComponent, onAfterRenderPage, ...elementProps }) : clickedTabIndexType === "blog" ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlogGrid, { cards: blogCardsComponent, onAfterRenderBlog, ...elementProps }) : clickedTabIndexType === "article" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArticleGrid, { cards: articleCardsComponent, onAfterRenderArticle, ...elementProps }) : null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElementFirstLoading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-category-wrapper", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElementLoading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElementFirstLoading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-category-wrapper", children: [
     searchKeywordComponent,
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary", children: summaryText }),
-    (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElement, { data: searchResult, isComponentJsVersion: isJsVersion }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Pagination,
-        {
-          currentPage,
-          totalPage,
-          totalResult: totalSearchResult,
-          onChange: (page) => handlePageChange(page),
-          pageInfo: language_pagination_info
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultEmpty, { ...props })
-  ] }) }) });
-};
-const ResultEmpty = (props) => {
+    isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElementLoading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary", children: summaryText }),
+      (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElement, { data: searchResult, isComponentJsVersion: isJsVersion }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Pagination,
+          {
+            currentPage,
+            totalPage,
+            totalResult: totalSearchResult,
+            onChange: (page) => handlePageChange(page),
+            pageInfo: language_pagination_info
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultEmpty, { ...props })
+    ] })
+  ] }) });
+});
+const ResultEmpty = React__default.memo((props) => {
   const { languageSettings } = props || {};
   const { title_no_result: language_title_no_result, text_no_result: language_text_no_result } = languageSettings || {};
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-empty", children: [
@@ -8382,7 +8750,7 @@ const ResultEmpty = (props) => {
       }
     )
   ] });
-};
+});
 const SearchWidget = (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;
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);