@sledge-app/react-instant-search 1.0.115 → 1.0.116

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

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, a as $cb5cc270b50c6fcd$export$41fb9f06171c75f4, b as $cb5cc270b50c6fcd$export$602eac185826482c, c as $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, d as $cb5cc270b50c6fcd$export$f39c2d165cd861fe, e as $cb5cc270b50c6fcd$export$21b07c8f274aebd5, f as $67824d98245208a0$export$be92b6f5f03c0fe9, g as $67824d98245208a0$export$adb584737d712b70, h as $e698a72e93240346$export$be92b6f5f03c0fe9, i as $e698a72e93240346$export$adb584737d712b70, k as $faa2e61a3361514f$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$13921ac0cc260818, m as $faa2e61a3361514f$export$9a58ef0d7ad3278c, n as $faa2e61a3361514f$export$6521433ed15a34db, o as $f99a8c78507165f7$export$be92b6f5f03c0fe9, p as $f99a8c78507165f7$export$6d08773d2e66f8f2, q as $f99a8c78507165f7$export$adb584737d712b70, r as $cc7e05a45900e73f$export$6d08773d2e66f8f2, s as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, t as $cc7e05a45900e73f$export$c3468e2714d175fa, u as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, v as $cc7e05a45900e73f$export$41fb9f06171c75f4, w as $cc7e05a45900e73f$export$4c8d1a57a761ef94, x as $cc7e05a45900e73f$export$f04a61298a47a40f, y as $cc7e05a45900e73f$export$602eac185826482c, z as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, A as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, B as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, C as $cc7e05a45900e73f$export$bf1aedc3039c8d63, D as motion, E as client, F as $a093c7e1ec25a057$export$2881499e37b75b9a, G as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, H as $a093c7e1ec25a057$export$41fb9f06171c75f4, I as $a093c7e1ec25a057$export$602eac185826482c, J as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, K as $a093c7e1ec25a057$export$21b07c8f274aebd5, L as $57acba87d6e25586$export$be92b6f5f03c0fe9, M as $57acba87d6e25586$export$d5c6c08dc2d3ca7, N as $57acba87d6e25586$export$9a4e88b92edfce6b, O as $57acba87d6e25586$export$6521433ed15a34db, P as MasonryResponsive, Q as Masonry, R as useEmblaCarousel, S as useVirtualizer, T as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, U as $5d3850c4d0b4e6c7$export$602eac185826482c, V as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, W as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-dc719d80.js";
+import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, a as $cb5cc270b50c6fcd$export$41fb9f06171c75f4, b as $cb5cc270b50c6fcd$export$602eac185826482c, c as $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, d as $cb5cc270b50c6fcd$export$f39c2d165cd861fe, e as $cb5cc270b50c6fcd$export$21b07c8f274aebd5, f as $67824d98245208a0$export$be92b6f5f03c0fe9, g as $67824d98245208a0$export$adb584737d712b70, h as $e698a72e93240346$export$be92b6f5f03c0fe9, i as $e698a72e93240346$export$adb584737d712b70, k as $d94698215c4408a7$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$be92b6f5f03c0fe9, m as $faa2e61a3361514f$export$13921ac0cc260818, n as $faa2e61a3361514f$export$9a58ef0d7ad3278c, o as $faa2e61a3361514f$export$6521433ed15a34db, p as $f99a8c78507165f7$export$be92b6f5f03c0fe9, q as $f99a8c78507165f7$export$6d08773d2e66f8f2, r as $f99a8c78507165f7$export$adb584737d712b70, s as $cc7e05a45900e73f$export$6d08773d2e66f8f2, t as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, u as $cc7e05a45900e73f$export$c3468e2714d175fa, v as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, w as $cc7e05a45900e73f$export$41fb9f06171c75f4, x as $cc7e05a45900e73f$export$4c8d1a57a761ef94, y as $cc7e05a45900e73f$export$f04a61298a47a40f, z as $cc7e05a45900e73f$export$602eac185826482c, A as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, B as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, C as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, D as $cc7e05a45900e73f$export$bf1aedc3039c8d63, E as motion, F as client, G as $d94698215c4408a7$export$a455218a85c89869, H as $d94698215c4408a7$export$7a7fa4424cb20976, I as $d94698215c4408a7$export$f69c19e57285b83a, J as $a093c7e1ec25a057$export$2881499e37b75b9a, K as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, L as $a093c7e1ec25a057$export$41fb9f06171c75f4, M as $a093c7e1ec25a057$export$602eac185826482c, N as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, O as $a093c7e1ec25a057$export$21b07c8f274aebd5, P as $57acba87d6e25586$export$be92b6f5f03c0fe9, Q as $57acba87d6e25586$export$d5c6c08dc2d3ca7, R as $57acba87d6e25586$export$9a4e88b92edfce6b, S as $57acba87d6e25586$export$6521433ed15a34db, T as MasonryResponsive, U as Masonry, V as useEmblaCarousel, W as useVirtualizer, X as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, Y as $5d3850c4d0b4e6c7$export$602eac185826482c, Z as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, _ as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-5ae8da85.js";
 import React__default, { createElement } from "react";
 import { SledgeContext } from "@sledge-app/core";
 import "react-dom";
@@ -176,7 +176,8 @@ const OBJECT_DATA_STRING_KEY = {
   TOTAL_WISHLIST: "{{ total_wishlist }}",
   ACCEPTED_FILETYPE_MEDIA: "{{ accepted_filetype_media }}",
   MAX_SIZE_MEDIA: "{{ max_size_media }}",
-  FILTER_TITLE: "{{ filter_title }}"
+  FILTER_TITLE: "{{ filter_title }}",
+  PRICE_MAX_MONEY_FORMAT: "{{ price_max_money_format }}"
 };
 const ELEMENT_ID = {
   PRODUCT_REVIEW: {
@@ -197,6 +198,7 @@ const HIERARCHICAL_FACET_OBJECT_ALIASES = {
   product_type: "hierarchicalProductType"
 };
 const MAX_LIMIT_HIERARCHICAL = 7;
+const SEPARATOR_HIERARCHICAL_FACET = "---5L3D9E---";
 async function swr(url, options) {
   if (typeof localStorage !== "undefined" && typeof caches !== "undefined" && options.method === "GET" && !(options == null ? void 0 : options.ignoreSWR)) {
     const data = await getData(url);
@@ -289,6 +291,14 @@ function useIsFirstRender() {
   }
   return renderRef.current;
 }
+function useEffectOnChange(callback, dependencies) {
+  const isFirstRender = useIsFirstRender();
+  useEffectCallback(() => {
+    if (isFirstRender)
+      return;
+    callback();
+  }, dependencies);
+}
 const sanitizeDataId = (id) => {
   if (!id)
     return "";
@@ -472,7 +482,11 @@ const getFillRating = ({
 const stripTags = (html) => {
   return html.replace(/(<([^>]+)>)/gi, "");
 };
-const stringToSlug = (text) => text.toLowerCase().replace(/[^\w ]+/g, "").replace(/ +/g, "-");
+const stringToSlug = (text) => {
+  if (!text)
+    return text;
+  return text.toLowerCase().replace(/[^\w ]+/g, "").replace(/ +/g, "-");
+};
 const shopifyFormatMoney = (cents, format) => {
   var _a;
   if (typeof cents == "string") {
@@ -650,52 +664,135 @@ const Checkbox = ({ id, name, value, required, label, checked, labelStyle = {},
 };
 const Slider$1 = "";
 const Slider = (props) => {
-  const { value, textValue = [], min, max, step = 1, setValueCommit, setValueChange } = props;
+  var _a, _b, _c;
+  const {
+    type = "slider",
+    prefixInputRange = "",
+    descriptionInputRange = "",
+    valueFilterSliderChange = [],
+    labelStyle = {},
+    value,
+    textValue = [],
+    min,
+    max,
+    step = 1,
+    setValueCommit,
+    setValueChange,
+    wrapperClassName = "",
+    minMaxClassName = "",
+    minMaxTextClassName = ""
+  } = props;
+  const [inputRangeMin, setInputRangeMin] = React__default.useState(value == null ? void 0 : value[0]);
+  const [inputRangeMax, setInputRangeMax] = React__default.useState((value == null ? void 0 : value[1]) || (value == null ? void 0 : value[0]));
+  const delayInputRangeRef = React__default.useRef(null);
   let content = (textValue == null ? void 0 : textValue.length) ? textValue : value;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    $faa2e61a3361514f$export$be92b6f5f03c0fe9,
-    {
-      className: "sledge__SliderRoot",
-      value,
-      ...typeof min !== "undefined" ? {
-        min
-      } : {},
-      max,
-      step,
-      "aria-label": "Volume",
-      onValueCommit: (valueCommit) => setValueCommit == null ? void 0 : setValueCommit(valueCommit),
-      onValueChange: (valueChange) => setValueChange == null ? void 0 : setValueChange(valueChange),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$13921ac0cc260818, { className: "sledge__SliderTrack", children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$9a58ef0d7ad3278c, { className: "sledge__SliderRange" }) }),
+  const hasMaxValue = (value == null ? void 0 : value.length) && (value == null ? void 0 : value[1]);
+  const FormWrapper = ((_a = String(type)) == null ? void 0 : _a.includes("input_range")) ? $d94698215c4408a7$export$be92b6f5f03c0fe9 : React__default.Fragment;
+  const isTypeInputRange = type === "input_range";
+  const isTypeIncludeSlider = (_b = String(type)) == null ? void 0 : _b.includes("slider");
+  const isTypeIncludeInputRange = (_c = String(type)) == null ? void 0 : _c.includes("input_range");
+  const handleChangeInputRange = ({ event, type: type2 }) => {
+    var _a2;
+    const valueInput = (_a2 = event == null ? void 0 : event.target) == null ? void 0 : _a2.value;
+    const valueCommit = type2 === "min" ? [valueInput || 0, value == null ? void 0 : value[1]] : [value == null ? void 0 : value[0], valueInput || 0];
+    if (type2 === "min") {
+      setInputRangeMin(valueInput);
+    } else {
+      setInputRangeMax(valueInput);
+    }
+    setValueChange == null ? void 0 : setValueChange(valueCommit);
+    if (delayInputRangeRef.current) {
+      clearTimeout(delayInputRangeRef.current);
+    }
+    delayInputRangeRef.current = setTimeout(() => {
+      setValueCommit == null ? void 0 : setValueCommit(valueCommit);
+    }, 500);
+  };
+  useEffectOnChange(() => {
+    if (isTypeIncludeInputRange && !(valueFilterSliderChange == null ? void 0 : valueFilterSliderChange.length)) {
+      setInputRangeMin(value == null ? void 0 : value[0]);
+      setInputRangeMax((value == null ? void 0 : value[1]) || (value == null ? void 0 : value[0]));
+    }
+  }, [valueFilterSliderChange]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__slider-wrapper ${wrapperClassName}`, "data-slider-type": type, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormWrapper, { children: [
+    isTypeIncludeInputRange ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      isTypeInputRange && descriptionInputRange ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__slider-input-range-description", style: labelStyle, children: descriptionInputRange }) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__slider-input-range-wrapper", children: [
+        isTypeInputRange && prefixInputRange ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__slider-input-range-prefix", style: labelStyle, children: prefixInputRange }) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Tooltip,
+          InputField,
           {
-            ...(textValue == null ? void 0 : textValue.length) ? {
-              innerHTMLContent: content[0]
-            } : {
-              content: content[0]
-            },
-            customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
-            wrapTrigger: false,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
+            className: "sledge__slider-input-range-minmax",
+            type: "text",
+            onChange: (event) => handleChangeInputRange({ event, type: "min" }),
+            value: inputRangeMin,
+            style: labelStyle
           }
         ),
-        !value[1] ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Tooltip,
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge__slider-input-range-minmax-separator", children: "-" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          InputField,
           {
-            ...(textValue == null ? void 0 : textValue.length) ? {
-              innerHTMLContent: content[1]
-            } : {
-              content: content[1]
-            },
-            customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
-            wrapTrigger: false,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
+            className: "sledge__slider-input-range-minmax",
+            type: "text",
+            onChange: (event) => handleChangeInputRange({ event, type: "max" }),
+            value: inputRangeMax,
+            style: labelStyle
           }
         )
-      ]
-    }
-  ) });
+      ] })
+    ] }) : null,
+    isTypeIncludeSlider ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        $faa2e61a3361514f$export$be92b6f5f03c0fe9,
+        {
+          className: "sledge__SliderRoot",
+          value,
+          ...typeof min !== "undefined" ? {
+            min
+          } : {},
+          max,
+          step,
+          "aria-label": "Volume",
+          onValueCommit: (valueCommit) => setValueCommit == null ? void 0 : setValueCommit(valueCommit),
+          onValueChange: (valueChange) => setValueChange == null ? void 0 : setValueChange(valueChange),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$13921ac0cc260818, { className: "sledge__SliderTrack", children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$9a58ef0d7ad3278c, { className: "sledge__SliderRange" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Tooltip,
+              {
+                ...(textValue == null ? void 0 : textValue.length) ? {
+                  innerHTMLContent: content[0]
+                } : {
+                  content: content[0]
+                },
+                customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
+                wrapTrigger: false,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
+              }
+            ),
+            hasMaxValue ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Tooltip,
+              {
+                ...(textValue == null ? void 0 : textValue.length) ? {
+                  innerHTMLContent: content[1]
+                } : {
+                  content: content[1]
+                },
+                customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
+                wrapTrigger: false,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
+              }
+            ) : null
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__slider-minmax ${minMaxClassName}`, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__slider-minmax-text ${minMaxTextClassName}`, dangerouslySetInnerHTML: { __html: content[0] } }),
+        hasMaxValue ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__slider-minmax-text ${minMaxTextClassName}`, dangerouslySetInnerHTML: { __html: content[1] } }) : null
+      ] })
+    ] }) : null
+  ] }) });
 };
 const Pagination$1 = "";
 const Pagination = (props) => {
@@ -3051,7 +3148,7 @@ const ProductCard = (props) => {
           defaultSelectedClassChanger();
       }
     }, setSelectedVariant = function(element, value, optionIndex) {
-      var _a2, _b2, _c2, _d;
+      var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
       const parentCard = element.target.offsetParent;
       const selectedInput = parentCard.querySelector(`.sledge__product-grid-card-selected-option[data-product-id='${id}']`);
       setElementAttribute({
@@ -3059,14 +3156,14 @@ const ProductCard = (props) => {
         attributeName: `data-selected-option${optionIndex}`,
         value
       });
-      const option1 = `[data-option-1="${selectedInput.attributes["data-selected-option1"].value}"]`;
-      const option2 = `${selectedInput.attributes["data-selected-option2"] ? `[data-option-2="${selectedInput.attributes["data-selected-option2"].value}"]` : ""}`;
+      const option1 = `[data-option-1="${stringToSlug((_b2 = (_a2 = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _a2["data-selected-option1"]) == null ? void 0 : _b2.value)}"]`;
+      const option2 = `${((_c2 = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _c2["data-selected-option2"]) ? `[data-option-2="${stringToSlug((_e = (_d = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _d["data-selected-option2"]) == null ? void 0 : _e.value)}"]` : ""}`;
       const selectOption = parentCard.querySelector(`select option${option1}${option2}`);
-      const variantId = selectOption.attributes["data-graphql-id"].value;
-      const imageId = (_a2 = selectOption.attributes["data-image-id"]) == null ? void 0 : _a2.value;
-      const inventoryQuantity = (_b2 = selectOption.attributes["data-inventory-quantity"]) == null ? void 0 : _b2.value;
-      const inventoryManagement = (_c2 = selectOption.attributes["data-inventory-management"]) == null ? void 0 : _c2.value;
-      const inventoryPolicy = (_d = selectOption.attributes["data-inventory-policy"]) == null ? void 0 : _d.value;
+      const variantId = (_g = (_f = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _f["data-graphql-id"]) == null ? void 0 : _g.value;
+      const imageId = (_i = (_h = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _h["data-image-id"]) == null ? void 0 : _i.value;
+      const inventoryQuantity = (_k = (_j = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _j["data-inventory-quantity"]) == null ? void 0 : _k.value;
+      const inventoryManagement = (_m = (_l = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _l["data-inventory-management"]) == null ? void 0 : _m.value;
+      const inventoryPolicy = (_o = (_n = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _n["data-inventory-policy"]) == null ? void 0 : _o.value;
       const setOther = () => {
         var _a3, _b3;
         setElementAttribute({
@@ -3253,8 +3350,8 @@ const ProductCard = (props) => {
             /* @__PURE__ */ jsxRuntimeExports.jsx("select", { className: "variant-picker sledge__product-grid-card-variant-picker", children: variants == null ? void 0 : variants.map((variant) => {
               const { title: title2, option1, option2, position, id: id2, admin_graphql_api_id, image_id, inventory_quantity, inventory_management, inventory_policy } = variant;
               let optionAttributes = {
-                "data-option-1": option1,
-                "data-option-2": option2,
+                "data-option-1": stringToSlug(option1),
+                "data-option-2": stringToSlug(option2),
                 "data-inventory-quantity": inventory_quantity,
                 "data-inventory-management": inventory_management,
                 "data-inventory-policy": inventory_policy,
@@ -3425,7 +3522,30 @@ const ProductGrid = (props) => {
   }) });
 };
 const TextAreaField = "";
-const InputField = "";
+const InputField$1 = "";
+const InputField = (props) => {
+  const { className = "", value = "", onChange, required, type, name = "", ...otherProps } = props;
+  const handleChangeField = (e) => {
+    onChange && onChange(e);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__input-field-wrapper ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($d94698215c4408a7$export$a455218a85c89869, { className: "FormField", name, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx($d94698215c4408a7$export$7a7fa4424cb20976, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        className: "sledge__input-field",
+        type,
+        value,
+        onChange: (e) => handleChangeField(e),
+        ...required ? {
+          required
+        } : {},
+        ...otherProps
+      }
+    ) }),
+    required && /* @__PURE__ */ jsxRuntimeExports.jsx($d94698215c4408a7$export$f69c19e57285b83a, { className: "FormMessage", match: "valueMissing", children: "Required field" }),
+    type === "email" && /* @__PURE__ */ jsxRuntimeExports.jsx($d94698215c4408a7$export$f69c19e57285b83a, { className: "FormMessage", match: "typeMismatch", children: "Please fill a valid email address" })
+  ] }) });
+};
 const CollectionGrid$1 = "";
 const CollectionGrid = ({ className = "", data, cards: CardsComponent, isComponentJsVersion, onAfterRenderCollection }) => {
   React__default.useEffect(() => {
@@ -4563,6 +4683,54 @@ const SearchIconWidgetPopup = () => {
     ] })
   ] }) });
 };
+const sortFacets = ({ facets, sortingOrder }) => {
+  if (!(facets == null ? void 0 : facets.length) || !(sortingOrder == null ? void 0 : sortingOrder.length))
+    return facets;
+  const sortRecursively = (objects, orderArray) => {
+    var _a, _b;
+    const isCollectionIdSort = ((_b = (_a = objects == null ? void 0 : objects[0]) == null ? void 0 : _a.parseObject) == null ? void 0 : _b.collection_id) !== void 0;
+    const sortKey = isCollectionIdSort ? "collection_id" : "name";
+    const objectsMap = new Map(objects.map((obj) => [isCollectionIdSort ? obj.parseObject[sortKey] : obj[sortKey], obj]));
+    const sorted = [];
+    const usedKeys = /* @__PURE__ */ new Set();
+    orderArray.forEach((sortItem) => {
+      var _a2, _b2, _c;
+      const lookupKey = isCollectionIdSort ? sortItem == null ? void 0 : sortItem.id : sortItem;
+      const matchingObject = objectsMap.get(lookupKey);
+      if (lookupKey && matchingObject) {
+        usedKeys.add(lookupKey);
+        const hasMatchingChildren = ((_a2 = matchingObject == null ? void 0 : matchingObject.children) == null ? void 0 : _a2.length) > 0 && ((_b2 = sortItem == null ? void 0 : sortItem.children) == null ? void 0 : _b2.length) > 0;
+        sorted.push({
+          ...matchingObject,
+          ...hasMatchingChildren ? {
+            children: hasMatchingChildren ? sortRecursively(matchingObject == null ? void 0 : matchingObject.children, sortItem == null ? void 0 : sortItem.children) : ((_c = matchingObject == null ? void 0 : matchingObject.children) == null ? void 0 : _c.length) ? matchingObject == null ? void 0 : matchingObject.children : []
+          } : {}
+        });
+      }
+    });
+    objects.forEach((obj) => {
+      const objKey = isCollectionIdSort ? obj.parseObject[sortKey] : obj[sortKey];
+      if (!usedKeys.has(objKey)) {
+        sorted.push(obj);
+      }
+    });
+    return sorted;
+  };
+  try {
+    const rootObjects = facets;
+    const rootSortOrder = sortingOrder;
+    const sorted = sortRecursively(rootObjects, rootSortOrder);
+    return sorted;
+  } catch (error) {
+    return facets;
+  }
+};
+const parseFacetObject = ({ facet = "" }) => {
+  var _a, _b;
+  if (facet && ((_a = String(facet)) == null ? void 0 : _a.includes(SEPARATOR_HIERARCHICAL_FACET)))
+    return JSON.parse((_b = String(facet)) == null ? void 0 : _b.replaceAll(SEPARATOR_HIERARCHICAL_FACET, ","));
+  return null;
+};
 const detectQueryStringFilter = ({ facets, facetsQueryStringObject, callback }) => {
   const searchParams = new URLSearchParams(document.location.search);
   const searchParamsObject = Object.fromEntries(searchParams);
@@ -4674,10 +4842,12 @@ const createHierarchicalFacet = ({
   hiddensCollection,
   displaySettings,
   searchFacetDistribution,
-  hierarchicalFacetAliases
+  hierarchicalFacetAliases,
+  hierarchicalCollectionsSettings
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const { hide_unrelated } = filter;
+  const { hidden_ids: hierarchical_collections_hidden_ids, structure: hierarchical_collections_structure } = hierarchicalCollectionsSettings || {};
   const isCollection = (_a = String(indexValue)) == null ? void 0 : _a.includes(HIERARCHICAL_FACET_OBJECT_ALIASES.collections);
   const hiddensProp = isCollection ? hiddensCollection : hiddens;
   let arrSelectedFacetHierarchical = detectArrFacetHierarchical({
@@ -4705,36 +4875,52 @@ const createHierarchicalFacet = ({
     let parent = hierarchicalFacets;
     for (let facet of facets) {
       const names = facet.name.split(isCollection ? separatorCollection : separator);
+      const name = (_d = (_c = names == null ? void 0 : names[names.length - 1]) == null ? void 0 : _c.trim) == null ? void 0 : _d.call(_c);
+      const parseObject = parseFacetObject({ facet: name });
+      const isFacetObject = Boolean(parseObject == null ? void 0 : parseObject.collection_id);
       const selectedFacetHierarchical = arrSelectedFacetHierarchical[indexValue][`lvl${level}`];
       const isWhenSelectedHideSiblings = hide_unrelated && (selectedFacetHierarchical == null ? void 0 : selectedFacetHierarchical.length) && !selectedFacetHierarchical.includes(facet.value);
-      const isHidden = hiddensProp == null ? void 0 : hiddensProp.find((hierarchical_hidden) => {
-        var _a2;
-        return (_a2 = facet.value) == null ? void 0 : _a2.startsWith(hierarchical_hidden);
-      });
+      let isHidden = false;
+      if (isCollection && isFacetObject && (hierarchical_collections_hidden_ids == null ? void 0 : hierarchical_collections_hidden_ids.length)) {
+        isHidden = hierarchical_collections_hidden_ids == null ? void 0 : hierarchical_collections_hidden_ids.includes(parseObject == null ? void 0 : parseObject.collection_id);
+      } else {
+        isHidden = hiddensProp == null ? void 0 : hiddensProp.find((hierarchical_hidden) => {
+          var _a2;
+          return (_a2 = facet.value) == null ? void 0 : _a2.startsWith(hierarchical_hidden);
+        });
+      }
       if (isWhenSelectedHideSiblings || isHidden)
         continue;
       if (level > 0) {
         parent = hierarchicalFacets;
         for (let i = 0; i < names.length - 1; i++) {
           let foundIndex = parent == null ? void 0 : parent.findIndex((f) => f.name.trim().toLowerCase() === names[i].trim().toLowerCase());
-          parent = (_c = parent == null ? void 0 : parent[foundIndex]) == null ? void 0 : _c.children;
+          parent = (_e = parent == null ? void 0 : parent[foundIndex]) == null ? void 0 : _e.children;
         }
         parent == null ? void 0 : parent.push({
           ...facet,
-          name: names[names.length - 1].trim(),
+          name,
           level,
+          parseObject,
           children: []
         });
       }
       if (level === 0)
         parent == null ? void 0 : parent.push({
           ...facet,
-          name: names[names.length - 1].trim(),
+          name,
           level: 0,
+          parseObject,
           children: []
         });
     }
   }
+  if (isCollection) {
+    hierarchicalFacets = sortFacets({
+      facets: hierarchicalFacets,
+      sortingOrder: hierarchical_collections_structure
+    });
+  }
   return hierarchicalFacets;
 };
 const handleConditionNotUpdateFacetDistribution = ({
@@ -4772,15 +4958,16 @@ const handleFacetValues = ({
   keepCounterFacets,
   allowedFilterSlider
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { value, settings: filterSettings } = filter;
   let aliases = {};
-  if (filter.value === "hierarchicalProductType")
+  if (filter.value === HIERARCHICAL_FACET_OBJECT_ALIASES.product_type)
     aliases = settings.productTypeAliases || {};
-  if (filter.value === "hierarchicalCollections")
+  if (filter.value === HIERARCHICAL_FACET_OBJECT_ALIASES.collections)
     aliases = settings.collectionAliases || {};
-  const isHideFacetWhenZeroValue = (_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.hide_when_zero_value;
-  const { prefix, filter_list, delete_prefix, selected_filter } = filterSettings || {};
+  const isCollection = (_a = String(filter == null ? void 0 : filter.value)) == null ? void 0 : _a.includes(HIERARCHICAL_FACET_OBJECT_ALIASES.collections);
+  const isHideFacetWhenZeroValue = (_b = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b.hide_when_zero_value;
+  const { prefix, filter_list, delete_prefix, selected_filter, structure } = filterSettings || {};
   let facetValues = [];
   if (!(items == null ? void 0 : items.length))
     return facetValues;
@@ -4794,6 +4981,8 @@ const handleFacetValues = ({
       continue;
     const isFacetHierarchical = Object.hasOwn(item, "children");
     let labelName = item.name;
+    if (isFacetHierarchical && isCollection)
+      labelName = ((_c = parseFacetObject({ facet: labelName })) == null ? void 0 : _c.collection_title) || labelName;
     let getValue = isFacetHierarchical ? `${value}.lvl${item.level}` : value;
     if (languageSettings && (languageSettings[item.value] || languageSettings[item.name]))
       labelName = languageSettings[item.value] || languageSettings[item.name];
@@ -4802,7 +4991,7 @@ const handleFacetValues = ({
       clickedFacets,
       keepCounterFacets,
       allowedFilterSlider
-    }) ? (item == null ? void 0 : item.total) || 0 : (searchFacetDistribution == null ? void 0 : searchFacetDistribution[getValue]) && ((_b = searchFacetDistribution == null ? void 0 : searchFacetDistribution[getValue]) == null ? void 0 : _b[item.value]) ? searchFacetDistribution[getValue][item.value] : 0;
+    }) ? (item == null ? void 0 : item.total) || 0 : (searchFacetDistribution == null ? void 0 : searchFacetDistribution[getValue]) && ((_d = searchFacetDistribution == null ? void 0 : searchFacetDistribution[getValue]) == null ? void 0 : _d[item.value]) ? searchFacetDistribution[getValue][item.value] : 0;
     let getLabelName = aliases[labelName] || labelName;
     delete_prefix == null ? void 0 : delete_prefix.map((deletePrefix) => {
       if (String(getLabelName).startsWith(deletePrefix))
@@ -4815,6 +5004,10 @@ const handleFacetValues = ({
         counter
       });
   }
+  facetValues = sortFacets({
+    facets: facetValues,
+    sortingOrder: structure
+  });
   return facetValues;
 };
 const FacetComponent = (props) => {
@@ -4855,9 +5048,9 @@ const FacetComponent = (props) => {
   const [showFacet, setShowFacet] = React__default.useState(false);
   const searchFacetRef = React__default.useRef(null);
   const previousState = usePrevious({ keywordFacet });
-  const { money_format } = generalDataSettings || {};
+  const { money_format, default_currency_symbol } = generalDataSettings || {};
   const { button_load_more } = (generalDataSettings == null ? void 0 : generalDataSettings.languages) || {};
-  const { search_filter_placeholder, search_filter_show_more_result, search_filter_no_result, filter_select_placeholder } = languageSettings || {};
+  const { search_filter_placeholder, search_filter_show_more_result, search_filter_no_result, filter_select_placeholder, highest_price_info } = languageSettings || {};
   const {
     color: filter_option_color,
     font_size: filter_option_font_size,
@@ -4878,7 +5071,8 @@ const FacetComponent = (props) => {
     return null;
   let blockComponent = null;
   const isShowNumberMatchingProduct = (_b = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b.show_number_matching_product;
-  const isDisplaySlider = display.toLowerCase() === "slider";
+  const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display.toLowerCase());
+  const isDisplayInputRange = display.toLowerCase() === "input_range";
   const getValue = `${value}-${indexFilter}`;
   if (show_search && keywordFacet && !isDisplaySlider)
     items = items == null ? void 0 : items.filter(({ name }) => {
@@ -5109,37 +5303,43 @@ const FacetComponent = (props) => {
     let defaultValueMax = (valueFilterSliderChange == null ? void 0 : valueFilterSliderChange[1]) || (items == null ? void 0 : items.max);
     let contentDefaultValueMin = isPriceValue ? shopifyFormatMoney(defaultValueMin * 100, money_format) : isSalePercent ? `${defaultValueMin}%` : defaultValueMin;
     let contentDefaultValueMax = isPriceValue ? shopifyFormatMoney(defaultValueMax * 100, money_format) : isSalePercent ? `${defaultValueMax}%` : defaultValueMax;
-    blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Slider,
-        {
-          value: defaultValueMin === defaultValueMax ? [defaultValueMax] : [defaultValueMin, defaultValueMax],
-          textValue: defaultValueMin === defaultValueMax ? [contentDefaultValueMax] : [contentDefaultValueMin, contentDefaultValueMax],
-          ...(items == null ? void 0 : items.min) === (items == null ? void 0 : items.max) ? {} : {
-            min: items == null ? void 0 : items.min
-          },
-          max: items == null ? void 0 : items.max,
-          step: 1,
-          setValueCommit: (valueCommit) => handleFilterChange({
-            parentId: value,
-            value: valueCommit
-          }),
-          setValueChange: (valueChange) => {
-            if (value === "variants.price") {
-              setValueFilterPriceChange(valueChange);
-            } else if (value === "variants.sale_percent") {
-              setValueFilterOnSaleChange(valueChange);
-            } else {
-              setValueFilterSliderOthers((prevState) => ({ ...prevState, [value]: valueChange }));
-            }
+    let contentFacetStatsMax = isPriceValue ? shopifyFormatMoney((items == null ? void 0 : items.max) * 100, money_format) : isSalePercent ? `${items == null ? void 0 : items.max}%` : items == null ? void 0 : items.max;
+    let descriptionInputRange = highest_price_info ? String(highest_price_info).replaceAll(OBJECT_DATA_STRING_KEY.PRICE_MAX_MONEY_FORMAT, contentFacetStatsMax) : `The highest price is ${contentFacetStatsMax}`;
+    blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Slider,
+      {
+        type: display.toLowerCase(),
+        valueFilterSliderChange,
+        labelStyle: filter_option_style,
+        ...isDisplayInputRange ? {
+          prefixInputRange: default_currency_symbol,
+          descriptionInputRange
+        } : {},
+        value: defaultValueMin === defaultValueMax ? [defaultValueMax] : [defaultValueMin, defaultValueMax],
+        textValue: defaultValueMin === defaultValueMax ? [contentDefaultValueMax] : [contentDefaultValueMin, contentDefaultValueMax],
+        ...(items == null ? void 0 : items.min) === (items == null ? void 0 : items.max) ? {} : {
+          min: items == null ? void 0 : items.min
+        },
+        max: items == null ? void 0 : items.max,
+        step: 1,
+        setValueCommit: (valueCommit) => handleFilterChange({
+          parentId: value,
+          value: valueCommit
+        }),
+        setValueChange: (valueChange) => {
+          if (value === "variants.price") {
+            setValueFilterPriceChange(valueChange);
+          } else if (value === "variants.sale_percent") {
+            setValueFilterOnSaleChange(valueChange);
+          } else {
+            setValueFilterSliderOthers((prevState) => ({ ...prevState, [value]: valueChange }));
           }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider-minmax", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", dangerouslySetInnerHTML: { __html: contentDefaultValueMin } }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", dangerouslySetInnerHTML: { __html: contentDefaultValueMax } })
-      ] })
-    ] });
+        },
+        wrapperClassName: "sledge-instant-search__result-filter-item-list-slider",
+        minMaxClassName: "sledge-instant-search__result-filter-item-list-slider-minmax",
+        minMaxTextClassName: "sledge-instant-search__result-filter-minmax-field"
+      }
+    );
   } else if ((display.toLowerCase() === "checkbox" || display.toLowerCase() === "tree") && (currentItems == null ? void 0 : currentItems.length)) {
     blockComponent = display.toLowerCase() === "checkbox" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       VirtualizedList,
@@ -5599,7 +5799,7 @@ const SearchResultWidget = (props) => {
           var _a3;
           const { value, label, display: display2, settings: settings2 } = filter;
           const { prefix, filter_list, selected_filter } = settings2 || {};
-          const isDisplaySlider = display2.toLowerCase() === "slider";
+          const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display2.toLowerCase());
           if (isDisplaySlider)
             return;
           let items = [];
@@ -5627,7 +5827,7 @@ const SearchResultWidget = (props) => {
         }).filter((item) => item);
         let valueAllowedFilterSlider = valueAllowedFilter.map((filter) => {
           const { value, display: display2 } = filter;
-          const isDisplaySlider = display2.toLowerCase() === "slider";
+          const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display2.toLowerCase());
           if (!isDisplaySlider)
             return;
           return value;
@@ -6222,7 +6422,12 @@ const ResultProduct = (props) => {
     total_result_text: language_total_result_text
   } = languageSettings || {};
   const { separator: hierarchical_separator, hiddens: hierarchical_hiddens } = hierarchicalProductTypeSettings || {};
-  const { separator: hierarchical_collections_separator, hiddens: hierarchical_collections_hiddens } = hierarchicalCollectionsSettings || {};
+  const {
+    separator: hierarchical_collections_separator,
+    hiddens: hierarchical_collections_hiddens,
+    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) => {
@@ -6569,8 +6774,20 @@ 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, index }) => {
-    var _a2, _b2, _c2, _d2;
+  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;
@@ -6591,29 +6808,29 @@ const ResultProduct = (props) => {
         }
       });
     }
-    (_a2 = getSettings == null ? void 0 : getSettings.delete_prefix) == null ? void 0 : _a2.map((deletePrefix) => {
+    (_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 = (_b2 = getValueRange == null ? void 0 : getValueRange.map((valueItem) => isPriceValue ? shopifyFormatMoney(valueItem * 100, money_format) : isSalePercent ? `${valueItem}%` : valueItem)) == null ? void 0 : _b2.join(" - ");
+      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 = (_c2 = String(valueText)) == null ? void 0 : _c2.replaceAll(hierarchical_collections_separator, " > ");
+      valueText = (_e2 = String(valueText)) == null ? void 0 : _e2.replaceAll(hierarchical_collections_separator, " > ");
     }
-    valueText = (_d2 = String(valueText)) == null ? void 0 : _d2.replaceAll("_", " ");
+    valueText = (_f2 = String(valueText)) == null ? void 0 : _f2.replaceAll("_", " ");
     let aliases = {};
     let aliasValue = "";
     let aliasSeparator = "";
-    if (name === "hierarchicalCollections") {
+    if (name === HIERARCHICAL_FACET_OBJECT_ALIASES.collections) {
       aliases = settings.collectionAliases || {};
       aliasSeparator = hierarchicalCollectionsSettings.separator;
     }
-    if (name === "hierarchicalProductType") {
+    if (name === HIERARCHICAL_FACET_OBJECT_ALIASES.product_type) {
       aliases = settings.productTypeAliases || {};
       aliasSeparator = hierarchicalProductTypeSettings.separator;
     }
-    if (["hierarchicalCollections", "hierarchicalProductType"].includes(name) && aliasSeparator) {
+    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) {
@@ -6650,6 +6867,7 @@ const ResultProduct = (props) => {
   }) => {
     var _a2, _b2;
     const { value, display, indexFilter } = filter;
+    const isDisplaySlider = ["slider", "input_range", "slider_with_input_range"].includes(display.toLowerCase());
     let items = display.toLowerCase() === "tree" ? createHierarchicalFacet({
       indexValue: value,
       filter,
@@ -6661,10 +6879,11 @@ const ResultProduct = (props) => {
       hiddensCollection: hierarchical_collections_hiddens,
       displaySettings,
       searchFacetDistribution,
-      hierarchicalFacetAliases
+      hierarchicalFacetAliases,
+      hierarchicalCollectionsSettings
     }) : searchResultFacets[value];
     let isRender = Boolean(
-      display.toLowerCase() === "slider" ? items : Number(
+      isDisplaySlider ? items : Number(
         (_a2 = handleFacetValues({
           filter,
           languageSettings,
@@ -6677,7 +6896,7 @@ const ResultProduct = (props) => {
         })) == null ? void 0 : _a2.length
       )
     );
-    if (display.toLowerCase() === "slider") {
+    if (isDisplaySlider) {
       let defaultItemSlider = (defaultFacetStats == null ? void 0 : defaultFacetStats[value]) && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
       let valueFilterSliderChange = [];
       if (value === "variants.price") {