@sledge-app/react-instant-search 0.0.1

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

@@ -0,0 +1,4042 @@
+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 $a093c7e1ec25a057$export$2881499e37b75b9a, F as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, G as $a093c7e1ec25a057$export$41fb9f06171c75f4, H as $a093c7e1ec25a057$export$602eac185826482c, I as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, J as $a093c7e1ec25a057$export$21b07c8f274aebd5, K as $57acba87d6e25586$export$be92b6f5f03c0fe9, L as $57acba87d6e25586$export$d5c6c08dc2d3ca7, M as $57acba87d6e25586$export$9a4e88b92edfce6b, N as $57acba87d6e25586$export$6521433ed15a34db, O as $57acba87d6e25586$export$ac61190d9fc311a9, P as MasonryResponsive, Q as Masonry, R as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, S as $5d3850c4d0b4e6c7$export$602eac185826482c, T as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, U as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-90dfd914.js";
+import React__default, { createElement } from "react";
+import { SledgeContext } from "@sledge-app/react-core";
+import "react-dom";
+const ProductFilterWidget = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SearchResultWidget, { layoutType: "product-filter", ...props });
+};
+const API_URL = "https://sledge-api-preprod.offstack.io";
+const INSTANT_SEARCH_ENGINE_URL = "https://instant-search-engine.offstack.io";
+const LOCAL_STORAGE_KEY = {
+  ANONYM_ID: "sledge-anonym-id",
+  AUTH_APP: "sledge-auth-app",
+  INSTANT_SEARCH_AUTH_APP: "sledge-instant-search-auth-app",
+  WISHLIST_SETTING: "sledge-wishlist-setting",
+  PRODUCT_REVIEW_SETTING: "sledge-product-review-setting",
+  INSTANT_SEARCH_SETTING: "sledge-instant-search-setting"
+};
+const SEARCH_RESULT_URL = "/pages/search-result";
+const OBJECT_DATA_STRING_KEY = {
+  STORE: {
+    NAME: "{{ shop.name }}"
+  },
+  PRODUCT: {
+    TITLE: "{ product_title }",
+    VARIANT_TITLE: "{ product_variant_title }",
+    IMAGE: "{ product_image }",
+    CURRENCY: "{ product_currency }",
+    PRICE: "{ product_price }",
+    VENDOR: "{ product_vendor }",
+    SKU: "{ product_sku }"
+  }
+};
+const sanitizeDataId = (id) => {
+  if (!id)
+    return "";
+  let getId = String(id);
+  if (getId.includes("shopify") && getId.includes("/")) {
+    let arrId = getId.split("/");
+    return arrId[arrId.length - 1] || getId;
+  } else {
+    return getId;
+  }
+};
+const replaceString = (str, find, replace) => {
+  for (var i = 0; i < find.length; i++) {
+    str = str.replace(new RegExp(find[i], "gi"), replace[i]);
+  }
+  return str;
+};
+const SearchIconWidget$1 = "";
+const root = "";
+const Loading = "";
+const ConfirmationPopup = "";
+const InfoPopup = "";
+const ToastNotification = "";
+const Popover$1 = "";
+const Popover = ({
+  trigger,
+  content,
+  isOpen,
+  setIsOpen,
+  hideCloseIcon,
+  align,
+  className,
+  withOpenState = true,
+  withArrow = true,
+  customArrow = "",
+  sideOffset = 5,
+  alignOffset = 0
+}) => {
+  const [open, setOpen] = React__default.useState(withOpenState ? isOpen : false);
+  React__default.useEffect(() => {
+    var _a;
+    let arrowElement = (_a = document == null ? void 0 : document.querySelector(".PopoverArrow")) == null ? void 0 : _a.parentElement;
+    if (arrowElement && (customArrow == null ? void 0 : customArrow.length)) {
+      arrowElement.style.display = "inline-flex";
+      arrowElement.innerHTML = customArrow;
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9,
+    {
+      ...withOpenState && {
+        open: isOpen
+      },
+      ...setIsOpen && {
+        onOpenChange: (open2) => {
+          setOpen(open2);
+          setIsOpen(open2);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx($cb5cc270b50c6fcd$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2,
+          {
+            className: `sledge__popover-content ${className ? className : ""}`,
+            sideOffset,
+            alignOffset,
+            align,
+            ...setIsOpen && {
+              onOpenAutoFocus: () => setIsOpen(true),
+              onCloseAutoFocus: () => setIsOpen(false)
+            },
+            children: [
+              content,
+              !hideCloseIcon && /* @__PURE__ */ jsxRuntimeExports.jsx($cb5cc270b50c6fcd$export$f39c2d165cd861fe, { className: "PopoverClose", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, 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"
+                }
+              ) }) }),
+              withArrow ? /* @__PURE__ */ jsxRuntimeExports.jsx($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { className: "PopoverArrow" }) : null
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+const Progress$1 = "";
+const Progress = ({ value, total, fillColor = "", outlineColor = "" }) => {
+  const [progress, setProgress] = React__default.useState(0);
+  React__default.useEffect(() => {
+    const timer = setTimeout(() => setProgress(+value / total * 100), 150);
+    return () => clearTimeout(timer);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    $67824d98245208a0$export$be92b6f5f03c0fe9,
+    {
+      className: "sledge__progress",
+      value: progress,
+      style: outlineColor ? {
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: outlineColor
+      } : {},
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        $67824d98245208a0$export$adb584737d712b70,
+        {
+          className: "ProgressIndicator",
+          style: {
+            ...{ transform: `translateX(-${100 - progress}%)` },
+            ...fillColor && {
+              backgroundColor: fillColor
+            }
+          }
+        }
+      )
+    }
+  );
+};
+const Checkbox$1 = "";
+const Checkbox = ({ id, name, value, required, label, defaultChecked, labelStyle = {}, onClick }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__checkbox-wrapper", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx($e698a72e93240346$export$be92b6f5f03c0fe9, { className: "sledge__checkbox-root", defaultChecked, id, name, value, required, onClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx($e698a72e93240346$export$adb584737d712b70, { className: "sledge__checkbox-indicator", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 10, height: 8, viewBox: "0 0 10 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M9.72318 0.237414C10.0707 0.574491 10.0942 1.14584 9.77561 1.51356L4.40976 7.70711C4.25243 7.88871 4.03181 7.99443 3.79903 7.99979C3.56625 8.00514 3.3415 7.90965 3.17686 7.73545L0.250031 4.63868C-0.0833435 4.28595 -0.0833435 3.71406 0.250031 3.36133C0.583405 3.00859 1.12391 3.00859 1.45729 3.36133L3.75367 5.79105L8.51706 0.292899C8.83564 -0.0748211 9.37564 -0.0996624 9.72318 0.237414Z",
+        fill: "white"
+      }
+    ) }) }) }),
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "sledge__checkbox-label", htmlFor: id, style: labelStyle, children: label })
+  ] });
+};
+const Slider$1 = "";
+const Slider = (props) => {
+  const { defaultValue, min, max, step = 1, setValueCommit, setValueChange } = props;
+  const [value, setValue] = React__default.useState(defaultValue);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    $faa2e61a3361514f$export$be92b6f5f03c0fe9,
+    {
+      className: "sledge__SliderRoot",
+      defaultValue,
+      min,
+      max,
+      step,
+      "aria-label": "Volume",
+      onValueCommit: (valueCommit) => {
+        setValueCommit && setValueCommit(valueCommit);
+        setValue(valueCommit);
+      },
+      onValueChange: (valueChange) => {
+        setValueChange && setValueChange(valueChange);
+        setValue(valueChange);
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$13921ac0cc260818, { className: "sledge__SliderTrack", children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$9a58ef0d7ad3278c, { className: "sledge__SliderRange" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Tooltip,
+          {
+            content: value[0],
+            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="#23BC45"/></svg>`,
+            wrapTrigger: false,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Tooltip,
+          {
+            content: value[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="#23BC45"/></svg>`,
+            wrapTrigger: false,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
+          }
+        )
+      ]
+    }
+  ) });
+};
+const Pagination$1 = "";
+const Pagination = ({ currentPage, totalPage, totalResult, onChange }) => {
+  const isDisabledPreviousPage = currentPage === 1;
+  const isDisabledNextPage = currentPage === totalPage;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__pagination", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "sledge__pagination-navigation",
+        ...isDisabledPreviousPage ? {
+          disabled: true
+        } : {
+          onClick: () => onChange(currentPage - 1)
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowLeftIcon, { width: 17, height: 17, color: "black" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+      "Page ",
+      currentPage,
+      " of ",
+      totalPage,
+      " - total ",
+      totalResult,
+      " result"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "sledge__pagination-navigation",
+        ...isDisabledNextPage ? {
+          disabled: true
+        } : {
+          onClick: () => onChange(currentPage + 1)
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowRightIcon, { width: 17, height: 17, color: "black" })
+      }
+    )
+  ] });
+};
+const RadioGroup$1 = "";
+const RadioGroup = ({ id, name, required, defaultValue, items, labelStyle = {}, onValueChange }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__radio-group-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    $f99a8c78507165f7$export$be92b6f5f03c0fe9,
+    {
+      className: "sledge__radio-group-root",
+      "aria-label": "View density",
+      defaultValue,
+      id,
+      name,
+      required,
+      onValueChange,
+      children: items.map((item, index) => {
+        const { label, value } = item;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__radio-group-item-flex", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx($f99a8c78507165f7$export$6d08773d2e66f8f2, { className: "sledge__radio-group-item", value, id: `${id}${index}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx($f99a8c78507165f7$export$adb584737d712b70, { className: "sledge__radio-group-indicator" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "sledge__radio-group-label", htmlFor: `${id}${index}`, style: labelStyle, children: label })
+        ] }, index);
+      })
+    }
+  ) }) });
+};
+const ColorSwatch$1 = "";
+const ColorSwatch = ({ id, name, value, rgb, image, required, defaultChecked, onClick }) => {
+  const styles = {
+    ...(image == null ? void 0 : image.length) ? {
+      backgroundImage: `url(${image})`
+    } : {
+      backgroundColor: rgb
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__color-swatch-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    $e698a72e93240346$export$be92b6f5f03c0fe9,
+    {
+      className: "sledge__color-swatch-root",
+      defaultChecked,
+      id,
+      name,
+      value,
+      required,
+      onClick,
+      style: styles
+    }
+  ) });
+};
+const Select$1 = "";
+const Select = ({ name, placeholder, required, defaultValue, items, labelStyle = {}, onValueChange }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__select-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs($cc7e05a45900e73f$export$be92b6f5f03c0fe9, { name, required, onValueChange, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs($cc7e05a45900e73f$export$41fb9f06171c75f4, { className: "sledge__select-trigger", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { placeholder }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "sledge__select-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      ) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs($cc7e05a45900e73f$export$7c6e2c02157bb7d2, { className: "sledge__select-content", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$2f60d3ec9ad468f2, { className: "sledge__select-scroll-button", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          d: "M3.13523 8.84197C3.3241 9.04343 3.64052 9.05363 3.84197 8.86477L7.5 5.43536L11.158 8.86477C11.3595 9.05363 11.6759 9.04343 11.8648 8.84197C12.0536 8.64051 12.0434 8.32409 11.842 8.13523L7.84197 4.38523C7.64964 4.20492 7.35036 4.20492 7.15803 4.38523L3.15803 8.13523C2.95657 8.32409 2.94637 8.64051 3.13523 8.84197Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, { className: "sledge__select-viewport", children: items.map(
+        (item, index) => {
+          const { label, value } = item;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$bf1aedc3039c8d63, { className: "sledge__select-scroll-button", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      ) }) })
+    ] }) })
+  ] }) });
+};
+const SelectItemComponent = React__default.forwardRef(({ children, className = "", ...props }, forwardedRef) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs($cc7e05a45900e73f$export$6d08773d2e66f8f2, { className: `sledge__select-item ${className}`, ...props, ref: forwardedRef, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$d6e5bf9c43ea9319, { children }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$c3468e2714d175fa, { className: "sledge__select-item-indicator", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "path",
+      {
+        d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+        fill: "currentColor",
+        fillRule: "evenodd",
+        clipRule: "evenodd"
+      }
+    ) }) })
+  ] });
+});
+const HeartIcon = ({ width, height, type, color }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__heart", children: type === "outline" ? /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, id: "sledge-icon-heart-line", viewBox: "0 0 18 17", fill: color, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M9.19515 0.86581C10.5501 0.00914308 12.3501 -0.227524 13.9051 0.27081C17.2876 1.36164 18.3376 5.04914 17.3985 7.98331C15.9493 12.5916 9.76015 16.0291 9.49765 16.1733C9.40431 16.225 9.30098 16.2508 9.19765 16.2508C9.09431 16.2508 8.99181 16.2258 8.89848 16.175C8.63765 16.0325 2.49348 12.6458 0.995979 7.98414L0.995146 7.98331C0.0551462 5.04831 1.10181 1.35998 4.48098 0.27081C6.06765 -0.242524 7.79681 -0.0166903 9.19515 0.86581ZM4.86431 1.46081C2.13015 2.34248 1.44348 5.28331 2.18598 7.60248C3.35431 11.2375 7.97015 14.1766 9.19681 14.9041C10.4276 14.1691 15.0768 11.1975 16.2076 7.60581C16.9501 5.28414 16.261 2.34331 13.5226 1.46081C12.196 1.03498 10.6485 1.29414 9.58015 2.12081C9.35681 2.29248 9.04681 2.29581 8.82181 2.12581C7.69015 1.27498 6.21181 1.02581 4.86431 1.46081ZM12.7226 3.11573C13.8585 3.48323 14.6543 4.48906 14.7518 5.67823C14.7793 6.02239 14.5235 6.32406 14.1793 6.35156C14.1618 6.35323 14.1451 6.35406 14.1276 6.35406C13.8051 6.35406 13.5318 6.10656 13.5051 5.77989C13.4501 5.09489 12.9918 4.51656 12.3393 4.30573C12.0101 4.19906 11.8301 3.84656 11.936 3.51906C12.0435 3.19073 12.3926 3.01239 12.7226 3.11573Z"
+    }
+  ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, id: "sledge-icon-heart-fill", viewBox: "0 0 18 17", fill: color, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.89936 0.0838691C6.42436 0.0998355 6.9327 0.191502 7.4252 0.359002H7.47436C7.5077 0.374836 7.5327 0.392336 7.54936 0.408169C7.73353 0.467336 7.9077 0.534002 8.07436 0.625669L8.39103 0.767336C8.51603 0.834002 8.66603 0.958169 8.74936 1.009C8.8327 1.05817 8.92436 1.109 8.99936 1.1665C9.9252 0.459002 11.0494 0.0756688 12.2077 0.0838691C12.7335 0.0838691 13.2585 0.158169 13.7577 0.325669C16.8335 1.32567 17.9419 4.70067 17.016 7.65067C16.491 9.15817 15.6327 10.534 14.5085 11.6582C12.8994 13.2165 11.1335 14.5998 9.2327 15.7915L9.02436 15.9173L8.8077 15.7832C6.9002 14.5998 5.12436 13.2165 3.5002 11.6498C2.38353 10.5257 1.52436 9.15817 0.991029 7.65067C0.0493627 4.70067 1.1577 1.32567 4.26686 0.308169C4.50853 0.224836 4.7577 0.166502 5.0077 0.134002H5.1077C5.34186 0.0998355 5.57436 0.0838691 5.8077 0.0838691H5.89936ZM13.3244 2.71734C12.9827 2.59984 12.6077 2.784 12.4827 3.134C12.366 3.484 12.5494 3.86734 12.8994 3.9915C13.4335 4.1915 13.791 4.71734 13.791 5.29984V5.32567C13.7752 5.5165 13.8327 5.70067 13.9494 5.84234C14.066 5.984 14.241 6.0665 14.4244 6.084C14.766 6.07484 15.0577 5.80067 15.0827 5.44984V5.35067C15.1077 4.18317 14.4002 3.12567 13.3244 2.71734Z" }) }) });
+};
+const ChevronArrowDownIcon = ({ width, height, color }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__arrow-down", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "Arrow - Down 2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "Iconly/Light-Outline/Arrow---Down-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "Arrow---Down-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      id: "Stroke-1",
+      d: "M3.72407 6.6414C3.94596 6.41951 4.29318 6.39934 4.53786 6.58089L4.60796 6.6414L9.99935 12.0325L15.3907 6.6414C15.6126 6.41951 15.9598 6.39934 16.2045 6.58089L16.2746 6.6414C16.4965 6.86329 16.5167 7.21051 16.3351 7.45519L16.2746 7.52529L10.4413 13.3586C10.2194 13.5805 9.87218 13.6007 9.62751 13.4191L9.55741 13.3586L3.72407 7.52529C3.48 7.28121 3.48 6.88548 3.72407 6.6414Z",
+      fill: color
+    }
+  ) }) }) }) }) });
+};
+const ChevronArrowLeftIcon = ({ width, height, color }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__arrow-left", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M10.6875 2.97945C10.865 3.15697 10.8812 3.43474 10.7359 3.63048L10.6875 3.68656L6.37465 7.99967L10.6875 12.3128C10.865 12.4903 10.8812 12.7681 10.7359 12.9638L10.6875 13.0199C10.51 13.1974 10.2323 13.2135 10.0365 13.0683L9.98043 13.0199L5.31377 8.35323C5.13625 8.17572 5.12012 7.89794 5.26535 7.7022L5.31377 7.64612L9.98043 2.97945C10.1757 2.78419 10.4923 2.78419 10.6875 2.97945Z",
+      fill: color
+    }
+  ) }) });
+};
+const ChevronArrowRightIcon = ({ width, height, color }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__arrow-right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M5.60738 13.1302C5.42987 12.9527 5.41374 12.675 5.55897 12.4792L5.60738 12.4231L9.92027 8.11002L5.60738 3.79691C5.42987 3.6194 5.41374 3.34162 5.55897 3.14588L5.60738 3.0898C5.7849 2.91229 6.06267 2.89615 6.25841 3.04139L6.31449 3.0898L10.9812 7.75647C11.1587 7.93398 11.1748 8.21175 11.0296 8.4075L10.9812 8.46357L6.31449 13.1302C6.11923 13.3255 5.80265 13.3255 5.60738 13.1302Z",
+      fill: color
+    }
+  ) }) });
+};
+const BagIcon = ({ width, height, color }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__bag", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M19.6334 3.33398C23.9899 3.33398 27.5887 6.65342 28.0324 10.8989L28.1562 10.9003C30.5729 10.9003 33.5112 12.5053 34.5029 17.007L35.8179 27.1853C36.2896 30.4703 35.6996 33.1053 34.0612 34.9953C32.4312 36.8753 29.8512 37.8703 26.5996 37.8703H12.6862C9.11458 37.8703 6.62625 36.9953 5.07792 35.197C3.52292 33.3936 3.00292 30.6886 3.53292 27.1586L4.82625 17.1153C5.67625 12.5103 8.78458 10.9003 11.1912 10.9003C11.399 8.98444 12.2629 7.16182 13.6334 5.79565C15.2084 4.23065 17.3801 3.33398 19.5984 3.33398H19.6334ZM28.1562 13.4003H11.1912C10.4562 13.4003 7.99958 13.697 7.29458 17.5036L6.00792 27.5036C5.58958 30.3086 5.91292 32.3386 6.97125 33.567C8.01625 34.7803 9.88625 35.3703 12.6862 35.3703H26.5996C28.3462 35.3703 30.7312 35.022 32.1712 33.3586C33.3146 32.0403 33.7079 30.077 33.3412 27.522L32.0429 17.4353C31.4896 14.9503 30.0296 13.4003 28.1562 13.4003ZM24.4942 18.0405C25.1842 18.0405 25.7826 18.6005 25.7826 19.2905C25.7826 19.9805 25.2609 20.5405 24.5709 20.5405H24.4942C23.8042 20.5405 23.2442 19.9805 23.2442 19.2905C23.2442 18.6005 23.8042 18.0405 24.4942 18.0405ZM14.7774 18.0405C15.4674 18.0405 16.0657 18.6005 16.0657 19.2905C16.0657 19.9805 15.5424 20.5405 14.8524 20.5405H14.7774C14.0874 20.5405 13.5274 19.9805 13.5274 19.2905C13.5274 18.6005 14.0874 18.0405 14.7774 18.0405ZM19.6284 5.83398H19.6034C18.0351 5.83398 16.5067 6.46565 15.3984 7.56732C14.4956 8.46609 13.9051 9.64764 13.7141 10.8995L25.5129 10.9C25.0846 8.03628 22.6082 5.83398 19.6284 5.83398Z",
+      fill: color
+    }
+  ) }) });
+};
+const SearchIcon = ({ width, height, color }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__search", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M9.78283 2.16669C14.2578 2.16669 17.8978 5.80669 17.8978 10.2817C17.8978 12.393 17.0876 14.3186 15.7617 15.7638L18.3707 18.3673C18.6148 18.6114 18.6157 19.0064 18.3715 19.2506C18.2498 19.3739 18.089 19.4348 17.929 19.4348C17.7698 19.4348 17.6098 19.3739 17.4873 19.2523L14.8469 16.6192C13.4579 17.7316 11.6967 18.3975 9.78283 18.3975C5.30783 18.3975 1.66699 14.7567 1.66699 10.2817C1.66699 5.80669 5.30783 2.16669 9.78283 2.16669ZM9.78283 3.41669C5.99699 3.41669 2.91699 6.49585 2.91699 10.2817C2.91699 14.0675 5.99699 17.1475 9.78283 17.1475C13.5678 17.1475 16.6478 14.0675 16.6478 10.2817C16.6478 6.49585 13.5678 3.41669 9.78283 3.41669Z",
+      fill: color
+    }
+  ) }) });
+};
+const Button$1 = "";
+const Button = React__default.forwardRef((props, buttonRef) => {
+  const { className = "", children, colorType = "light", fullWidth = false, elementType = "button", link = "", ...otherProps } = props;
+  return elementType === "hyperlink" && (link == null ? void 0 : link.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: link, className: `sledge__button ${className || ""}`, "data-button-color-type": colorType, "data-button-full-width": fullWidth, ref: buttonRef, ...otherProps, children }) : /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: `sledge__button ${className || ""}`, "data-button-color-type": colorType, "data-button-full-width": fullWidth, ref: buttonRef, ...otherProps, children });
+});
+const SearchInputField$1 = "";
+const SearchInputField = (props) => {
+  const { className = "", icon, value = "", withClearField, onChange, onResetField, fieldRef, ...otherProps } = props;
+  const [isVisibleClearField, setIsVisibleClearField] = React__default.useState(false);
+  const handleResetField = () => {
+    (fieldRef == null ? void 0 : fieldRef.current) && fieldRef.current.focus();
+    onChange && onChange({ value: "" });
+    onResetField && onResetField();
+  };
+  const handleChangeField = (e) => {
+    onChange && onChange({ value: e.target.value });
+  };
+  React__default.useEffect(() => {
+    setIsVisibleClearField(Boolean(value));
+  }, [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 }),
+    isVisibleClearField && 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("svg", { viewBox: "0 0 20 20", focusable: "false", "aria-hidden": "true", width: 14, height: 14, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414l-6.293 6.293-6.293-6.293a1 1 0 0 0-1.414 1.414l6.293 6.293-6.293 6.293a1 1 0 1 0 1.414 1.414l6.293-6.293 6.293 6.293a.998.998 0 0 0 1.707-.707.999.999 0 0 0-.293-.707l-6.293-6.293z" }) }) }) }) : null
+  ] });
+};
+const SelectField$1 = "";
+const SelectField = (props) => {
+  var _a;
+  const { className = "", placeholder = null, prefixLabel = null, prefixSelectedLabel = "", align = "end", onChange, value = "", options = [] } = props;
+  const [isOpen, setIsOpen] = React__default.useState(false);
+  const handleChangeField = (label, value2) => {
+    onChange && onChange({ label, value: value2 });
+    setIsOpen(false);
+  };
+  const selectedLabel = ((_a = options == null ? void 0 : options.filter(({ value: optionValue }) => optionValue === value)[0]) == null ? void 0 : _a.label) || placeholder;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__select-field-wrapper ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Popover,
+    {
+      trigger: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "sledge__button sledge__select-field", "data-button-color-type": "light", "data-button-full-width": "true", children: [
+        !prefixLabel ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge__select-field-icon", children: prefixLabel }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (prefixSelectedLabel == null ? void 0 : prefixSelectedLabel.length) ? `${prefixSelectedLabel} ${selectedLabel}` : selectedLabel })
+      ] }),
+      content: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge__select-field-option", children: options == null ? void 0 : options.map((option, index) => {
+        const { label, value: optionValue } = option;
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "li",
+          {
+            onClick: () => handleChangeField(label, optionValue),
+            ...optionValue === value && {
+              ["data-selected"]: true
+            },
+            children: label
+          },
+          index
+        );
+      }) }),
+      isOpen,
+      setIsOpen,
+      hideCloseIcon: true,
+      align,
+      className: "sledge__select-field-option-content",
+      withArrow: false
+    }
+  ) });
+};
+const ProductGrid$1 = "";
+const addToCart = async (data) => {
+  var _a;
+  var myHeaders = new Headers();
+  myHeaders.append("Content-Type", "application/json");
+  let items = [];
+  data.map((item) => {
+    const { id, quantity } = item;
+    items.push({
+      id,
+      quantity
+    });
+  });
+  var raw = JSON.stringify({
+    items
+  });
+  var requestOptions = {
+    method: "POST",
+    headers: myHeaders,
+    body: raw,
+    redirect: "follow"
+  };
+  if (!((_a = window == null ? void 0 : window.Shopify) == null ? void 0 : _a.routes))
+    return;
+  return await fetch(`${window.Shopify.routes.root}cart/add.js`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
+const Badge = "";
+const addWishlist = async (data) => {
+  const { productId, productVariantId, productName, productVendor, productSku, productVariantName, productLink, productImage, productCurrency, productPrice } = data;
+  let sledgeAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeAuthApp}`);
+  myHeaders.append("Content-Type", "application/json");
+  var raw = JSON.stringify({
+    product: {
+      id: sanitizeDataId(productId),
+      variant_id: sanitizeDataId(productVariantId),
+      name: productName,
+      vendor: productVendor,
+      sku: productSku,
+      variant_name: productVariantName,
+      url: productLink,
+      image_url: productImage,
+      currency: productCurrency,
+      price: productPrice
+    }
+  });
+  var requestOptions = {
+    method: "POST",
+    headers: myHeaders,
+    body: raw,
+    redirect: "follow"
+  };
+  return await fetch(`${API_URL}/wishlist`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
+const bulkAddWishlist = async (data) => {
+  let sledgeAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeAuthApp}`);
+  myHeaders.append("Content-Type", "application/json");
+  let products = data.map((item) => {
+    const { productId, productVariantId, productName, productVariantName, productLink, productImage, productCurrency, productPrice } = item;
+    return {
+      id: sanitizeDataId(productId),
+      variant_id: sanitizeDataId(productVariantId),
+      name: productName,
+      variant_name: productVariantName,
+      url: productLink,
+      image_url: productImage,
+      currency: productCurrency,
+      price: productPrice
+    };
+  });
+  var raw = JSON.stringify({
+    products
+  });
+  var requestOptions = {
+    method: "POST",
+    headers: myHeaders,
+    body: raw,
+    redirect: "follow"
+  };
+  return await fetch(`${API_URL}/wishlist/bulk`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
+const checkWishlist = async (id, variantId) => {
+  let convertId = sanitizeDataId(id);
+  let convertVariantId = variantId ? sanitizeDataId(variantId) : "";
+  let sledgeAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
+  let queryParams = "?" + new URLSearchParams({
+    variant_id: convertVariantId
+  }).toString();
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeAuthApp}`);
+  var requestOptions = {
+    method: "GET",
+    headers: myHeaders,
+    redirect: "follow"
+  };
+  return await fetch(`${API_URL}/wishlist/check/${convertId}${queryParams}`, requestOptions).then((response) => response.json()).then((result) => {
+    return Boolean(result.data);
+  }).catch(() => {
+    return;
+  });
+};
+const addToCartTrigger$1 = async (data) => {
+  const { productId } = data;
+  let sledgeAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeAuthApp}`);
+  myHeaders.append("Content-Type", "application/json");
+  var raw = JSON.stringify({
+    product: {
+      id: sanitizeDataId(productId)
+    }
+  });
+  var requestOptions = {
+    method: "POST",
+    headers: myHeaders,
+    body: raw,
+    redirect: "follow"
+  };
+  return await fetch(`${API_URL}/wishlist/cart`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
+const ButtonDetail = "";
+const Trigger$1 = "";
+const Trigger = (props) => {
+  var _a, _b, _c;
+  const { data, forceActive, hidden, onAfterAddWishlist, onAfterRemoveWishlist } = props;
+  const { productId, productVariantId } = data || {};
+  const { isRenderApp } = React__default.useContext(SledgeContext);
+  const defaultColorIcon = "#767676";
+  const defaultTypeIcon = "outline";
+  const activeColorIcon = "#F85538";
+  const activeTypeIcon = "fill";
+  const [colorIcon, setColorIcon] = React__default.useState(defaultColorIcon);
+  const [typeIcon, setTypeIcon] = React__default.useState(defaultTypeIcon);
+  const [isWishlist, setIsWishlist] = React__default.useState(false);
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [dataSettings, setDataSettings] = React__default.useState({});
+  const [handleFunctions, _setHandleFunctions] = React__default.useState({
+    onAfterAddWishlist,
+    onAfterRemoveWishlist
+  });
+  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
+  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
+  const { show: show_notification, location: location_notification } = ((_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.notification) || {};
+  const { title_added_to_wishlist, text_added_to_wishlist, title_removed_to_wishlist, text_removed_to_wishlist } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.notification) || {};
+  const handleCheckWishlist = async () => {
+    let response;
+    response = await checkWishlist(productId, productVariantId);
+    setIsWishlist(response);
+  };
+  const handleClick = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isRequiredLogin) {
+      if (typeof window !== "undefined" && window.sledgeConfirmationPopup)
+        window.sledgeConfirmationPopup({
+          title: "Login required!",
+          message: "Please login to save your wishlist across devices.",
+          textSubmit: "Login",
+          textCancel: "Cancel",
+          buttonSubmitType: "info",
+          onSubmit: () => window.location.href = "/account/login"
+        });
+      return;
+    }
+    setIsWishlist(!isWishlist);
+    let resAddWishlist = await addWishlist(data);
+    const { status, data: response_data } = resAddWishlist || {};
+    const { code } = status || {};
+    if (code === 200) {
+      if (typeof window !== "undefined") {
+        if (window.sledgeWishlistBadgeUpdate)
+          window.sledgeWishlistBadgeUpdate();
+        if (window.sledgeWishlistWidgetListUpdate)
+          window.sledgeWishlistWidgetListUpdate();
+        if (window.sledgeWishlistButtonDetailUpdate)
+          window.sledgeWishlistButtonDetailUpdate();
+      }
+      handleCheckWishlist();
+      if (!isWishlist) {
+        handleFunctions.onAfterAddWishlist && handleFunctions.onAfterAddWishlist("success");
+      } else {
+        handleFunctions.onAfterRemoveWishlist && handleFunctions.onAfterRemoveWishlist("success");
+      }
+      if (typeof window !== "undefined" && window.sledgeToastNotification && show_notification)
+        window.sledgeToastNotification({
+          title: !isWishlist ? title_added_to_wishlist : title_removed_to_wishlist,
+          message: !isWishlist ? text_added_to_wishlist : text_removed_to_wishlist,
+          location: location_notification,
+          type: "success",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 40, height: 40, color: "black", type: "outline" })
+        });
+    } else {
+      if (!isWishlist) {
+        handleFunctions.onAfterAddWishlist && handleFunctions.onAfterAddWishlist("failed");
+      } else {
+        handleFunctions.onAfterRemoveWishlist && handleFunctions.onAfterRemoveWishlist("failed");
+      }
+      if (typeof window !== "undefined" && window.sledgeToastNotification && show_notification)
+        window.sledgeToastNotification({
+          title: "Failed",
+          message: "failed add to wishlist",
+          location: location_notification,
+          type: "failed",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 40, height: 40, color: "black", type: "outline" })
+        });
+    }
+  };
+  const handleSettings = async (LOCAL_STORAGE_WISHLIST_SETTING) => {
+    setIsLoading(true);
+    let response;
+    let run = false;
+    response = JSON.parse(LOCAL_STORAGE_WISHLIST_SETTING);
+    if (!response)
+      return;
+    const { status, data: data2 } = response;
+    const { code } = status;
+    run = code === 200 || false;
+    if (run) {
+      setDataSettings(data2);
+      setIsLoading(false);
+    }
+  };
+  React__default.useEffect(() => {
+    if (!(isRenderApp == null ? void 0 : isRenderApp.wishlist))
+      return;
+    if (typeof window !== "undefined") {
+      window.sledgeWishlistTriggerUpdate = () => {
+        handleCheckWishlist();
+      };
+    }
+    setIsRequiredLogin(localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) && is_required_login);
+    handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) || "");
+  }, [isRenderApp]);
+  React__default.useEffect(() => {
+    handleCheckWishlist();
+  }, [productVariantId]);
+  const isActive = (isWishlist || forceActive) && !isRequiredLogin;
+  React__default.useEffect(() => {
+    if (isActive) {
+      setColorIcon(activeColorIcon);
+      setTypeIcon(activeTypeIcon);
+    } else {
+      setColorIcon(defaultColorIcon);
+      setTypeIcon(defaultTypeIcon);
+    }
+  }, [isWishlist]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isLoading && !hidden && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__trigger-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "span",
+    {
+      className: "sledge-wishlist__trigger",
+      onClick: (e) => handleClick(e),
+      onMouseEnter: () => {
+        if (isActive)
+          return;
+        setColorIcon(activeColorIcon);
+        setTypeIcon(activeTypeIcon);
+      },
+      onMouseLeave: () => {
+        if (isActive)
+          return;
+        setColorIcon(defaultColorIcon);
+        setTypeIcon(defaultTypeIcon);
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 16.67, height: 15.83, type: typeIcon, color: colorIcon })
+    }
+  ) }) });
+};
+const Widget$1 = "";
+const WidgetHeaderClearTrigger = ({ buttonText, shareId, dataSettings, isFirstLoading }) => {
+  var _a, _b, _c, _d, _e;
+  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
+  const {
+    text_color: display_button_clear_all_text_color,
+    border_color: display_button_clear_all_border_color,
+    border_radius: display_button_clear_all_border_radius,
+    padding_top: display_button_clear_all_padding_top,
+    padding_bottom: display_button_clear_all_padding_bottom,
+    padding_left: display_button_clear_all_padding_left,
+    padding_right: display_button_clear_all_padding_right,
+    background_color: display_button_clear_all_background_color,
+    font_size: display_button_clear_all_font_size,
+    font_weight: display_button_clear_all_font_weight,
+    text_transform: display_button_clear_all_text_transform
+  } = ((_c = (_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.widget) == null ? void 0 : _c.button_clear_all) || {};
+  const { title_confirm_clear_all_wishlist, text_confirm_clear_all_wishlist, button_submit_confirm_clear_all_wishlist, button_cancel_confirm_clear_all_wishlist } = ((_d = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _d.popup) || {};
+  const { button_clear_all } = ((_e = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _e.widget) || {};
+  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
+  const display_button_clear_all_style = {
+    ...display_button_clear_all_text_color && { color: display_button_clear_all_text_color },
+    ...display_button_clear_all_border_color && { borderColor: display_button_clear_all_border_color },
+    ...display_button_clear_all_border_radius && { borderRadius: display_button_clear_all_border_radius },
+    ...display_button_clear_all_padding_top && { paddingTop: display_button_clear_all_padding_top },
+    ...display_button_clear_all_padding_bottom && { paddingBottom: display_button_clear_all_padding_bottom },
+    ...display_button_clear_all_padding_left && { paddingLeft: display_button_clear_all_padding_left },
+    ...display_button_clear_all_padding_right && { paddingRight: display_button_clear_all_padding_right },
+    ...display_button_clear_all_background_color && { backgroundColor: display_button_clear_all_background_color },
+    ...display_button_clear_all_font_size && { fontSize: display_button_clear_all_font_size },
+    ...display_button_clear_all_font_weight && { fontWeight: display_button_clear_all_font_weight },
+    ...display_button_clear_all_text_transform && { textTransform: display_button_clear_all_text_transform }
+  };
+  React__default.useEffect(() => {
+    setIsRequiredLogin(localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) && is_required_login);
+  }, []);
+  const handleClick = () => {
+    if (typeof window !== "undefined" && window.sledgeConfirmationPopup)
+      window.sledgeConfirmationPopup({
+        title: title_confirm_clear_all_wishlist,
+        message: text_confirm_clear_all_wishlist,
+        textSubmit: button_submit_confirm_clear_all_wishlist,
+        textCancel: button_cancel_confirm_clear_all_wishlist,
+        buttonSubmitType: "danger",
+        onSubmit: window.sledgeWishlistWidgetClearList || {}
+      });
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !shareId && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "132px", height: "46px", color: "grey-100", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", colorType: "danger", onClick: handleClick, style: display_button_clear_all_style, children: button_clear_all ? button_clear_all : buttonText || "Clear Wishlist" }) }) }) }) });
+};
+const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger, shareLink, shareId, dataSettings, isFirstLoading }) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
+  const {
+    text_color: display_button_share_text_color,
+    border_color: display_button_share_border_color,
+    border_radius: display_button_share_border_radius,
+    padding_top: display_button_share_padding_top,
+    padding_bottom: display_button_share_padding_bottom,
+    padding_left: display_button_share_padding_left,
+    padding_right: display_button_share_padding_right,
+    background_color: display_button_share_background_color,
+    font_size: display_button_share_font_size,
+    font_weight: display_button_share_font_weight,
+    text_transform: display_button_share_text_transform
+  } = ((_c = (_b = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _b.widget) == null ? void 0 : _c.button_share) || {};
+  const { title_share_wishlist } = ((_d = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _d.popup) || {};
+  const { button_share } = ((_e = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _e.widget) || {};
+  const { title_added_all_to_wishlist, text_added_all_to_wishlist } = ((_f = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _f.notification) || {};
+  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
+  const display_button_share_style = {
+    ...display_button_share_text_color && { color: display_button_share_text_color },
+    ...display_button_share_border_color && { borderColor: display_button_share_border_color },
+    ...display_button_share_border_radius && { borderRadius: display_button_share_border_radius },
+    ...display_button_share_padding_top && { paddingTop: display_button_share_padding_top },
+    ...display_button_share_padding_bottom && { paddingBottom: display_button_share_padding_bottom },
+    ...display_button_share_padding_left && { paddingLeft: display_button_share_padding_left },
+    ...display_button_share_padding_right && { paddingRight: display_button_share_padding_right },
+    ...display_button_share_background_color && { backgroundColor: display_button_share_background_color },
+    ...display_button_share_font_size && { fontSize: display_button_share_font_size },
+    ...display_button_share_font_weight && { fontWeight: display_button_share_font_weight },
+    ...display_button_share_text_transform && { textTransform: display_button_share_text_transform }
+  };
+  const [isLoadingBulkAdd, setIsLoadingBulkAdd] = React__default.useState(false);
+  let clipboardIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 17V20C15 20.2652 14.8946 20.5196 14.7071 20.7071C14.5196 20.8946 14.2652 21 14 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V8C3 7.73478 3.10536 7.48043 3.29289 7.29289C3.48043 7.10536 3.73478 7 4 7H7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M18 3H8C7.44772 3 7 3.44772 7 4V16C7 16.5523 7.44772 17 8 17H18C18.5523 17 19 16.5523 19 16V4C19 3.44772 18.5523 3 18 3Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>`;
+  let checkIcon = `<svg width="20" height="20" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
+  const handleBulkAddWishlist = async () => {
+    var _a2;
+    setIsLoadingBulkAdd(true);
+    let data = wishlistData.map((item) => {
+      const { id, variant_id, name, variant_name, url, image_url, currency, price } = item.product;
+      return {
+        productId: id,
+        productVariantId: variant_id,
+        productName: name,
+        productVariantName: variant_name,
+        productLink: url,
+        productImage: image_url,
+        productCurrency: currency,
+        productPrice: price
+      };
+    });
+    let resBulkAddWishlist = await bulkAddWishlist(data);
+    if (((_a2 = resBulkAddWishlist == null ? void 0 : resBulkAddWishlist.status) == null ? void 0 : _a2.code) === 200) {
+      if (typeof window !== "undefined") {
+        if (window.sledgeWishlistBadgeUpdate)
+          window.sledgeWishlistBadgeUpdate();
+        if (window.sledgeInfoPopup)
+          window.sledgeInfoPopup({
+            title: title_added_all_to_wishlist,
+            message: text_added_all_to_wishlist,
+            textCancel: "Cancel"
+          });
+      }
+      setIsLoadingBulkAdd(false);
+    } else {
+      if (typeof window !== "undefined" && window.sledgeInfoPopup)
+        window.sledgeInfoPopup({
+          title: "Failed",
+          message: "Failed add to wishlist, please try again",
+          textCancel: "Cancel"
+        });
+    }
+  };
+  const handleCopyShareLink = () => {
+    let running = true;
+    document.body.addEventListener("DOMNodeInserted", () => {
+      let boxCopyElement = document.querySelector(".sledge-wishlist__widget-box-copy");
+      if (boxCopyElement && running) {
+        running = false;
+        let copyTriggerElement = document.querySelector(".sledge-wishlist__widget-box-copy-icon");
+        copyTriggerElement == null ? void 0 : copyTriggerElement.addEventListener("click", () => {
+          var _a2;
+          let shareLink2 = (_a2 = document.querySelector(".sledge-wishlist__widget-box-copy-content")) == null ? void 0 : _a2.textContent;
+          if (shareLink2) {
+            navigator.clipboard.writeText(shareLink2);
+            if (copyTriggerElement) {
+              copyTriggerElement.classList.add("active");
+              copyTriggerElement.innerHTML = checkIcon;
+              setTimeout(() => {
+                if (copyTriggerElement) {
+                  copyTriggerElement.classList.remove("active");
+                  copyTriggerElement.innerHTML = clipboardIcon;
+                }
+              }, 2500);
+            }
+          }
+        });
+      }
+    });
+  };
+  const handleClick = async () => {
+    if (shareId && wishlistData.length) {
+      window.sledgeConfirmationPopup({
+        title: "Are you sure want to add this to your wishlist item?",
+        message: `This action cannot be undone. This will adding <strong>${wishlistData.length}</strong> item to your wishlist page.`,
+        textSubmit: "Add to your wishlist",
+        textCancel: "Cancel",
+        buttonSubmitType: "info",
+        onSubmit: handleBulkAddWishlist || {}
+      });
+    } else {
+      if (typeof window !== "undefined" && window.sledgeInfoPopup) {
+        window.sledgeInfoPopup({
+          title: title_share_wishlist,
+          message: shareLink ? `<div class="sledge-wishlist__widget-box-copy">
+                                <div class="sledge-wishlist__widget-box-copy-icon" title="Copy to clipboard">
+                                    ${clipboardIcon}
+                                </div>
+                                <div class="sledge-wishlist__widget-box-copy-content">${shareLink}</div>
+                            </div>` : "",
+          textCancel: "Cancel"
+        });
+        handleCopyShareLink();
+      }
+    }
+  };
+  React__default.useEffect(() => {
+    setIsRequiredLogin(localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) && is_required_login);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: showShareTrigger && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "136px", height: "46px", color: "grey-100", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item sledge-wishlist__widget-header-share-trigger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Button,
+    {
+      type: "button",
+      style: display_button_share_style,
+      ...shareId && !wishlistData.length || isLoadingBulkAdd ? {
+        disabled: true
+      } : {
+        onClick: handleClick
+      },
+      children: shareId ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-wishlist__badge-counter sledge-wishlist__badge-counter-top-right", children: wishlistData.length }),
+        isLoadingBulkAdd ? "Adding..." : "Add to your wishlist"
+      ] }) : button_share ? button_share : buttonText || "Share Wishlist"
+    }
+  ) }) }) }) });
+};
+const WidgetHeaderSearchForm = ({ setIsLoading, setKeyword, keyword, placeholder, dataSettings }) => {
+  var _a, _b;
+  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
+  const { search_form_placeholder } = ((_b = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _b.widget) || {};
+  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
+  const searchFieldRef = React__default.useRef(null);
+  const handleResetField = () => {
+    var _a2;
+    setIsLoading && setIsLoading(true);
+    setKeyword && setKeyword("");
+    (_a2 = searchFieldRef == null ? void 0 : searchFieldRef.current) == null ? void 0 : _a2.focus();
+  };
+  const handleChangeField = (value) => {
+    setKeyword && setKeyword(value);
+  };
+  React__default.useEffect(() => {
+    setIsRequiredLogin(localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) && is_required_login);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SearchInputField,
+    {
+      type: "text",
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
+      placeholder: search_form_placeholder ? search_form_placeholder : placeholder || "Search product...",
+      value: keyword,
+      fieldRef: searchFieldRef,
+      onChange: ({ value }) => handleChangeField(value),
+      onResetField: handleResetField,
+      className: "sledge-wishlist__widget-search-form",
+      withClearField: true
+    }
+  ) });
+};
+const WidgetHeaderTitle = ({ text, dataSettings }) => {
+  var _a, _b, _c;
+  const {
+    color: display_header_title_color,
+    font_size: display_header_title_font_size,
+    font_weight: display_header_title_font_weight,
+    text_transform: display_header_title_text_transform
+  } = ((_b = (_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.widget) == null ? void 0 : _b.header_title) || {};
+  const { header_title: language_header_title } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.widget) || {};
+  const display_header_title_style = {
+    ...display_header_title_color && { color: display_header_title_color },
+    ...display_header_title_font_size && { fontSize: display_header_title_font_size },
+    ...display_header_title_font_weight && { fontWeight: display_header_title_font_weight },
+    ...display_header_title_text_transform && { textTransform: display_header_title_text_transform }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { style: display_header_title_style, children: language_header_title ? language_header_title : text || "My Wishlist" }) });
+};
+const WidgetHeaderLimit = ({ options, defaultLimitOptions, selectedLimit, setSelectedLimit, setIsRefreshWidgetList, dataSettings }) => {
+  var _a;
+  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
+  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
+  let getOptions = options || defaultLimitOptions;
+  const handleChangeLimit = (value) => {
+    setSelectedLimit && setSelectedLimit(value);
+    setIsRefreshWidgetList && setIsRefreshWidgetList(true);
+  };
+  React__default.useEffect(() => {
+    setIsRequiredLogin(localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) && is_required_login);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: getOptions && Boolean(getOptions == null ? void 0 : getOptions.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SelectField,
+    {
+      align: "end",
+      options: getOptions.map((item) => {
+        return {
+          label: item,
+          value: item
+        };
+      }),
+      value: selectedLimit || getOptions[0],
+      onChange: ({ value }) => handleChangeLimit(value)
+    }
+  ) }) }) });
+};
+const WidgetHeaderSort$1 = ({ wishlistSort, selectedSort, setSelectedSort, setIsRefreshWidgetList, dataSettings }) => {
+  var _a, _b;
+  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
+  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
+  const handleChangeSort = (value) => {
+    setSelectedSort && setSelectedSort(value);
+    setIsRefreshWidgetList && setIsRefreshWidgetList(true);
+  };
+  React__default.useEffect(() => {
+    setIsRequiredLogin(localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) && is_required_login);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: wishlistSort && Boolean(wishlistSort == null ? void 0 : wishlistSort.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SelectField,
+    {
+      align: "end",
+      options: wishlistSort.map((item) => {
+        const { name, value } = item;
+        return {
+          label: name,
+          value
+        };
+      }),
+      value: selectedSort || ((_b = wishlistSort[0]) == null ? void 0 : _b.value),
+      onChange: ({ value }) => handleChangeSort(value)
+    }
+  ) }) }) });
+};
+const WidgetHeader$1 = ({ isFirstLoading, ...props }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header", children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "8px",
+        width: "100%",
+        justifyContent: "space-between"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "190px", height: "46px", color: "grey-100", rounded: "md" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "440px", height: "46px", color: "grey-100", rounded: "md" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "132px", height: "46px", color: "grey-100", rounded: "md" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "136px", height: "46px", color: "grey-100", rounded: "md" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "26px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "190px", height: "46px", color: "grey-100", rounded: "md" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "190px", height: "46px", color: "grey-100", rounded: "md" })
+            ]
+          }
+        )
+      ]
+    }
+  ) : React__default.Children.count(props.children) && React__default.Children.map(
+    props.children,
+    (child) => React__default.cloneElement(child, {
+      ...props
+    })
+  ) });
+};
+WidgetHeader$1.Title = WidgetHeaderTitle;
+WidgetHeader$1.SearchForm = WidgetHeaderSearchForm;
+WidgetHeader$1.ShareTrigger = WidgetHeaderShareTrigger;
+WidgetHeader$1.ClearTrigger = WidgetHeaderClearTrigger;
+WidgetHeader$1.Sort = WidgetHeaderSort$1;
+WidgetHeader$1.Limit = WidgetHeaderLimit;
+const usePrevious = (value) => {
+  const ref = React__default.useRef();
+  React__default.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+const WidgetPopup = "";
+const Rating$1 = "";
+const getReviewInfo = async (id) => {
+  let convertId = sanitizeDataId(id);
+  let sledgeAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeAuthApp}`);
+  var requestOptions = {
+    method: "GET",
+    headers: myHeaders,
+    redirect: "follow"
+  };
+  return await fetch(`${API_URL}/review/info/${convertId}`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
+const Rating = (props) => {
+  var _a;
+  const { value, size = "md", data, withSkeletonLoading = true } = props;
+  const { productId } = data || {};
+  const { isRenderApp } = React__default.useContext(SledgeContext);
+  const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [sizing, setSizing] = React__default.useState({
+    width: 0,
+    height: 0
+  });
+  const [totalReview, setTotalReview] = React__default.useState(0);
+  const [averageReview, setAverageReview] = React__default.useState("0");
+  const [dataSettings, setDataSettings] = React__default.useState({});
+  const { fill_color, outline_color } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.rating) || {};
+  const handleProductRatingInfo = async () => {
+    var _a2;
+    if (value && !data) {
+      setAverageReview(value);
+      setIsLoading(false);
+    } else {
+      let response;
+      let run = false;
+      let valueTotalReview = 0;
+      let valueAverageReview;
+      response = await getReviewInfo(productId);
+      if (!response)
+        return;
+      const { status, data: data2 } = response;
+      const { code } = status;
+      run = code === 200 || false;
+      valueTotalReview = (data2 == null ? void 0 : data2.review_count) ? data2.review_count : 0;
+      valueAverageReview = ((_a2 = data2 == null ? void 0 : data2.rating) == null ? void 0 : _a2.average) ? data2.rating.average : 0;
+      if (run) {
+        setTotalReview(valueTotalReview);
+        setAverageReview(valueAverageReview);
+        setIsLoading(false);
+      }
+    }
+  };
+  const handleSettings = async (LOCAL_STORAGE_PRODUCT_REVIEW_SETTING) => {
+    setIsLoading(true);
+    let response;
+    let run = false;
+    response = JSON.parse(LOCAL_STORAGE_PRODUCT_REVIEW_SETTING);
+    if (!response)
+      return;
+    const { status, data: data2 } = response;
+    const { code } = status;
+    run = code === 200 || false;
+    if (run) {
+      setDataSettings(data2);
+      await handleProductRatingInfo();
+    }
+  };
+  React__default.useEffect(() => {
+    if (!(isRenderApp == null ? void 0 : isRenderApp.productReview))
+      return;
+    if (size === "xs") {
+      setSizing({
+        width: 14.4,
+        height: 14.4
+      });
+    } else if (size === "sm") {
+      setSizing({
+        width: 18,
+        height: 18
+      });
+    } else {
+      setSizing({
+        width: 28.8,
+        height: 28.8
+      });
+    }
+    handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.PRODUCT_REVIEW_SETTING) || "");
+    setTimeout(() => {
+      setIsFirstLoading(false);
+    }, 1300);
+  }, [isRenderApp]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__rating", children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "grey-100", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, id: "sledge-product-review-rating-icon-svg-store", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("symbol", { id: "sledge-product-review-icons-rating-icon-fill", viewBox: "0 0 30 29", fill: fill_color || "#23BC45", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M7.00014 17.7L1.20174 12.9C0.107339 12.0248 0.587339 10.2648 1.97614 10.0664L10.2001 9.69998L13.7121 0.895176C13.9569 0.407176 14.4545 0.0999756 15.0001 0.0999756C15.5457 0.0999756 16.0433 0.408776 16.2881 0.895176L19.8001 9.69998L28.0241 10.0664C29.4129 10.2648 29.8929 12.0248 28.7985 12.9L23.0001 17.7L24.5825 27.0712C24.7649 28.3496 23.4369 29.3064 22.2833 28.7288L15.0001 24.1L7.71694 28.7272C6.56174 29.3048 5.23534 28.348 5.41774 27.0696L7.00014 17.7Z"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("symbol", { id: "sledge-product-review-icons-rating-icon-line", viewBox: "0 0 30 29", stroke: outline_color || "#8D9196", fill: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M7.00014 17.7L1.20174 12.9C0.107339 12.0248 0.587339 10.2648 1.97614 10.0664L10.2001 9.69998L13.7121 0.895176C13.9569 0.407176 14.4545 0.0999756 15.0001 0.0999756C15.5457 0.0999756 16.0433 0.408776 16.2881 0.895176L19.8001 9.69998L28.0241 10.0664C29.4129 10.2648 29.8929 12.0248 28.7985 12.9L23.0001 17.7L24.5825 27.0712C24.7649 28.3496 23.4369 29.3064 22.2833 28.7288L15.0001 24.1L7.71694 28.7272C6.56174 29.3048 5.23534 28.348 5.41774 27.0696L7.00014 17.7Z",
+          strokeWidth: "1.4"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { id: "sledge-product-review-icons-rating-icon", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("use", { href: "#sledge-product-review-icons-rating-icon-line", className: "sledge-product-review__rating-icon-line" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("use", { href: "#sledge-product-review-icons-rating-icon-fill", className: "sledge-product-review__rating-icon-fill" })
+      ] }) })
+    ] }),
+    !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      [1, 2, 3, 4, 5].map((item, index) => {
+        let ratingValue = Math.floor(parseFloat(averageReview));
+        let getCommaValue = String(averageReview).includes(",") ? String(averageReview).split(",") : [];
+        let getCommaValueDot = String(averageReview).includes(".") ? String(averageReview).split(".") : [];
+        let isHaveCommaValue = getCommaValue.length || getCommaValueDot.length;
+        let commaValue = isHaveCommaValue ? getCommaValue[1] || getCommaValueDot[1] : 0;
+        let fillOther = "fill-0";
+        if (item > ratingValue && ratingValue + 1 === item) {
+          fillOther = `fill-${commaValue}`;
+        }
+        return /* @__PURE__ */ createElement("svg", { ...sizing, viewBox: "0 0 30 29", "data-product-review-rating-fill": item <= ratingValue ? "full" : fillOther, key: index }, /* @__PURE__ */ jsxRuntimeExports.jsx("use", { href: "#sledge-product-review-icons-rating-icon" }));
+      }),
+      !value && data ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__rating-summary-total", children: [
+        "(",
+        totalReview,
+        ")"
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {})
+    ] })
+  ] }) });
+};
+const Widget = "";
+const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, data, onAfterAddReview }) => {
+  var _a, _b, _c;
+  const {
+    text_color: display_button_write_review_text_color,
+    border_color: display_button_write_review_border_color,
+    border_radius: display_button_write_review_border_radius,
+    padding_top: display_button_write_review_padding_top,
+    padding_bottom: display_button_write_review_padding_bottom,
+    padding_left: display_button_write_review_padding_left,
+    padding_right: display_button_write_review_padding_right,
+    background_color: display_button_write_review_background_color,
+    font_size: display_button_write_review_font_size,
+    font_weight: display_button_write_review_font_weight,
+    text_transform: display_button_write_review_text_transform
+  } = ((_b = (_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.widget) == null ? void 0 : _b.button_write_review) || {};
+  const { button_write_review } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.widget) || {};
+  const display_button_write_review_style = {
+    ...display_button_write_review_text_color && { color: display_button_write_review_text_color },
+    ...display_button_write_review_border_color && { borderColor: display_button_write_review_border_color },
+    ...display_button_write_review_border_radius && { borderRadius: display_button_write_review_border_radius },
+    ...display_button_write_review_padding_top && { paddingTop: display_button_write_review_padding_top },
+    ...display_button_write_review_padding_bottom && { paddingBottom: display_button_write_review_padding_bottom },
+    ...display_button_write_review_padding_left && { paddingLeft: display_button_write_review_padding_left },
+    ...display_button_write_review_padding_right && { paddingRight: display_button_write_review_padding_right },
+    ...display_button_write_review_background_color && { backgroundColor: display_button_write_review_background_color },
+    ...display_button_write_review_font_size && { fontSize: display_button_write_review_font_size },
+    ...display_button_write_review_font_weight && { fontWeight: display_button_write_review_font_weight },
+    ...display_button_write_review_text_transform && { textTransform: display_button_write_review_text_transform }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-header-item", children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "134px", height: "42px", rounded: "lg", color: "grey-100" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Button,
+    {
+      type: "button",
+      colorType: "success",
+      onClick: () => typeof window !== "undefined" && window.sledgeProductReviewWidgetFormAdd && window.sledgeProductReviewWidgetFormAdd(data, onAfterAddReview),
+      style: display_button_write_review_style,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M13.8323 14.1264C14.1083 14.1264 14.3323 14.3504 14.3323 14.6264C14.3323 14.9024 14.1083 15.1264 13.8323 15.1264H8.99701C8.72101 15.1264 8.49701 14.9024 8.49701 14.6264C8.49701 14.3504 8.72101 14.1264 8.99701 14.1264H13.8323ZM10.7429 2.93576C10.7762 2.96176 11.8915 3.82843 11.8915 3.82843C12.2969 4.06976 12.6135 4.5011 12.7335 5.01176C12.8529 5.5171 12.7662 6.03843 12.4882 6.47909C12.4864 6.48203 12.4845 6.48494 12.4781 6.49358L12.4731 6.50025C12.4279 6.55972 12.2318 6.80776 11.2417 8.04815C11.2325 8.06441 11.2221 8.07963 11.2107 8.09443C11.1941 8.11624 11.1759 8.13628 11.1565 8.15453C11.089 8.23956 11.0176 8.3289 10.9426 8.42283L10.7907 8.61313C10.4772 9.00579 10.1053 9.47139 9.66407 10.0236L9.43764 10.3071C8.58586 11.3732 7.49499 12.7382 6.09755 14.4864C5.79155 14.8678 5.33288 15.0898 4.84021 15.0958L2.41421 15.1264H2.40755C2.17621 15.1264 1.97488 14.9678 1.92088 14.7418L1.37488 12.4278C1.26221 11.9484 1.37421 11.4538 1.68155 11.0698L7.96155 3.2151C7.96421 3.21243 7.96621 3.2091 7.96888 3.20643C8.65755 2.3831 9.90288 2.26176 10.7429 2.93576ZM7.26136 5.69133L2.46221 11.6944C2.34821 11.8371 2.30621 12.0211 2.34821 12.1978L2.80221 14.1211L4.82821 14.0958C5.02088 14.0938 5.19888 14.0078 5.31688 13.8611C5.92454 13.1008 6.68825 12.1452 7.47345 11.1627L7.75125 10.815L8.02952 10.4668C8.76591 9.54526 9.4934 8.63471 10.1021 7.87258L7.26136 5.69133ZM8.73888 3.84443L7.88603 4.91L10.7265 7.09062C11.2733 6.4058 11.633 5.95476 11.6662 5.91176C11.7755 5.73443 11.8182 5.48376 11.7609 5.24243C11.7022 4.9951 11.5482 4.78509 11.3262 4.65109C11.2789 4.61843 10.1555 3.74643 10.1209 3.71909C9.69821 3.38043 9.08155 3.4391 8.73888 3.84443Z",
+            fill: "currentColor"
+          }
+        ) }),
+        text ? text : button_write_review || "Add review"
+      ]
+    }
+  ) });
+};
+const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, setSelectedSort, setIsRefreshWidgetList }) => {
+  var _a, _b;
+  const { default_sort, show_sorting_options } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.widget) || {};
+  const [clickedSortId, setClickedSortId] = React__default.useState(default_sort || null);
+  const handleChangeSort = (value) => {
+    setClickedSortId(value);
+    setIsRefreshWidgetList && setIsRefreshWidgetList(true);
+    setSelectedSort && setSelectedSort(value);
+  };
+  const getSelectedSort = clickedSortId || ((_b = productReviewSort[0]) == null ? void 0 : _b.value);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !show_sorting_options ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-header-item", children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "134px", height: "42px", rounded: "lg", color: "grey-100" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SelectField,
+    {
+      align: "end",
+      prefixLabel: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M11.5919 9.13869C12.7359 9.13869 13.6666 10.0647 13.6666 11.2027C13.6666 12.3407 12.7359 13.2667 11.5919 13.2667C10.4473 13.2667 9.51593 12.3407 9.51593 11.2027C9.51593 10.0647 10.4473 9.13869 11.5919 9.13869ZM11.5919 10.1387C10.9986 10.1387 10.5159 10.616 10.5159 11.2027C10.5159 11.79 10.9986 12.2667 11.5919 12.2667C12.1846 12.2667 12.6666 11.79 12.6666 11.2027C12.6666 10.616 12.1846 10.1387 11.5919 10.1387ZM6.7202 10.7286C6.9962 10.7286 7.2202 10.9526 7.2202 11.2286C7.2202 11.5046 6.9962 11.7286 6.7202 11.7286H2.51953C2.24353 11.7286 2.01953 11.5046 2.01953 11.2286C2.01953 10.9526 2.24353 10.7286 2.51953 10.7286H6.7202ZM4.07533 2.66669C5.22 2.66669 6.15067 3.59335 6.15067 4.73135C6.15067 5.86935 5.22 6.79469 4.07533 6.79469C2.93133 6.79469 2 5.86935 2 4.73135C2 3.59335 2.93133 2.66669 4.07533 2.66669ZM4.07533 3.66669C3.48267 3.66669 3 4.14402 3 4.73135C3 5.31802 3.48267 5.79469 4.07533 5.79469C4.66867 5.79469 5.15067 5.31802 5.15067 4.73135C5.15067 4.14402 4.66867 3.66669 4.07533 3.66669ZM12.7941 4.26695C13.0701 4.26695 13.2941 4.49095 13.2941 4.76695C13.2941 5.04295 13.0701 5.26695 12.7941 5.26695H8.59407C8.31807 5.26695 8.09407 5.04295 8.09407 4.76695C8.09407 4.49095 8.31807 4.26695 8.59407 4.26695H12.7941Z",
+          fill: "currentColor"
+        }
+      ) }),
+      prefixSelectedLabel: "Sort by",
+      options: productReviewSort.map((item) => {
+        const { name, value } = item;
+        return {
+          label: name,
+          value
+        };
+      }),
+      value: getSelectedSort,
+      onChange: ({ value }) => handleChangeSort(value)
+    }
+  ) }) });
+};
+const ROTATE_FILTER_ARROW_ANIMATION = {
+  open: { rotate: 180 },
+  closed: { rotate: 0 },
+  transition: {
+    type: "spring",
+    duration: 0.2
+  }
+};
+const VISIBLE_ANIMATION = {
+  hidden: { opacity: 0, scale: 0 },
+  visible: (custom) => {
+    const { duration } = custom || {};
+    return {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: "spring",
+        duration: duration || 0.7
+      }
+    };
+  }
+};
+const WidgetHeaderSummary = (props) => {
+  var _a, _b, _c;
+  const { data, dataSettings } = props;
+  const { productId } = data || {};
+  const { fill_color: display_summary_bar_fill_color, outline_color: display_summary_bar_outline_color } = ((_b = (_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.widget) == null ? void 0 : _b.summary_bar) || {};
+  const { review_singular, review_plural } = ((_c = dataSettings == null ? void 0 : dataSettings.languages) == null ? void 0 : _c.widget) || {};
+  const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
+  const [isFirstLoadingSummary, setIsFirstLoadingSummary] = React__default.useState(true);
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [isRefreshRating, setIsRefreshRating] = React__default.useState(true);
+  const [isOpen, setIsOpen] = React__default.useState(false);
+  const [totalReview, setTotalReview] = React__default.useState(0);
+  const [ratingList, setRatingList] = React__default.useState({
+    5: 0,
+    4: 0,
+    3: 0,
+    2: 0,
+    1: 0
+  });
+  const [averageReview, setAverageReview] = React__default.useState("0");
+  const handleProductReviewInfo = async () => {
+    var _a2;
+    let response;
+    let run = false;
+    let valueTotalReview = 0;
+    let valueRatingList;
+    let valueAverageReview;
+    response = await getReviewInfo(productId);
+    if (!response)
+      return;
+    const { status, data: data2 } = response;
+    const { code } = status;
+    run = code === 200 || false;
+    valueTotalReview = (data2 == null ? void 0 : data2.review_count) ? data2.review_count : 0;
+    valueRatingList = (data2 == null ? void 0 : data2.rating) ? {
+      5: data2.rating["5"] || 0,
+      4: data2.rating["4"] || 0,
+      3: data2.rating["3"] || 0,
+      2: data2.rating["2"] || 0,
+      1: data2.rating["1"] || 0
+    } : ratingList;
+    valueAverageReview = ((_a2 = data2 == null ? void 0 : data2.rating) == null ? void 0 : _a2.average) ? data2.rating.average : "0";
+    if (run) {
+      setTotalReview(valueTotalReview);
+      setRatingList(valueRatingList);
+      setAverageReview(valueAverageReview);
+      setIsLoading(false);
+      setIsRefreshRating(false);
+      setIsFirstLoading(false);
+      isOpen && setIsFirstLoadingSummary(false);
+    }
+  };
+  React__default.useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.sledgeProductReviewWidgetSummaryUpdate = () => {
+        setIsRefreshRating(true);
+        handleProductReviewInfo();
+      };
+    }
+    handleProductReviewInfo();
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary", children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "630px", height: "42px", color: "grey-100", rounded: "md", animationDuration: "5s" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Popover,
+    {
+      trigger: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs(motion.div, { initial: false, animate: isOpen ? "open" : "closed", className: "sledge-product-review__widget-summary-trigger", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-average", children: averageReview }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-rating", children: !isRefreshRating && /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { value: String(averageReview), size: "md", withSkeletonLoading: false }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-total", children: [
+          totalReview,
+          " ",
+          totalReview > 1 ? review_plural || "Reviews" : review_singular || "Review"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { variants: ROTATE_FILTER_ARROW_ANIMATION, className: "summary-trigger-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 20, height: 20, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
+            fill: "currentColor",
+            fillRule: "evenodd",
+            clipRule: "evenodd"
+          }
+        ) }) })
+      ] }),
+      content: isFirstLoadingSummary ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist-progress", children: [5, 4, 3, 2, 1].map((index) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-dist-progress-item", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "108px", height: "22px", color: "grey-100", rounded: "md", animationDuration: "15s" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SkeletonLoading.Item,
+            {
+              width: "128px",
+              height: "22px",
+              color: "grey-100",
+              rounded: "md",
+              animationDuration: "13s",
+              style: {
+                marginLeft: "13px",
+                marginRight: "12px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "38px", height: "22px", color: "grey-100", rounded: "md", animationDuration: "42s" })
+        ] }, index);
+      }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist-progress", children: [5, 4, 3, 2, 1].map((item, index) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-dist-progress-item", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Rating, { value: item, size: "sm", withSkeletonLoading: false }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Progress,
+            {
+              value: String(ratingList[item]),
+              total: totalReview,
+              fillColor: display_summary_bar_fill_color,
+              outlineColor: display_summary_bar_outline_color
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { children: [
+            "(",
+            ratingList[item],
+            ")"
+          ] })
+        ] }, index);
+      }) }) }),
+      setIsOpen,
+      hideCloseIcon: true,
+      align: "end",
+      alignOffset: -170,
+      className: "sledge-product-review__widget-summary-content",
+      withArrow: false
+    }
+  ) });
+};
+const WidgetHeader = (props) => {
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  React__default.useEffect(() => {
+    setIsLoading(false);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-header", children: React__default.Children.count(props.children) && React__default.Children.map(
+    props.children,
+    (child) => React__default.cloneElement(child, {
+      ...props
+    })
+  ) }) });
+};
+WidgetHeader.Sort = WidgetHeaderSort;
+WidgetHeader.AddTrigger = WidgetHeaderAddTrigger;
+WidgetHeader.Summary = WidgetHeaderSummary;
+const WidgetPopupDetail = "";
+const WidgetFormAdd = "";
+const fetchApi = async (url, method, body) => {
+  let sledgeInstantSearchAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_AUTH_APP);
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeInstantSearchAuthApp}`);
+  myHeaders.append("Content-Type", "application/json");
+  var requestOptions = {
+    ...{
+      method,
+      headers: myHeaders,
+      redirect: "follow"
+    },
+    ...body && {
+      body: JSON.stringify(body)
+    }
+  };
+  return await fetch(`${INSTANT_SEARCH_ENGINE_URL}${url}`, requestOptions).then((response) => response.json()).then((result) => result).catch(() => {
+    return;
+  });
+};
+const search = async (index, body) => {
+  return await fetchApi(`/indexes/${index}/search`, "POST", body);
+};
+const multiSearch = async (body) => {
+  return await fetchApi("/multi-search", "POST", body);
+};
+const searchTrigger = async (data) => {
+  const { keyword, resultCount } = data;
+  let sledgeAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeAuthApp}`);
+  myHeaders.append("Content-Type", "application/json");
+  var raw = JSON.stringify({
+    keyword,
+    result_count: resultCount
+  });
+  var requestOptions = {
+    method: "POST",
+    headers: myHeaders,
+    body: raw,
+    redirect: "follow"
+  };
+  return await fetch(`${API_URL}/instantsearch/statistics/search`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
+const productClickTrigger = async (data) => {
+  const { productId } = data;
+  let sledgeAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeAuthApp}`);
+  myHeaders.append("Content-Type", "application/json");
+  var raw = JSON.stringify({
+    product: {
+      id: sanitizeDataId(productId)
+    }
+  });
+  var requestOptions = {
+    method: "POST",
+    headers: myHeaders,
+    body: raw,
+    redirect: "follow"
+  };
+  return await fetch(`${API_URL}/instantsearch/statistics/click`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
+const addToCartTrigger = async (data) => {
+  const { productId } = data;
+  let sledgeAuthApp = localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP);
+  var myHeaders = new Headers();
+  myHeaders.append("Authorization", `Bearer ${sledgeAuthApp}`);
+  myHeaders.append("Content-Type", "application/json");
+  var raw = JSON.stringify({
+    product: {
+      id: sanitizeDataId(productId)
+    }
+  });
+  var requestOptions = {
+    method: "POST",
+    headers: myHeaders,
+    body: raw,
+    redirect: "follow"
+  };
+  return await fetch(`${API_URL}/instantsearch/statistics/cart`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
+const ProductGrid = ({
+  type,
+  className = "",
+  data,
+  setting,
+  customProductCard,
+  showOptionOutOfStock = false,
+  triggerPropAdditional,
+  sourceApp = null,
+  onAfterAddToCart,
+  onAfterAddWishlist,
+  onAfterRemoveWishlist,
+  onAfterRenderProduct
+}) => {
+  const {
+    show_vendor = true,
+    show_sku = true,
+    show_price = true,
+    show_add_to_cart = true,
+    redirect_add_to_cart = true,
+    language_button_add_to_cart = "Add To Cart",
+    display_product_name_style = {},
+    display_price_style = {},
+    display_button_add_to_cart_style = {}
+  } = setting || {};
+  let {
+    image: productCardImage = false,
+    outStock: productCardOutStock = "",
+    title: productCardTitle = "",
+    price: productCardPrice = "",
+    text: productCardText = "",
+    rating: productCardRating = false,
+    buttonAddToCart: productCardButtonAddToCart = ""
+  } = customProductCard || {};
+  const [clickedAddToCartId, setClickedAddToCartId] = React__default.useState(null);
+  const handleAddToCart = async (data2) => {
+    var _a;
+    const { id, quantity } = data2;
+    setClickedAddToCartId(id);
+    let resShopifyAddToCart = await addToCart([
+      {
+        id,
+        quantity
+      }
+    ]);
+    if ((_a = resShopifyAddToCart == null ? void 0 : resShopifyAddToCart.items) == null ? void 0 : _a.length) {
+      if (sourceApp === "wishlist") {
+        await addToCartTrigger$1({
+          productId: id
+        });
+      } else if (sourceApp === "instant-search") {
+        await addToCartTrigger({
+          productId: id
+        });
+      }
+      setClickedAddToCartId(null);
+      onAfterAddToCart && onAfterAddToCart("success");
+      if (redirect_add_to_cart) {
+        window.location.href = "/cart";
+      } else {
+        window.sledgeToastNotification({
+          title: "Cart added",
+          message: "Successfully added to wishlist",
+          type: "success",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(BagIcon, { width: 40, height: 40, color: "black" })
+        });
+      }
+    } else {
+      onAfterAddToCart && onAfterAddToCart("failed");
+      setTimeout(() => {
+        var _a2;
+        setClickedAddToCartId(null);
+        if (typeof window !== "undefined" && window.sledgeToastNotification)
+          window.sledgeToastNotification({
+            title: "Failed",
+            message: ((_a2 = resShopifyAddToCart == null ? void 0 : resShopifyAddToCart.description) == null ? void 0 : _a2.length) ? resShopifyAddToCart.description : "failed add to cart, please try again",
+            type: "failed",
+            icon: /* @__PURE__ */ jsxRuntimeExports.jsx(BagIcon, { width: 40, height: 40, color: "black" })
+          });
+      }, 1e3);
+    }
+  };
+  React__default.useEffect(() => {
+    onAfterRenderProduct && onAfterRenderProduct("success");
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
+    var _a;
+    const { product, variants } = item || {};
+    const { id, title, image, url, vendor = "", currency } = product || {};
+    const { id: variant_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
+    let totalStock = ((_a = variants == null ? void 0 : variants.map(({ inventory_quantity }) => inventory_quantity)) == null ? void 0 : _a.reduce((a, b) => a + b, 0)) || 0;
+    let isLoadingAddToCart = clickedAddToCartId == variant_id;
+    let isOutOfStock = !totalStock && showOptionOutOfStock && productCardOutStock;
+    if (customProductCard && Object.keys(customProductCard).length) {
+      productCardTitle = productCardTitle ? replaceString(productCardTitle, [OBJECT_DATA_STRING_KEY.PRODUCT.TITLE], [title]) : productCardTitle;
+      productCardPrice = productCardPrice ? replaceString(productCardPrice, [OBJECT_DATA_STRING_KEY.PRODUCT.CURRENCY, OBJECT_DATA_STRING_KEY.PRODUCT.PRICE], [currency, price]) : productCardPrice;
+      productCardText = productCardText ? replaceString(
+        productCardText,
+        [OBJECT_DATA_STRING_KEY.PRODUCT.VARIANT_TITLE, OBJECT_DATA_STRING_KEY.PRODUCT.VENDOR, OBJECT_DATA_STRING_KEY.PRODUCT.SKU],
+        [variant_title, vendor, sku]
+      ) : productCardText;
+    } else {
+      productCardImage = true;
+      productCardOutStock = "Sold out";
+      productCardTitle = title;
+      productCardPrice = `${currency}${price}`;
+      productCardText = `
+                    <div>${variant_title}</div>
+                    <div>Vendor: ${vendor} | SKU: ${sku}</div>`;
+      productCardRating = true;
+      productCardButtonAddToCart = `
+                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M8.83562 1.50023C10.796 1.50023 12.4155 2.99397 12.6152 4.90442L12.6709 4.90507C13.7584 4.90507 15.0806 5.62732 15.5269 7.65307L16.1186 12.2333C16.3309 13.7116 16.0654 14.8973 15.3281 15.7478C14.5946 16.5938 13.4336 17.0416 11.9704 17.0416H5.7094C4.10215 17.0416 2.9824 16.6478 2.28565 15.8386C1.5859 15.0271 1.3519 13.8098 1.5904 12.2213L2.1724 7.70182C2.5549 5.62957 3.95365 4.90507 5.03665 4.90507C5.13014 4.04293 5.51889 3.22275 6.13562 2.60797C6.84437 1.90372 7.82162 1.50023 8.81987 1.50023H8.83562ZM12.6709 6.03007H5.03665C4.7059 6.03007 3.6004 6.16357 3.28315 7.87657L2.70415 12.3766C2.5159 13.6388 2.6614 14.5523 3.13765 15.1051C3.6079 15.6511 4.4494 15.9166 5.7094 15.9166H11.9704C12.7564 15.9166 13.8296 15.7598 14.4776 15.0113C14.9921 14.4181 15.1691 13.5346 15.0041 12.3848L14.4199 7.84582C14.1709 6.72757 13.5139 6.03007 12.6709 6.03007ZM11.023 8.11815C11.3335 8.11815 11.6027 8.37015 11.6027 8.68065C11.6027 8.99115 11.368 9.24315 11.0575 9.24315H11.023C10.7125 9.24315 10.4605 8.99115 10.4605 8.68065C10.4605 8.37015 10.7125 8.11815 11.023 8.11815ZM6.65042 8.11815C6.96092 8.11815 7.23017 8.37015 7.23017 8.68065C7.23017 8.99115 6.99467 9.24315 6.68417 9.24315H6.65042C6.33992 9.24315 6.08792 8.99115 6.08792 8.68065C6.08792 8.37015 6.33992 8.11815 6.65042 8.11815ZM8.83337 2.62522H8.82212C8.11637 2.62522 7.42862 2.90947 6.92987 3.40522C6.5236 3.80967 6.25789 4.34137 6.17193 4.90472L11.4814 4.90493C11.2887 3.61626 10.1743 2.62522 8.83337 2.62522Z"
+                            fill="#393D4E"
+                        ></path></svg
+                    ><span>Add To Cart</span>`;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-content", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-image", children: [
+          productCardImage ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "a",
+            {
+              href: url,
+              onClick: () => sourceApp === "instant-search" && productClickTrigger({
+                productId: id
+              }),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Trigger,
+                  {
+                    data: {
+                      productId: id,
+                      productVariantId: variant_id,
+                      productName: title,
+                      productVendor: vendor,
+                      productSku: sku,
+                      productVariantName: variant_title,
+                      productLink: url,
+                      productImage: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`,
+                      productCurrency: currency,
+                      productPrice: price
+                    },
+                    ...triggerPropAdditional,
+                    onAfterAddWishlist,
+                    onAfterRemoveWishlist
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || "", alt: "sledge-product-card-image", loading: "lazy", onError: (event) => event.currentTarget.src = `${API_URL}/img/blank-image.png` })
+              ]
+            }
+          ) : null,
+          isOutOfStock ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-out-of-stock", dangerouslySetInnerHTML: { __html: productCardOutStock } }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-desc", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-title", children: [
+            productCardTitle ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "a",
+              {
+                href: url,
+                onClick: () => sourceApp === "instant-search" && productClickTrigger({
+                  productId: id
+                }),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { style: display_product_name_style, dangerouslySetInnerHTML: { __html: productCardTitle } })
+              }
+            ) }) : null,
+            show_price && productCardPrice ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-price", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: display_price_style, dangerouslySetInnerHTML: { __html: productCardPrice } }) }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", dangerouslySetInnerHTML: { __html: productCardText } }),
+          productCardRating ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Rating,
+            {
+              data: {
+                productId: id
+              },
+              size: "xs",
+              withSkeletonLoading: false
+            }
+          ) }) : null
+        ] })
+      ] }),
+      show_add_to_cart && productCardButtonAddToCart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          type: "button",
+          colorType: "light",
+          style: {
+            ...display_button_add_to_cart_style,
+            ...isLoadingAddToCart && {
+              cursor: "wait"
+            }
+          },
+          dangerouslySetInnerHTML: { __html: isLoadingAddToCart ? "Adding..." : isOutOfStock ? "Sold out" : productCardButtonAddToCart },
+          ...isLoadingAddToCart || isOutOfStock ? {
+            disabled: true
+          } : {
+            onClick: () => handleAddToCart({
+              id: variant_id,
+              quantity: 1
+            })
+          }
+        }
+      ) }) : null
+    ] }, index);
+  }) });
+};
+const TextAreaField = "";
+const InputField = "";
+const CollectionGrid$1 = "";
+const CollectionGrid = ({ className = "", data }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__collection-grid ${className}`, children: data.map((item, index) => {
+    const { id, title, description, url, image } = item;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "img",
+        {
+          src: image || `${API_URL}/img/blank-image.png`,
+          alt: "sledge-product-card-image",
+          loading: "lazy",
+          onError: (event) => event.currentTarget.src = `${API_URL}/img/blank-image.png`
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-content", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-text", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-title", children: title }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-description", children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", colorType: "success", elementType: "hyperlink", link: url, children: "Shop Now" }) })
+      ] })
+    ] }, index);
+  }) }) });
+};
+const PageGrid$1 = "";
+const PageGrid = ({ className = "", data }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__page-grid ${className}`, children: data.map((item, index) => {
+    const { id, title, description, url, image } = item;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "img",
+        {
+          src: image || `${API_URL}/img/blank-image.png`,
+          alt: "sledge-product-card-image",
+          loading: "lazy",
+          onError: (event) => event.currentTarget.src = `${API_URL}/img/blank-image.png`
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card-content", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-title", children: title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-description", children: description })
+      ] })
+    ] }) }, index);
+  }) }) });
+};
+const BlogGrid$1 = "";
+const BlogGrid = ({ className = "", data }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__blog-grid ${className}`, children: data == null ? void 0 : data.map((item, index) => {
+    const { id, title, date, description, url, image } = item;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-content", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "img",
+          {
+            src: image || `${API_URL}/img/blank-image.png`,
+            alt: "sledge-blog-card-image",
+            loading: "lazy",
+            onError: (event) => event.currentTarget.src = `${API_URL}/img/blank-image.png`
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card-desc", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-title", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: title }) }) }) }),
+          !(date == null ? void 0 : date.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-date", children: date }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-text", children: description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", colorType: "light", elementType: "hyperlink", link: url, children: "Learn More" }) })
+    ] }, index);
+  }) }) });
+};
+const Tooltip$1 = "";
+const Tooltip = ({ children, content, withArrow = true, customArrow = "", sideOffset = 5, alignOffset = 0, wrapTrigger = true }) => {
+  const [open, setOpen] = React__default.useState(false);
+  React__default.useEffect(() => {
+    var _a;
+    let arrowElement = (_a = document == null ? void 0 : document.querySelector(".sledge__tooltip-arrow")) == null ? void 0 : _a.parentElement;
+    if (arrowElement && (customArrow == null ? void 0 : customArrow.length)) {
+      arrowElement.classList.add("sledge__tooltip-arrow-parent");
+      arrowElement.innerHTML = customArrow;
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$2881499e37b75b9a, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($a093c7e1ec25a057$export$be92b6f5f03c0fe9, { onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$41fb9f06171c75f4, { asChild: true, children: wrapTrigger ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children }) : children }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs($a093c7e1ec25a057$export$7c6e2c02157bb7d2, { className: "sledge__tooltip-content", sideOffset, alignOffset, children: [
+      content,
+      withArrow ? /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$21b07c8f274aebd5, { className: "sledge__tooltip-arrow" }) : null
+    ] }) })
+  ] }) });
+};
+const ScrollArea$1 = "";
+const ScrollArea = ({ children, isLoading = false, className = "", withCorner = true }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs($57acba87d6e25586$export$be92b6f5f03c0fe9, { className: `sledge__scroll-area-root ${className}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$d5c6c08dc2d3ca7, { className: `sledge__scroll-area-viewport ${isLoading ? "sledge__scroll-area-viewport-loading" : ""}`, children }),
+    !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$9a4e88b92edfce6b, { className: "sledge__scroll-area-scrollbar", orientation: "vertical", children: /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$6521433ed15a34db, { className: "sledge__scroll-area-thumb" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$9a4e88b92edfce6b, { className: "sledge__scroll-area-scrollbar", orientation: "horizontal", children: /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$6521433ed15a34db, { className: "sledge__scroll-area-thumb" }) }),
+      withCorner && /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$ac61190d9fc311a9, { className: "sledge__scroll-area-corner" })
+    ] })
+  ] });
+};
+const SkeletonLoading$1 = "";
+const SkeletonItem = ({ width, height, rounded, color, animationDuration = "8s", disableAnimation = false, style = {}, className = "", ...otherProps }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: `sledge__skeleton-item ${className} ${!disableAnimation ? "sledge__skeleton-item-animation" : ""}`,
+      style: {
+        ...{
+          width,
+          height,
+          WebkitAnimationDuration: animationDuration,
+          animationDuration
+        },
+        ...style
+      },
+      "data-skeleton-rounded": rounded,
+      "data-skeleton-color": color,
+      ...otherProps
+    }
+  );
+};
+const SkeletonProductGrid = ({ count, type }) => {
+  let components = [];
+  for (let i = 0; i < count; i++) {
+    components.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-content", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-image sledge__skeleton-product-grid-card-image", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__trigger-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "40px", height: "40px", color: "grey-300", rounded: "sm", disableAnimation: true }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "100%", color: "grey-100", rounded: "md" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-desc", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-title", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "134px", height: "28px", color: "grey-100", rounded: "md", animationDuration: "15s" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "80px", height: "28px", color: "grey-100", rounded: "md", animationDuration: "20s" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SkeletonItem,
+              {
+                width: "190px",
+                height: "46px",
+                color: "grey-100",
+                rounded: "md",
+                animationDuration: "13s",
+                style: {
+                  marginBottom: "16px"
+                }
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "117px", height: "40px", color: "grey-100", rounded: "md", animationDuration: "15s" }) })
+      ] }, 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 });
+};
+const SkeletonReviewGrid = ({ count, type, gridItemHeights = [] }) => {
+  let components = [];
+  for (let i = 0; i < count; i++) {
+    components.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-review-card", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SkeletonItem,
+        {
+          width: "100%",
+          height: type === "list" || type === "grid" && !(gridItemHeights == null ? void 0 : gridItemHeights.length) ? "111px" : gridItemHeights[i],
+          color: "grey-100",
+          rounded: "md",
+          animationDuration: type === "list" ? "2.5s" : "8s"
+        }
+      ) }, i)
+    );
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    MasonryResponsive,
+    {
+      columnsCountBreakPoints: type === "grid" ? { 350: 1, 750: 3, 1024: 4 } : { 350: 1 },
+      className: "sledge-product-review__widget-review-grid sledge__skeleton-review-grid sledge__skeleton-pointer-events-none",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Masonry, { gutter: "30px", children: components })
+    }
+  );
+};
+const SkeletonCollectionGrid = ({ count }) => {
+  let components = [];
+  for (let i = 0; i < count; i++) {
+    components.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "246px", height: "246px", color: "grey-300", rounded: "md" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-content", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-text", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-title", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "70px", color: "grey-300", rounded: "lg" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-description", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SkeletonItem,
+              {
+                width: "100%",
+                height: "47px",
+                color: "grey-300",
+                rounded: "md",
+                style: {
+                  maxWidth: "357px"
+                }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SkeletonItem,
+            {
+              width: "100%",
+              height: "40px",
+              color: "grey-300",
+              rounded: "md",
+              animationDuration: "20s",
+              style: {
+                maxWidth: "117px"
+              }
+            }
+          ) })
+        ] })
+      ] }, i)
+    );
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid sledge__skeleton-collection-grid sledge__skeleton-pointer-events-none", children: components });
+};
+const SkeletonPageGrid = ({ count }) => {
+  let components = [];
+  for (let i = 0; i < count; i++) {
+    components.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SkeletonItem,
+          {
+            width: "100%",
+            height: "100%",
+            color: "grey-300",
+            rounded: "md",
+            animationDuration: "13s",
+            style: {
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card-content", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-title", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "40px", color: "grey-300", rounded: "md", animationDuration: "6s" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-description", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SkeletonItem,
+            {
+              width: "100%",
+              height: "40px",
+              color: "grey-300",
+              rounded: "md",
+              animationDuration: "17s",
+              style: {
+                maxWidth: "115px"
+              }
+            }
+          ) })
+        ] })
+      ] }, i)
+    );
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid sledge__skeleton-page-grid sledge__skeleton-pointer-events-none", children: components });
+};
+const SkeletonBlogGrid = ({ count }) => {
+  let components = [];
+  for (let i = 0; i < count; i++) {
+    components.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-content", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "100%", color: "grey-100", rounded: "md", animationDuration: "10s" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card-desc", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SkeletonItem,
+            {
+              width: "100%",
+              height: "28px",
+              color: "grey-100",
+              rounded: "md",
+              style: {
+                maxWidth: "242px",
+                marginTop: "26px",
+                marginBottom: "12px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SkeletonItem,
+            {
+              width: "100%",
+              height: "28px",
+              color: "grey-100",
+              rounded: "md",
+              animationDuration: "23s",
+              style: {
+                maxWidth: "80px",
+                marginBottom: "27px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SkeletonItem,
+            {
+              width: "100%",
+              height: "80px",
+              color: "grey-100",
+              rounded: "md",
+              animationDuration: "13s",
+              style: {
+                maxWidth: "190px",
+                marginBottom: "27px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SkeletonItem,
+            {
+              width: "100%",
+              height: "40px",
+              color: "grey-100",
+              rounded: "md",
+              animationDuration: "20s",
+              style: {
+                maxWidth: "117px"
+              }
+            }
+          )
+        ] })
+      ] }) }, i)
+    );
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid sledge__skeleton-blog-grid sledge__skeleton-pointer-events-none", children: components });
+};
+const SkeletonLoading = {
+  Item: SkeletonItem,
+  ReviewGrid: SkeletonReviewGrid,
+  ProductGrid: SkeletonProductGrid,
+  CollectionGrid: SkeletonCollectionGrid,
+  PageGrid: SkeletonPageGrid,
+  BlogGrid: SkeletonBlogGrid
+};
+const SearchIconWidget = (props) => {
+  const { size = "sm", customProductCard, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props || {};
+  const { isRenderApp } = React__default.useContext(SledgeContext);
+  const [sizing, setSizing] = React__default.useState({
+    width: 0,
+    height: 0
+  });
+  React__default.useEffect(() => {
+    if (!(isRenderApp == null ? void 0 : isRenderApp.instantSearch))
+      return;
+    if (size === "xs") {
+      setSizing({
+        width: 14,
+        height: 14
+      });
+    } else if (size === "sm") {
+      setSizing({
+        width: 20,
+        height: 20
+      });
+    } else {
+      setSizing({
+        width: 25,
+        height: 25
+      });
+    }
+  }, [isRenderApp]);
+  const handleShowWidget = () => {
+    if (typeof window !== "undefined" && window.sledgeInstantSearchIconWidgetPopup)
+      window.sledgeInstantSearchIconWidgetPopup(customProductCard, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__icon-widget", onClick: handleShowWidget, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { ...sizing, color: "currentColor" }) });
+};
+const SearchIconWidgetPopup$1 = "";
+const SearchIconWidgetPopup = () => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [showInfo, setShowInfo] = React__default.useState(false);
+  const [keyword, setKeyword] = React__default.useState("");
+  const [suffixIndexProduct, setSuffixIndexProduct] = React__default.useState("");
+  const [searchResultProduct, setSearchResultProduct] = React__default.useState([]);
+  const [searchResultOther, setSearchResultOther] = React__default.useState([]);
+  const [allowedTabs, setAllowedTabs] = React__default.useState([]);
+  const [hiddenTags, setHiddenTags] = React__default.useState([]);
+  const [displaySettings, setDisplaySettings] = React__default.useState({});
+  const [suggestionSettings, setSuggestionSettings] = React__default.useState({});
+  const [suggestionIndex, setSuggestionIndex] = React__default.useState("");
+  const [handleFunctions, setHandleFunctions] = React__default.useState({
+    onAfterAddToCart: (state) => {
+    },
+    onAfterAddWishlist: (state) => {
+    },
+    onAfterRemoveWishlist: (state) => {
+    },
+    onAfterRenderProduct: (state) => {
+    }
+  });
+  const [customProductCard, setCustomProductCard] = React__default.useState({});
+  const searchFieldRef = React__default.useRef(null);
+  const previousState = usePrevious({ keyword });
+  const handleMultiSearch = async (data, onSearch = false) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2;
+    if (!showInfo)
+      return;
+    setIsLoading(true);
+    const { tabs, suffix_index_product, hidden_tags, display } = data;
+    const suggestion = ((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion) || {};
+    let response;
+    let body = {
+      queries: tabs.map((tab) => {
+        var _a3;
+        const { index } = tab;
+        let isProductIndex = index.includes(suffix_index_product);
+        let additionalFilter = [];
+        if (hidden_tags == null ? void 0 : hidden_tags.length)
+          additionalFilter.push(`tags NOT IN [${hidden_tags}]`);
+        if (!((_a3 = display == null ? void 0 : display.filter) == null ? void 0 : _a3.show_out_of_stock))
+          additionalFilter.push("variants.inventory_quantity > 0");
+        return {
+          indexUid: index,
+          q: keyword,
+          hitsPerPage: isProductIndex ? 6 : 4,
+          filter: isProductIndex ? additionalFilter.join(" AND ") : ""
+        };
+      })
+    };
+    response = await multiSearch(body);
+    if (!response)
+      return;
+    const { results } = response;
+    let valueSearchResultProduct = results == null ? void 0 : results.filter(({ indexUid }) => indexUid == null ? void 0 : indexUid.includes(suffix_index_product));
+    if (onSearch && (keyword == null ? void 0 : keyword.length)) {
+      searchTrigger({
+        keyword,
+        resultCount: ((_b2 = valueSearchResultProduct[0]) == null ? void 0 : _b2.totalHits) || 0
+      });
+    }
+    let valueSearchResultOther = ((_c2 = results == null ? void 0 : results.filter(({ indexUid }) => !(indexUid == null ? void 0 : indexUid.includes(suffix_index_product)))) == null ? void 0 : _c2.map((result) => {
+      const { indexUid } = result;
+      const { name } = tabs == null ? void 0 : tabs.find(({ index }) => index.includes(indexUid));
+      return {
+        ...result,
+        ...{
+          name: name || ""
+        }
+      };
+    })) || [];
+    let getValueSearchResultProduct = (valueSearchResultProduct == null ? void 0 : valueSearchResultProduct.length) ? (_d2 = valueSearchResultProduct[0]) == null ? void 0 : _d2.hits : [];
+    let valueSuggestionIndex = !keyword.length ? "zero_character" : !(getValueSearchResultProduct == null ? void 0 : getValueSearchResultProduct.length) ? "no_result" : "";
+    let isPriorityZeroCharacter = Boolean(
+      !keyword.length && Object.keys(suggestion).length && ((_f2 = (_e2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _e2.products) == null ? void 0 : _f2.active) && ((_i2 = (_h2 = (_g2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _g2.products) == null ? void 0 : _h2.list) == null ? void 0 : _i2.length)
+    );
+    setSearchResultProduct(isPriorityZeroCharacter ? (_k2 = (_j2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _j2.products) == null ? void 0 : _k2.list : getValueSearchResultProduct);
+    setSearchResultOther(valueSearchResultOther);
+    setSuggestionIndex(valueSuggestionIndex);
+    setIsLoading(false);
+  };
+  const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
+    var _a2;
+    if (!showInfo)
+      return;
+    let response;
+    let run = false;
+    response = JSON.parse(LOCAL_STORAGE_INSTANT_SEARCH_SETTING);
+    if (!response)
+      return;
+    const { status, data } = response;
+    const { code } = status;
+    const { tabs, suffix_index_product, hidden_tags, display } = data;
+    run = code === 200 || false;
+    if (run) {
+      setAllowedTabs(tabs);
+      setSuffixIndexProduct(suffix_index_product);
+      setHiddenTags(hidden_tags);
+      setDisplaySettings(display);
+      setSuggestionSettings((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion);
+      await handleMultiSearch(data);
+    }
+  };
+  React__default.useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.sledgeInstantSearchIconWidgetPopup = (customProductCard2 = {}, onAfterAddToCart = () => {
+      }, onAfterAddWishlist = () => {
+      }, onAfterRemoveWishlist = () => {
+      }, onAfterRenderProduct = () => {
+      }) => {
+        setShowInfo(true);
+        setHandleFunctions({
+          onAfterAddToCart,
+          onAfterAddWishlist,
+          onAfterRemoveWishlist,
+          onAfterRenderProduct
+        });
+        setCustomProductCard(customProductCard2);
+        setTimeout(() => {
+          if (searchFieldRef == null ? void 0 : searchFieldRef.current) {
+            searchFieldRef.current.focus();
+            searchFieldRef.current.value = keyword;
+          }
+        }, 500);
+      };
+    }
+    handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "");
+  }, [showInfo]);
+  React__default.useEffect(() => {
+    if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword)) {
+      const delayDebounceFn = setTimeout(() => {
+        handleMultiSearch({ tabs: allowedTabs, suffix_index_product: suffixIndexProduct, hidden_tags: hiddenTags, display: displaySettings }, true);
+      }, 500);
+      return () => clearTimeout(delayDebounceFn);
+    }
+  }, [keyword]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, { open: showInfo, onOpenChange: setShowInfo, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$602eac185826482c, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: "sledge__popup-overlay" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: "sledge__popup-overlay-blur" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { className: "sledge-instant-search__icon-widget-popup-detail-content", "data-layout-type": ((_a = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _a.layout) || "", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SearchInputField,
+        {
+          type: "text",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 20, height: 20, color: "#000000" }),
+          placeholder: "Search anything...",
+          value: keyword,
+          fieldRef: searchFieldRef,
+          onChange: ({ value }) => setKeyword(value),
+          className: "sledge-instant-search__icon-widget-search-form-field",
+          withClearField: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-other sledge-instant-search__icon-widget-search-form-result-flex-item-other-skeleton", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SkeletonLoading.Item,
+            {
+              width: "100%",
+              height: "42px",
+              color: "grey-100",
+              rounded: "md",
+              ...Boolean(index) && {
+                style: { marginTop: "12px" }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                gap: "12px",
+                marginTop: "12px"
+              },
+              children: [1, 2, 3].map((index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                SkeletonLoading.Item,
+                {
+                  width: "100%",
+                  height: "28px",
+                  color: "grey-100",
+                  rounded: "md",
+                  animationDuration: "13s",
+                  style: {
+                    maxWidth: "140px"
+                  }
+                },
+                index2
+              ))
+            }
+          )
+        ] }, index)) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-product", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 6, type: "medium" }) })
+      ] }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-other", children: [
+          Object.keys(suggestionSettings).length && ((_c = (_b = suggestionSettings[suggestionIndex]) == null ? void 0 : _b.keywords) == null ? void 0 : _c.active) && ((_f = (_e = (_d = suggestionSettings[suggestionIndex]) == null ? void 0 : _d.keywords) == null ? void 0 : _e.list) == null ? void 0 : _f.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: "Suggestions" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: suggestionSettings[suggestionIndex].keywords.list.map((keyword2, index) => {
+              return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "a",
+                {
+                  href: `${SEARCH_RESULT_URL}?q=${keyword2}`,
+                  className: "sledge-instant-search__icon-widget-search-form-result-list-link sledge-instant-search__icon-widget-search-form-result-list-link-suggestion",
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 12, height: 12, color: "#677487" }),
+                    " ",
+                    keyword2
+                  ]
+                }
+              ) }, index);
+            }) })
+          ] }) : null,
+          searchResultOther && searchResultOther.map((item, index) => {
+            const { hits, name } = item;
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: name }),
+              (hits == null ? void 0 : hits.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: hits.map((hit, index2) => {
+                const { title, url } = hit;
+                return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, className: "sledge-instant-search__icon-widget-search-form-result-list-link", children: title }) }, index2);
+              }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__icon-widget-search-form-result-list", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "sledge-instant-search__icon-widget-search-form-result-item-disabled", children: [
+                "No ",
+                name.toLowerCase(),
+                " were found"
+              ] }) })
+            ] }, index);
+          })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-flex-item-product", children: [
+          (searchResultProduct == null ? void 0 : searchResultProduct.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-product", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ProductGrid,
+            {
+              sourceApp: "instant-search",
+              type: "medium",
+              data: searchResultProduct.map((item) => {
+                const { id, title, currency, image, url, vendor, variants } = item || {};
+                return {
+                  product: {
+                    id,
+                    title,
+                    image,
+                    url,
+                    vendor,
+                    currency
+                  },
+                  variants: (variants == null ? void 0 : variants.length) ? variants.map((variant) => {
+                    const { id: variant_id, title: variant_title, price, sku, inventory_quantity } = variant || {};
+                    return { id: variant_id, title: variant_title, price, sku, inventory_quantity };
+                  }) : []
+                };
+              }),
+              setting: {
+                show_vendor: (_g = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _g.show_vendor,
+                show_sku: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_sku,
+                show_price: (_i = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _i.show_price
+              },
+              customProductCard,
+              showOptionOutOfStock: true,
+              onAfterAddToCart: handleFunctions.onAfterAddToCart,
+              onAfterAddWishlist: handleFunctions.onAfterAddWishlist,
+              onAfterRemoveWishlist: handleFunctions.onAfterRemoveWishlist,
+              onAfterRenderProduct: handleFunctions.onAfterRenderProduct
+            }
+          ) }) : Object.keys(suggestionSettings).length && ((_k = (_j = suggestionSettings[suggestionIndex]) == null ? void 0 : _j.products) == null ? void 0 : _k.active) && ((_n = (_m = (_l = suggestionSettings[suggestionIndex]) == null ? void 0 : _l.products) == null ? void 0 : _m.list) == null ? void 0 : _n.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__icon-widget-search-form-result-product-suggestion-no-result-text", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Sorry" }),
+              ", nothing found for ",
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: keyword }),
+              ". Did you mean:"
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ProductGrid,
+              {
+                sourceApp: "instant-search",
+                type: "medium",
+                data: suggestionSettings[suggestionIndex].products.list.map((item) => {
+                  const { id, currency, title, image, url, vendor, variants } = item || {};
+                  return {
+                    product: {
+                      id,
+                      title,
+                      image,
+                      url,
+                      vendor,
+                      currency
+                    },
+                    variants: (variants == null ? void 0 : variants.length) ? variants.map((variant) => {
+                      const { id: variant_id, title: variant_title, price, sku, inventory_quantity } = variant || {};
+                      return { id: variant_id, title: variant_title, price, sku, inventory_quantity };
+                    }) : []
+                  };
+                }),
+                setting: {
+                  show_vendor: (_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.show_vendor,
+                  show_sku: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_sku,
+                  show_price: (_q = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _q.show_price
+                },
+                customProductCard,
+                showOptionOutOfStock: true,
+                onAfterAddToCart: handleFunctions.onAfterAddToCart,
+                onAfterAddWishlist: handleFunctions.onAfterAddWishlist,
+                onAfterRemoveWishlist: handleFunctions.onAfterRemoveWishlist,
+                onAfterRenderProduct: handleFunctions.onAfterRenderProduct
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-title", children: "Products" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-search-form-result-item-disabled", children: "No product were found" })
+          ] }),
+          (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_s = (_r = suggestionSettings[suggestionIndex]) == null ? void 0 : _r.products) == null ? void 0 : _s.active) && ((_v = (_u = (_t = suggestionSettings[suggestionIndex]) == null ? void 0 : _t.products) == null ? void 0 : _u.list) == null ? void 0 : _v.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__icon-widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: `${SEARCH_RESULT_URL}?q=${keyword}`, className: "sledge-instant-search__icon-widget-button-more", children: "View More Result" }) }) : null
+        ] })
+      ] }) }) }) })
+    ] })
+  ] }) });
+};
+const SearchResultWidget$1 = "";
+const SearchResultWidget = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { layoutType = "default", query, data, customProductCard, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
+  const { keyword: queryKeyword = "" } = query || {};
+  const { collectionId } = data || {};
+  const { isRenderApp } = React__default.useContext(SledgeContext);
+  const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [keyword, setKeyword] = React__default.useState("");
+  const [clickedTabIndexId, setClickedTabIndexId] = React__default.useState(null);
+  const [clickedTabIndexName, setClickedTabIndexName] = React__default.useState();
+  const [resultComponent, setResultComponent] = React__default.useState(/* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}));
+  const [isLoadingSetting, setIsLoadingSetting] = React__default.useState(true);
+  const [allowedSorts, setAllowedSorts] = React__default.useState([]);
+  const [allowedFilters, setAllowedFilters] = React__default.useState([]);
+  const [allowedTabs, setAllowedTabs] = React__default.useState([]);
+  const [facets, setFacets] = React__default.useState([]);
+  const [suffixIndexProduct, setSuffixIndexProduct] = React__default.useState("");
+  const [searchResultFacets, setSearchResultFacets] = React__default.useState({});
+  const [hiddenTags, setHiddenTags] = React__default.useState([]);
+  const [displaySettings, setDisplaySettings] = React__default.useState({});
+  const [colorSwatches, setColorSwatches] = React__default.useState([]);
+  const [defaultSort, setDefaultSort] = React__default.useState("");
+  const [showOutOfStock, setShowOutOfStock] = React__default.useState(false);
+  const previousState = usePrevious({ keyword });
+  const handleChangeTabIndex = (id, name, e) => {
+    setClickedTabIndexId(id);
+    setClickedTabIndexName(name);
+    setResultComponent(id.includes(suffixIndexProduct) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResultProduct, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultCategory, {}));
+  };
+  const handleInitStates = async (data2, type) => {
+    const { filters, tabs, suffix_index_product, hidden_tags, display, show_out_of_stock } = data2;
+    let getTabs = layoutType === "product-filter" ? tabs.filter(({ index }) => index == null ? void 0 : index.includes(suffix_index_product)) : tabs;
+    let response;
+    let body = {
+      queries: getTabs.map((tab) => {
+        const { index } = tab;
+        let isSetFilter = false;
+        let getFacets = !isSetFilter ? filters == null ? void 0 : filters.map((filter) => {
+          const { collections, items } = filter;
+          if (collectionId && (collections == null ? void 0 : collections.includes(Number(collectionId)))) {
+            isSetFilter = true;
+            return items == null ? void 0 : items.map(({ value }) => value);
+          } else {
+            if (collections == null ? void 0 : collections.includes("all")) {
+              isSetFilter = true;
+              return items == null ? void 0 : items.map(({ value }) => value);
+            }
+          }
+        }) : [];
+        let isProductIndex = index.includes(suffix_index_product);
+        let isHasProductFacets = isProductIndex && getFacets.length;
+        let additionalFilter = [];
+        if (hidden_tags == null ? void 0 : hidden_tags.length)
+          additionalFilter.push(`tags NOT IN [${hidden_tags}]`);
+        if (!show_out_of_stock)
+          additionalFilter.push("variants.inventory_quantity > 0");
+        if (collectionId)
+          additionalFilter.push(`collections.id = '${collectionId}'`);
+        if (isHasProductFacets)
+          setFacets(getFacets[0]);
+        return {
+          indexUid: index,
+          q: type === "default" ? "" : keyword,
+          hitsPerPage: 1,
+          facets: isHasProductFacets ? getFacets[0] : [],
+          filter: isProductIndex ? additionalFilter.join(" AND ") : ""
+        };
+      })
+    };
+    response = await multiSearch(body);
+    if (!response)
+      return;
+    const { results } = response;
+    setTimeout(() => {
+      setIsFirstLoading(false);
+    }, 1300);
+    setIsLoadingSetting(false);
+    setIsLoading(false);
+    if (type === "totalDataPerIndex") {
+      setAllowedTabs(
+        tabs == null ? void 0 : tabs.map((tab) => {
+          const { index } = tab;
+          const { totalHits } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid === index)) || {};
+          return {
+            ...tab,
+            ...{
+              total: totalHits
+            }
+          };
+        })
+      );
+    } else {
+      const { facetDistribution, facetStats } = (results == null ? void 0 : results.find(({ indexUid }) => indexUid.includes(suffix_index_product))) || {};
+      setSearchResultFacets(
+        facetDistribution ? Object.fromEntries(
+          Object.entries(facetDistribution).map((facet) => {
+            let value = facet[0];
+            let items = [];
+            if (value === "variants.inventory_quantity") {
+              Object.keys(facetDistribution[value]).map((item) => {
+                return Boolean(Number(item)) ? facetDistribution[value][item] : 0;
+              });
+              items = [
+                {
+                  name: "In Stock",
+                  value: "> 0"
+                }
+              ];
+            } else if (value === "variants.price") {
+              items = facetStats[value];
+            } else {
+              items = Object.keys(facetDistribution[value]).map((item) => {
+                return {
+                  name: item,
+                  value: item,
+                  total: facetDistribution[value][item] || 0
+                };
+              });
+            }
+            return [value, items];
+          })
+        ) : {}
+      );
+    }
+  };
+  const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
+    setIsLoadingSetting(true);
+    let response;
+    let run = false;
+    let getFirstIndex;
+    response = JSON.parse(LOCAL_STORAGE_INSTANT_SEARCH_SETTING);
+    if (!response)
+      return;
+    const { status, data: data2 } = response;
+    const { code } = status;
+    const { allowed_sorts, default_sort, filters, tabs, suffix_index_product, hidden_tags, display, colors, show_out_of_stock } = data2;
+    run = code === 200 || false;
+    if (run) {
+      setAllowedSorts((allowed_sorts == null ? void 0 : allowed_sorts.length) ? allowed_sorts : []);
+      setAllowedFilters((filters == null ? void 0 : filters.length) ? filters : []);
+      setSuffixIndexProduct(suffix_index_product);
+      setHiddenTags(hidden_tags);
+      setDisplaySettings(display);
+      setColorSwatches(colors);
+      setDefaultSort(default_sort);
+      setShowOutOfStock(show_out_of_stock);
+      getFirstIndex = tabs.find(({ index }) => index.includes(suffix_index_product));
+      if (Object.keys(getFirstIndex).length) {
+        setClickedTabIndexId(getFirstIndex.index);
+        setClickedTabIndexName(getFirstIndex.name);
+      }
+      await handleInitStates(data2, "default");
+      if (layoutType === "default")
+        await handleInitStates(data2, "totalDataPerIndex");
+    }
+  };
+  React__default.useEffect(() => {
+    if (!(isRenderApp == null ? void 0 : isRenderApp.instantSearch))
+      return;
+    const searchParams = new URLSearchParams(document.location.search);
+    setKeyword((searchParams == null ? void 0 : searchParams.get(queryKeyword)) || "");
+    handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "");
+  }, [isRenderApp]);
+  React__default.useEffect(() => {
+    if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword) && layoutType === "default") {
+      const delayDebounceFn = setTimeout(() => {
+        handleInitStates(
+          {
+            filters: allowedFilters,
+            tabs: allowedTabs,
+            suffix_index_product: suffixIndexProduct,
+            hidden_tags: hiddenTags,
+            display: displaySettings,
+            colors: colorSwatches,
+            show_out_of_stock: showOutOfStock
+          },
+          "totalDataPerIndex"
+        );
+      }, 500);
+      return () => clearTimeout(delayDebounceFn);
+    }
+  }, [keyword]);
+  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: "grey-100", animationDuration: "15s" }, index)) }) : null;
+  const filterHorizontalSkeleton = ((_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.enable_on_search) && ((_b = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b.layout) === "horizontal" ? /* @__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: "grey-100", animationDuration: "13s" }, index)) }) : null;
+  const filterVerticalSkeleton = ((_c = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _c.enable_on_search) && ((_d = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _d.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "8px",
+          justifyContent: "space-between",
+          marginBottom: "23px"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "117px", height: "28px", color: "grey-100", rounded: "md", animationDuration: "15s" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "80px", height: "28px", color: "grey-100", rounded: "md", animationDuration: "15s" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "270px",
+          marginBottom: "18px"
+        }
+      }
+    ),
+    [1, 2, 3].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "163px",
+          marginBottom: "9px"
+        }
+      },
+      index
+    )),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "163px",
+          marginBottom: "18px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "270px",
+          marginBottom: "14px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "163px",
+          marginBottom: "9px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "163px",
+          marginBottom: "17px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "270px",
+          marginBottom: "38px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "270px",
+          marginBottom: "35px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "270px",
+          marginBottom: "12px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "163px",
+          marginBottom: "9px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "163px",
+          marginBottom: "20px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "270px",
+          marginBottom: "12px"
+        }
+      }
+    ),
+    [1, 2, 3].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "163px",
+          marginBottom: "9px"
+        }
+      },
+      index
+    )),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        style: {
+          maxWidth: "270px",
+          marginBottom: "11px"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "12px"
+        },
+        children: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "34px", height: "34px", color: "grey-100", rounded: "full", animationDuration: "40s" }, index))
+      }
+    )
+  ] }) : null;
+  const productGridSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    ((_e = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _e.show_total_products) && ((_f = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _f.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "117px",
+        height: "28px",
+        color: "grey-100",
+        rounded: "md",
+        animationDuration: "13s",
+        style: {
+          marginBottom: "21px"
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 12, type: "large" })
+  ] });
+  const searchAndSelectOptionSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
+    ((_g = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _g.show_total_products) && ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "117px", height: "28px", color: "grey-100", rounded: "md", animationDuration: "13s" }) }) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-keyword-form", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SkeletonLoading.Item,
+      {
+        width: "100%",
+        height: "42px",
+        color: "grey-100",
+        rounded: "lg",
+        style: {
+          maxWidth: "630px"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-summary-item sledge-instant-search__result-data-summary-select-field", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "150px", height: "42px", color: "grey-100", rounded: "lg" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "150px", height: "42px", color: "grey-100", rounded: "lg" }) })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-container", children: [
+    isFirstLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? "sledge-instant-search__result-tab" : "sledge-instant-search__result-tab-no-index"}`, children: layoutType === "default" && (allowedTabs == null ? void 0 : allowedTabs.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__result-tab-list", children: allowedTabs.map((item) => {
+      const { name, index, total } = item;
+      let isActive = clickedTabIndexId === index;
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { onClick: (e) => handleChangeTabIndex(index, name), className: `${isActive ? "sledge-instant-search__result-tab-list-item-active" : ""}`, children: [
+        name,
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-tab-total", children: total || 0 })
+      ] }, index);
+    }) }) : null }),
+    isFirstLoading && (layoutType == null ? void 0 : layoutType.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      tabSkeleton,
+      filterHorizontalSkeleton,
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-wrapper sledge-instant-search__result-wrapper-skeleton", children: [
+        ((_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.enable_on_search) && ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : null,
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
+          searchAndSelectOptionSkeleton,
+          productGridSkeleton
+        ] })
+      ] })
+    ] }) : React__default.cloneElement(resultComponent, {
+      isLoading,
+      keyword,
+      clickedTabIndexId,
+      clickedTabIndexName,
+      isLoadingSetting,
+      allowedSorts,
+      allowedFilters,
+      facets,
+      searchResultFacets,
+      hiddenTags,
+      displaySettings,
+      colorSwatches,
+      defaultSort,
+      showOutOfStock,
+      data,
+      customProductCard,
+      onAfterAddToCart,
+      onAfterAddWishlist,
+      onAfterRemoveWishlist,
+      onAfterRenderProduct,
+      setIsLoading,
+      setKeyword,
+      filterHorizontalSkeleton,
+      filterVerticalSkeleton,
+      productGridSkeleton,
+      searchAndSelectOptionSkeleton
+    })
+  ] });
+};
+const ResultProduct = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+  const {
+    keyword,
+    clickedTabIndexId,
+    isLoadingSetting,
+    allowedSorts,
+    allowedFilters,
+    facets,
+    searchResultFacets,
+    hiddenTags,
+    displaySettings,
+    colorSwatches,
+    defaultSort,
+    showOutOfStock,
+    data,
+    setKeyword,
+    filterHorizontalSkeleton,
+    filterVerticalSkeleton,
+    productGridSkeleton,
+    searchAndSelectOptionSkeleton,
+    customProductCard,
+    onAfterAddToCart,
+    onAfterAddWishlist,
+    onAfterRemoveWishlist,
+    onAfterRenderProduct
+  } = props || {};
+  const { collectionId } = data || {};
+  const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [isOpenSort, setIsOpenSort] = React__default.useState(false);
+  const [isOpenLimit, setIsOpenLimit] = React__default.useState(false);
+  const [clickedSortId, setClickedSortId] = React__default.useState(defaultSort || "");
+  const [clickedSortName, setClickedSortName] = React__default.useState(allowedSorts && Boolean(allowedSorts == null ? void 0 : allowedSorts.length) ? (_a = allowedSorts.find(({ value }) => value === defaultSort)) == null ? void 0 : _a.label : "");
+  const [clickedLimitId, setClickedLimitId] = React__default.useState(((_b = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _b.limit) || 10);
+  const [clickedOpenFilterId, setClickedOpenFilterId] = React__default.useState(null);
+  const [clickedFacets, setClickedFacets] = React__default.useState({
+    ...!showOutOfStock ? {
+      "variants.inventory_quantity": "> 0"
+    } : {}
+  });
+  const [searchResult, setSearchResult] = React__default.useState([]);
+  const [searchProcessingTimeMs, setSearchProcessingTimeMs] = React__default.useState(0);
+  const [currentPage, setCurrentPage] = React__default.useState(1);
+  const [totalPage, setTotalPage] = React__default.useState(0);
+  const [totalSearchResult, setTotalSearchResult] = React__default.useState(0);
+  const [valueFilterPriceChange, setValueFilterPriceChange] = React__default.useState([]);
+  const [allowedFilter, setAllowedFilter] = React__default.useState([]);
+  const [isFilterChanged, setIsFilterChanged] = React__default.useState(false);
+  const [summaryText, setSummaryText] = React__default.useState(null);
+  const previousState = usePrevious({ keyword, clickedLimitId, clickedFacets });
+  const { color: filter_title_color, font_size: filter_title_font_size, font_weight: filter_title_font_weight, text_transform: filter_title_text_transform } = ((_c = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _c.title) || {};
+  const {
+    color: filter_option_color,
+    font_size: filter_option_font_size,
+    font_weight: filter_option_font_weight,
+    text_transform: filter_option_text_transform
+  } = ((_d = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _d.option) || {};
+  const {
+    text_color: filter_button_text_color,
+    border_color: filter_button_border_color,
+    border_radius: filter_button_border_radius,
+    padding_top: filter_button_padding_top,
+    padding_bottom: filter_button_padding_bottom,
+    padding_left: filter_button_padding_left,
+    padding_right: filter_button_padding_right,
+    background_color: filter_button_background_color,
+    font_size: filter_button_font_size,
+    font_weight: filter_button_font_weight,
+    text_transform: filter_button_text_transform
+  } = ((_e = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _e.button) || {};
+  const filter_title_style = {
+    ...filter_title_color && { color: filter_title_color },
+    ...filter_title_font_size && { fontSize: filter_title_font_size },
+    ...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 },
+    ...filter_button_border_radius && { borderRadius: filter_button_border_radius },
+    ...filter_button_padding_top && { paddingTop: filter_button_padding_top },
+    ...filter_button_padding_bottom && { paddingBottom: filter_button_padding_bottom },
+    ...filter_button_padding_left && { paddingLeft: filter_button_padding_left },
+    ...filter_button_padding_right && { paddingRight: filter_button_padding_right },
+    ...filter_button_background_color && { backgroundColor: filter_button_background_color },
+    ...filter_button_font_size && { fontSize: filter_button_font_size },
+    ...filter_button_font_weight && { fontWeight: filter_button_font_weight },
+    ...filter_button_text_transform && { textTransform: filter_button_text_transform }
+  });
+  const handleChangeSort = (label, value) => {
+    setIsOpenSort(false);
+    setClickedSortName(label);
+    setClickedSortId(value);
+  };
+  const handleChangeLimit = (value) => {
+    setIsOpenLimit(false);
+    setClickedLimitId(value);
+  };
+  const handleOpenFilter = (id) => {
+    setClickedOpenFilterId(id === clickedOpenFilterId ? "" : id);
+  };
+  const handleFilterReset = () => {
+    setIsFilterChanged(true);
+    setClickedFacets({});
+    setValueFilterPriceChange([]);
+    setTimeout(() => {
+      setIsFilterChanged(false);
+    }, 10);
+  };
+  const handleFilterChange = (parentId, value, force = false) => {
+    var _a2;
+    setIsFilterChanged(true);
+    let facets2 = [value];
+    let isRange = ["variants.price"].includes(parentId);
+    if (clickedFacets) {
+      if (force) {
+        facets2 = [value];
+      } else {
+        if ((_a2 = clickedFacets[parentId]) == null ? void 0 : _a2.includes(value)) {
+          facets2 = clickedFacets[parentId].filter((facet) => facet !== value);
+        } else {
+          if (isRange) {
+            if (clickedFacets[parentId], clickedFacets[parentId] === value) {
+              facets2 = [];
+              setValueFilterPriceChange([]);
+            } else {
+              facets2 = value;
+            }
+          } else {
+            facets2 = clickedFacets[parentId] ? [...clickedFacets[parentId], value] : [value];
+          }
+        }
+      }
+    }
+    setClickedFacets({
+      ...clickedFacets,
+      ...{
+        [parentId]: facets2
+      }
+    });
+    setTimeout(() => {
+      setIsFilterChanged(false);
+    }, 10);
+  };
+  const handleSearchResultData = (result, onSearch) => {
+    var _a2;
+    if (!result)
+      return;
+    const { hits, processingTimeMs, totalHits, totalPages } = result;
+    if (onSearch && (keyword == null ? void 0 : keyword.length)) {
+      searchTrigger({
+        keyword,
+        resultCount: totalHits || 0
+      });
+    }
+    setIsFirstLoading(false);
+    setIsLoading(false);
+    setSearchResult(hits);
+    setSearchProcessingTimeMs(processingTimeMs || 0);
+    setTotalPage(totalPages);
+    setTotalSearchResult(totalHits || 0);
+    setSummaryText(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: ((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_total_products) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text", children: [
+        totalHits,
+        " result",
+        " ",
+        (keyword == null ? void 0 : keyword.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          "for ",
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text-keyword", children: [
+            '"',
+            keyword,
+            '"'
+          ] })
+        ] }) : null
+      ] }) : null })
+    );
+  };
+  const handleSearchResult = async (isRefreshPage = false, onSearch = false) => {
+    if (!clickedTabIndexId)
+      return;
+    if (isRefreshPage)
+      setCurrentPage(1);
+    setIsLoading(true);
+    let response;
+    let filters = Object.entries(clickedFacets).map((facet) => {
+      var _a2, _b2;
+      if ((facet == null ? void 0 : facet.length) && facet[1].length) {
+        let value = facet[0];
+        let isCustom = ["variants.inventory_quantity"].includes(value);
+        let isRange = ["variants.price"].includes(value);
+        let isArray = ["tags"].includes(value);
+        let items = Array.isArray(facet[1]) && ((_a2 = facet[1]) == null ? void 0 : _a2.length) > 1 ? isRange ? `${value} >= ${facet[1][0]} AND ${value} <= ${facet[1][1]}` : isArray ? `${value} IN [${facet[1]}]` : (_b2 = facet[1]) == null ? void 0 : _b2.map((item) => {
+          return isCustom ? `${value} ${item}` : `${value} = '${item}'`;
+        }).join(" OR ") : isCustom ? `${value} ${facet[1]}` : isArray ? `${value} IN [${facet[1]}]` : `${value} = '${facet[1]}'`;
+        return items;
+      } else
+        return null;
+    }).filter((item) => item);
+    if (hiddenTags == null ? void 0 : hiddenTags.length)
+      filters.push(`tags NOT IN [${hiddenTags}]`);
+    if (collectionId)
+      filters.push(`collections.id = '${collectionId}'`);
+    let body = {
+      q: keyword,
+      sort: clickedSortId ? [clickedSortId] : [],
+      page: isRefreshPage ? 1 : currentPage,
+      hitsPerPage: clickedLimitId,
+      facets,
+      filter: filters.join(" AND ")
+    };
+    response = await search(clickedTabIndexId, body);
+    handleSearchResultData(response, onSearch);
+  };
+  const handleAllowedFilter = () => {
+    var _a2, _b2;
+    if (!((_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.enable_on_search) || ((_b2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _b2.hide_when_one_value) && totalSearchResult <= 1)
+      return;
+    let isSetFilter = false;
+    if (!isSetFilter)
+      allowedFilters == null ? void 0 : allowedFilters.map((filter) => {
+        const { collections, items } = filter;
+        if (collectionId && (collections == null ? void 0 : collections.includes(Number(collectionId)))) {
+          isSetFilter = true;
+          setAllowedFilter(items);
+        } else {
+          if (collections == null ? void 0 : collections.includes("all")) {
+            isSetFilter = true;
+            setAllowedFilter(items);
+          }
+        }
+      });
+  };
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+  React__default.useEffect(() => {
+    let isRefreshSearchResult = Boolean(
+      previousState && ((previousState == null ? void 0 : previousState.keyword) !== keyword || (previousState == null ? void 0 : previousState.clickedLimitId) !== clickedLimitId || (previousState == null ? void 0 : previousState.clickedFacets) !== clickedFacets)
+    );
+    if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword)) {
+      const delayDebounceFn = setTimeout(() => {
+        handleSearchResult(true, true);
+      }, 500);
+      return () => clearTimeout(delayDebounceFn);
+    } else {
+      handleSearchResult(isRefreshSearchResult);
+    }
+  }, [clickedSortId, clickedLimitId, clickedFacets, keyword, currentPage, clickedTabIndexId]);
+  React__default.useEffect(() => {
+    handleAllowedFilter();
+  }, [allowedFilters, searchResultFacets, totalSearchResult]);
+  const facetBlockSelected = ({ label, name, value, index }) => {
+    var _a2;
+    let valueText = value;
+    let isRange = ["variants.price"].includes(name);
+    if (isRange)
+      valueText = value == null ? void 0 : value.join(" - ");
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-refine-selected", style: filter_option_style, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-filter-item-title-refine-list", children: [
+        label,
+        ": ",
+        (_a2 = String(valueText)) == null ? void 0 : _a2.replaceAll("_", " ")
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-refine-title-clear", onClick: () => handleFilterChange(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 facetComponent = (filter) => {
+    var _a2, _b2;
+    const { value, label, display } = filter;
+    let blockComponent = null;
+    let items = searchResultFacets[value];
+    let isShowNumberMatchingProduct = (_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_number_matching_product;
+    if (display.toLowerCase() === "slider") {
+      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Slider,
+          {
+            defaultValue: [valueFilterPriceChange[0] || (items == null ? void 0 : items.min), valueFilterPriceChange[1] || (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(value, valueCommit),
+            setValueChange: (valueChange) => setValueFilterPriceChange(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", children: valueFilterPriceChange[0] || (items == null ? void 0 : items.min) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-minmax-field", children: valueFilterPriceChange[1] || (items == null ? void 0 : items.max) })
+        ] })
+      ] });
+    } else if (display.toLowerCase() === "checkbox" && (items == null ? void 0 : items.length)) {
+      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items == null ? void 0 : items.map((item, index) => {
+        var _a3;
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Checkbox,
+          {
+            id: `${value}_${index}`,
+            name: value,
+            value: item.value,
+            label: `${item.name}${item.total !== void 0 && isShowNumberMatchingProduct ? ` (${item.total})` : ""}`,
+            onClick: (e) => handleFilterChange(value, e.currentTarget.value),
+            defaultChecked: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value)),
+            labelStyle: filter_option_style
+          }
+        ) }, index);
+      }) });
+    } else if (display.toLowerCase() === "radio" && (items == null ? void 0 : items.length)) {
+      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        RadioGroup,
+        {
+          id: value,
+          name: value,
+          onValueChange: (getValue) => handleFilterChange(value, getValue, true),
+          items: items == null ? void 0 : items.map((item) => {
+            const { name, value: value2, total } = item;
+            return {
+              label: `${name} ${total !== void 0 && isShowNumberMatchingProduct ? ` (${total})` : ""}`,
+              value: value2
+            };
+          }),
+          defaultValue: clickedFacets && ((_b2 = clickedFacets[value]) == null ? void 0 : _b2.length) ? clickedFacets[value][0] : "",
+          labelStyle: filter_option_style
+        }
+      ) });
+    } else if (display.toLowerCase() === "select" && (items == null ? void 0 : items.length)) {
+      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Select,
+        {
+          placeholder: `Select ${label}`,
+          name: value,
+          onValueChange: (getValue) => handleFilterChange(value, getValue, true),
+          items: items == null ? void 0 : items.map((item) => {
+            const { name, value: value2, total } = item;
+            return {
+              label: `${name} ${total !== void 0 && isShowNumberMatchingProduct ? ` (${total})` : ""}`,
+              value: value2
+            };
+          }),
+          labelStyle: filter_option_style
+        }
+      ) });
+    } else if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
+      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items == null ? void 0 : items.map((item, index) => {
+        var _a3;
+        let getColorSwatch = (colorSwatches == null ? void 0 : colorSwatches.filter(({ name }) => name == null ? void 0 : name.includes(item.value))[0]) || {};
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ColorSwatch,
+          {
+            id: `${value}_${index}`,
+            name: value,
+            value: item.value,
+            rgb: getColorSwatch == null ? void 0 : getColorSwatch.rgb,
+            image: getColorSwatch == null ? void 0 : getColorSwatch.image,
+            onClick: (e) => handleFilterChange(value, e.currentTarget.value),
+            defaultChecked: clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value))
+          }
+        ) }, index);
+      }) });
+    }
+    return blockComponent;
+  };
+  const filterVerticalComponents = allowedFilter.map((filter, indexFilter) => {
+    const { value, label, display } = filter;
+    let isActive = clickedOpenFilterId === value;
+    let items = searchResultFacets[value];
+    let isRender = Boolean(display.toLowerCase() === "slider" ? items : items == null ? void 0 : items.length);
+    let isNotRerender = ["select"].includes(display.toLowerCase()) && (items == null ? void 0 : items.length);
+    let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
+    let getFacetComponent = facetComponent(filter);
+    if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
+      classesUlElement.push("sledge-instant-search__result-filter-item-color-swatches");
+    }
+    return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title", onClick: () => handleOpenFilter(value), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-title", style: filter_title_style, children: label }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: false, animate: isActive ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 15, height: 15, color: "#000000" }) })
+      ] }),
+      isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: isNotRerender ? getFacetComponent : !isFilterChanged ? getFacetComponent : null })
+    ] }, indexFilter) : null;
+  });
+  const filterHorizontalComponents = allowedFilter.map((filter, indexFilter) => {
+    const { value, label, display } = filter;
+    let isActive = clickedOpenFilterId === value;
+    let items = searchResultFacets[value];
+    let isRender = Boolean(display.toLowerCase() === "slider" ? items : items == null ? void 0 : items.length);
+    let isNotRerender = ["radio", "select"].includes(display.toLowerCase()) && (items == null ? void 0 : items.length);
+    let classesUlElement = ["sledge-instant-search__result-filter-item-list"];
+    let getFacetComponent = facetComponent(filter);
+    if (display.toLowerCase() === "swatch" && (items == null ? void 0 : items.length)) {
+      classesUlElement.push("sledge-instant-search__result-filter-item-color-swatches");
+    }
+    return isRender ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Popover,
+      {
+        trigger: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { type: "button", onClick: () => handleOpenFilter(value), children: [
+          label,
+          /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "closed", animate: isActive ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, className: "sort-trigger-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 20, height: 20, color: "#000000" }) })
+        ] }),
+        content: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-facet", children: isActive && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: classesUlElement.join(" "), children: isNotRerender ? getFacetComponent : !isFilterChanged ? getFacetComponent : null }) }),
+        withOpenState: false,
+        setIsOpen: (open) => setClickedOpenFilterId(!open ? "" : value),
+        hideCloseIcon: true,
+        align: "center",
+        className: "sledge-instant-search__filter-horizontal-facet-content",
+        customArrow: `<svg style="transform: rotate(180deg); margin-bottom: 3px; stroke-dasharray: 0,0,36;" width="44" height="12" viewBox="0 0 44 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.2222 1.99825e-06C23.2222 11.9998 4.88979 11.9999 0.000354767 12L23.2222 12L44 12C23.2222 12 23.2222 1.99825e-06 23.2222 1.99825e-06Z" fill="white" stroke="#393d4e" stroke-width="1px" /></svg>`
+      }
+    ) }, indexFilter) : null;
+  });
+  let dataClickedFacets = [];
+  Object.entries(clickedFacets).map((facet) => {
+    var _a2, _b2;
+    if ((facet == null ? void 0 : facet.length) && facet[1].length) {
+      let getName = facet[0];
+      let isAdditionalFilter = ["variants.inventory_quantity"].includes(getName);
+      if (isAdditionalFilter)
+        return;
+      let isRange = ["variants.price"].includes(getName);
+      let getAllowedFilterOne = allowedFilter.filter(({ value }) => value == null ? void 0 : value.includes(getName));
+      let getLabel = (getAllowedFilterOne == null ? void 0 : getAllowedFilterOne.length) ? getAllowedFilterOne[0].label : getName;
+      let items = Array.isArray(facet[1]) && ((_a2 = facet[1]) == null ? void 0 : _a2.length) > 1 ? isRange ? dataClickedFacets.push({
+        label: getLabel,
+        name: getName,
+        value: facet[1]
+      }) : (_b2 = facet[1]) == null ? void 0 : _b2.map((item) => {
+        dataClickedFacets.push({
+          label: getLabel,
+          name: getName,
+          value: item
+        });
+      }) : dataClickedFacets.push({
+        label: getLabel,
+        name: getName,
+        value: facet[1][0]
+      });
+      return items;
+    }
+  });
+  const paginationComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    ((_f = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _f.enable_on_search) && ((_g = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _g.layout) === "horizontal" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isFirstLoading ? filterHorizontalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoadingSetting ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal-loading", children: filterHorizontalSkeleton }) : filterHorizontalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal-wrapper", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter-horizontal", children: filterHorizontalComponents }),
+      Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_h = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _h.show_refine_by_block)) ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-horizontal", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "sledge-instant-search__result-filter-horizontal-refine-item sledge-instant-search__result-filter-horizontal-refine-item-clear-all",
+            onClick: handleFilterReset,
+            children: "Clear All"
+          }
+        ),
+        dataClickedFacets.map((itemClickedFacet, index) => {
+          const { label, name, value } = itemClickedFacet;
+          return facetBlockSelected({
+            label,
+            name,
+            value,
+            index
+          });
+        })
+      ] }) }) : null
+    ] }) }) }) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_i = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _i.layout, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      ((_j = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _j.enable_on_search) && ((_k = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _k.layout) === "vertical" ? isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: filterVerticalSkeleton }) : filterVerticalComponents.every((currentValue) => !currentValue) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-filter", children: isLoadingSetting ? filterVerticalSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        Boolean((dataClickedFacets == null ? void 0 : dataClickedFacets.length) && ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.show_refine_by_block)) ? Boolean(dataClickedFacets.every((currentValue) => !currentValue)) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-title-refine", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "sledge-instant-search__result-filter-item-title-refine-heading", children: "Filter" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__result-filter-item-title-refine-clear", onClick: handleFilterReset, children: "Clear All" })
+          ] }),
+          /* @__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
+            });
+          }) })
+        ] }) : null,
+        filterVerticalComponents
+      ] }) }) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data", children: [
+        isFirstLoading ? searchAndSelectOptionSkeleton : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
+          ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.layout) === "horizontal" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary sledge-instant-search__result-data-summary-filter-horizontal", children: summaryText }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SearchInputField,
+            {
+              type: "text",
+              icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
+              placeholder: "Search products...",
+              value: keyword,
+              onChange: ({ value }) => setKeyword && setKeyword(value),
+              onResetField: () => setKeyword && setKeyword(""),
+              className: "sledge-instant-search__result-data-keyword-form",
+              withClearField: true
+            }
+          ),
+          /* @__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.jsx("span", { children: "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: ({ label, value }) => handleChangeSort(label, value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-summary-select-field-item", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Limit:" }),
+              ((_n = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _n.allowed_limit) && Boolean((_p = (_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.allowed_limit) == null ? void 0 : _p.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)
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          productGridSkeleton,
+          (searchResult == null ? void 0 : searchResult.length) ? paginationComponent : null
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.layout) === "vertical" && /* @__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,
+              {
+                sourceApp: "instant-search",
+                type: "large",
+                data: searchResult.map((item) => {
+                  const { id, title, currency, image, url, vendor, variants } = item || {};
+                  return {
+                    product: {
+                      id,
+                      title,
+                      image,
+                      url,
+                      vendor,
+                      currency
+                    },
+                    variants: (variants == null ? void 0 : variants.length) ? variants.map((variant) => {
+                      const { id: variant_id, title: variant_title, price, sku, inventory_quantity } = variant || {};
+                      return { id: variant_id, title: variant_title, price, sku, inventory_quantity };
+                    }) : []
+                  };
+                }),
+                setting: {
+                  show_vendor: (_r = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _r.show_vendor,
+                  show_sku: (_s = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _s.show_sku,
+                  show_price: (_t = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _t.show_price
+                },
+                customProductCard,
+                showOptionOutOfStock: true,
+                onAfterAddToCart,
+                onAfterAddWishlist,
+                onAfterRemoveWishlist,
+                onAfterRenderProduct
+              }
+            ),
+            paginationComponent
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultEmpty, {})
+        ] })
+      ] })
+    ] }) })
+  ] });
+};
+const ResultCategory = (props) => {
+  var _a, _b, _c, _d;
+  const { keyword, clickedTabIndexId, clickedTabIndexName, setKeyword } = props || {};
+  const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [clickedSortId, setClickedSortId] = React__default.useState("");
+  const [searchResult, setSearchResult] = React__default.useState([]);
+  const [searchProcessingTimeMs, setSearchProcessingTimeMs] = React__default.useState(0);
+  const [currentPage, setCurrentPage] = React__default.useState(1);
+  const [totalPage, setTotalPage] = React__default.useState(0);
+  const [totalSearchResult, setTotalSearchResult] = React__default.useState(0);
+  const [summaryText, setSummaryText] = React__default.useState(null);
+  const previousState = usePrevious({ keyword });
+  const handleSearchResultData = (result) => {
+    if (!result)
+      return;
+    const { hits, processingTimeMs, totalHits, totalPages } = result;
+    setIsFirstLoading(false);
+    setIsLoading(false);
+    setSearchResult(hits);
+    setSearchProcessingTimeMs(processingTimeMs || 0);
+    setTotalPage(totalPages);
+    setTotalSearchResult(totalHits || 0);
+    setSummaryText(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary-item", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text", children: [
+        totalHits,
+        " result",
+        " ",
+        (keyword == null ? void 0 : keyword.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          "for ",
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-instant-search__result-data-summary-text-keyword", children: [
+            '"',
+            keyword,
+            '"'
+          ] })
+        ] }) : null
+      ] }) })
+    );
+  };
+  const handleSearchResult = async () => {
+    if (!clickedTabIndexId)
+      return;
+    setIsLoading(true);
+    let response;
+    let body = {
+      q: keyword,
+      sort: clickedSortId ? [clickedSortId] : [],
+      page: currentPage,
+      hitsPerPage: 12
+    };
+    response = await search(clickedTabIndexId, body);
+    handleSearchResultData(response);
+  };
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+  React__default.useEffect(() => {
+    if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword)) {
+      const delayDebounceFn = setTimeout(() => {
+        handleSearchResult();
+      }, 500);
+      return () => clearTimeout(delayDebounceFn);
+    } else {
+      handleSearchResult();
+    }
+  }, [clickedSortId, keyword, currentPage, 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,
+    {
+      type: "text",
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
+      placeholder: `Search ${clickedTabIndexName ? clickedTabIndexName.toLowerCase() : ""}...`,
+      value: keyword,
+      onChange: ({ value }) => setKeyword && setKeyword(value),
+      onResetField: () => setKeyword && setKeyword(""),
+      className: "sledge-instant-search__result-data-keyword-form",
+      withClearField: true
+    }
+  ) });
+  const summaryTextSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "117px", height: "28px", color: "grey-100", rounded: "md", animationDuration: "18s" }) });
+  const skeletonLoadingComponent = ((_a = String(clickedTabIndexId)) == null ? void 0 : _a.includes("collection")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.CollectionGrid, { count: 3 }) : ((_b = String(clickedTabIndexId)) == null ? void 0 : _b.includes("page")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.PageGrid, { count: 12 }) : ((_c = String(clickedTabIndexId)) == null ? void 0 : _c.includes("blog")) || ((_d = String(clickedTabIndexId)) == null ? void 0 : _d.includes("article")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.BlogGrid, { count: 12 }) : null;
+  const ProvideElementFirstLoading = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-category-wrapper", children: [
+    searchKeywordComponent,
+    summaryTextSkeleton,
+    skeletonLoadingComponent
+  ] });
+  const ProvideElementLoading = () => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    searchKeywordComponent,
+    summaryTextSkeleton,
+    skeletonLoadingComponent
+  ] });
+  const ProvideElement = (elementProps) => {
+    var _a2, _b2, _c2, _d2;
+    return ((_a2 = String(clickedTabIndexId)) == null ? void 0 : _a2.includes("collection")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionGrid, { ...elementProps }) : ((_b2 = String(clickedTabIndexId)) == null ? void 0 : _b2.includes("page")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(PageGrid, { ...elementProps }) : ((_c2 = String(clickedTabIndexId)) == null ? void 0 : _c2.includes("blog")) || ((_d2 = String(clickedTabIndexId)) == null ? void 0 : _d2.includes("article")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlogGrid, { ...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: [
+    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.map((item) => {
+            const { id, title, url } = item;
+            return {
+              id,
+              title,
+              description: `${title}${clickedTabIndexName ? ` ${clickedTabIndexName.toLowerCase()}` : ""}`,
+              url,
+              image: ""
+            };
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page) })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultEmpty, {})
+  ] }) }) });
+};
+const ResultEmpty = (props) => {
+  const [title, setTitle] = React__default.useState("");
+  const [description, setDescription] = React__default.useState("");
+  React__default.useEffect(() => {
+    setTitle("No results found");
+    setDescription("Your search did not match any results. <br/> Please try again");
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-empty", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-empty-title", dangerouslySetInnerHTML: { __html: title } }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-empty-description", dangerouslySetInnerHTML: { __html: description } })
+  ] });
+};
+const SearchWidget$1 = "";
+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;
+  const { width = "400px", customProductCard, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
+  const { isRenderApp } = React__default.useContext(SledgeContext);
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [keyword, setKeyword] = React__default.useState("");
+  const [suffixIndexProduct, setSuffixIndexProduct] = React__default.useState("");
+  const [searchResultProduct, setSearchResultProduct] = React__default.useState([]);
+  const [searchResultOther, setSearchResultOther] = React__default.useState([]);
+  const [allowedTabs, setAllowedTabs] = React__default.useState([]);
+  const [hiddenTags, setHiddenTags] = React__default.useState([]);
+  const [displaySettings, setDisplaySettings] = React__default.useState({});
+  const [suggestionSettings, setSuggestionSettings] = React__default.useState({});
+  const [suggestionIndex, setSuggestionIndex] = React__default.useState("");
+  const previousState = usePrevious({ keyword });
+  const handleMultiSearch = async (data, onSearch = false) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2;
+    if (!keyword.length)
+      return;
+    setIsLoading(true);
+    const { tabs, suffix_index_product, hidden_tags, display } = data;
+    const suggestion = ((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion) || {};
+    let response;
+    let body = {
+      queries: tabs.map((tab) => {
+        var _a3;
+        const { index } = tab;
+        let isProductIndex = index.includes(suffix_index_product);
+        let additionalFilter = [];
+        if (hidden_tags == null ? void 0 : hidden_tags.length)
+          additionalFilter.push(`tags NOT IN [${hidden_tags}]`);
+        if (!((_a3 = display == null ? void 0 : display.filter) == null ? void 0 : _a3.show_out_of_stock))
+          additionalFilter.push("variants.inventory_quantity > 0");
+        return {
+          indexUid: index,
+          q: keyword,
+          hitsPerPage: isProductIndex ? 6 : 4,
+          filter: isProductIndex ? additionalFilter.join(" AND ") : ""
+        };
+      })
+    };
+    response = await multiSearch(body);
+    if (!response)
+      return;
+    const { results } = response;
+    let valueSearchResultProduct = results == null ? void 0 : results.filter(({ indexUid }) => indexUid == null ? void 0 : indexUid.includes(suffix_index_product));
+    if (onSearch && (keyword == null ? void 0 : keyword.length)) {
+      searchTrigger({
+        keyword,
+        resultCount: ((_b2 = valueSearchResultProduct[0]) == null ? void 0 : _b2.totalHits) || 0
+      });
+    }
+    let valueSearchResultOther = ((_c2 = results == null ? void 0 : results.filter(({ indexUid }) => !(indexUid == null ? void 0 : indexUid.includes(suffix_index_product)))) == null ? void 0 : _c2.map((result) => {
+      const { indexUid } = result;
+      const { name } = tabs == null ? void 0 : tabs.find(({ index }) => index.includes(indexUid));
+      return {
+        ...result,
+        ...{
+          name: name || ""
+        }
+      };
+    })) || [];
+    let getValueSearchResultProduct = (valueSearchResultProduct == null ? void 0 : valueSearchResultProduct.length) ? (_d2 = valueSearchResultProduct[0]) == null ? void 0 : _d2.hits : [];
+    let valueSuggestionIndex = !keyword.length ? "zero_character" : !(getValueSearchResultProduct == null ? void 0 : getValueSearchResultProduct.length) ? "no_result" : "";
+    let isPriorityZeroCharacter = Boolean(
+      !keyword.length && Object.keys(suggestion).length && ((_f2 = (_e2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _e2.products) == null ? void 0 : _f2.active) && ((_i2 = (_h2 = (_g2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _g2.products) == null ? void 0 : _h2.list) == null ? void 0 : _i2.length)
+    );
+    setSearchResultProduct(isPriorityZeroCharacter ? (_k2 = (_j2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _j2.products) == null ? void 0 : _k2.list : getValueSearchResultProduct);
+    setSearchResultOther(valueSearchResultOther);
+    setSuggestionIndex(valueSuggestionIndex);
+    setIsLoading(false);
+  };
+  const handleSettings = async (LOCAL_STORAGE_INSTANT_SEARCH_SETTING) => {
+    var _a2;
+    if (!keyword.length)
+      return;
+    let response;
+    let run = false;
+    response = JSON.parse(LOCAL_STORAGE_INSTANT_SEARCH_SETTING);
+    if (!response)
+      return;
+    const { status, data } = response;
+    const { code } = status;
+    const { tabs, suffix_index_product, hidden_tags, display } = data;
+    run = code === 200 || false;
+    if (run) {
+      setAllowedTabs(tabs);
+      setSuffixIndexProduct(suffix_index_product);
+      setHiddenTags(hidden_tags);
+      setDisplaySettings(display);
+      setSuggestionSettings((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion);
+      await handleMultiSearch(data);
+    }
+  };
+  React__default.useEffect(() => {
+    if (!(isRenderApp == null ? void 0 : isRenderApp.instantSearch))
+      return;
+    handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "");
+  }, [keyword]);
+  React__default.useEffect(() => {
+    if (Boolean(previousState && (previousState == null ? void 0 : previousState.keyword) !== keyword)) {
+      const delayDebounceFn = setTimeout(() => {
+        handleMultiSearch({ tabs: allowedTabs, suffix_index_product: suffixIndexProduct, hidden_tags: hiddenTags, display: displaySettings }, true);
+      }, 500);
+      return () => clearTimeout(delayDebounceFn);
+    }
+  }, [keyword]);
+  const wrapperStyle = {
+    maxWidth: width
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-wrapper", style: wrapperStyle, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SearchInputField,
+      {
+        type: "text",
+        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 18, height: 18, color: "#868686" }),
+        placeholder: "Search anything",
+        value: keyword,
+        onChange: ({ value }) => setKeyword(value),
+        onResetField: () => setKeyword(""),
+        withClearField: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "hidden", animate: keyword.length ? "visible" : "hidden", variants: VISIBLE_ANIMATION, className: "sledge-instant-search__widget-search-form-result", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-other sledge-instant-search__widget-search-form-result-flex-item-other-skeleton", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SkeletonLoading.Item,
+          {
+            width: "100%",
+            height: "42px",
+            color: "grey-100",
+            rounded: "md",
+            ...Boolean(index) && {
+              style: { marginTop: "12px" }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gap: "12px",
+              marginTop: "12px"
+            },
+            children: [1, 2, 3].map((index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SkeletonLoading.Item,
+              {
+                width: "100%",
+                height: "28px",
+                color: "grey-100",
+                rounded: "md",
+                animationDuration: "13s",
+                style: {
+                  maxWidth: "140px"
+                }
+              },
+              index2
+            ))
+          }
+        )
+      ] }, index)) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-product", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 6, type: "small" }) })
+    ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { isLoading, withCorner: false, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-other", children: [
+          Object.keys(suggestionSettings).length && ((_b = (_a = suggestionSettings[suggestionIndex]) == null ? void 0 : _a.keywords) == null ? void 0 : _b.active) && ((_e = (_d = (_c = suggestionSettings[suggestionIndex]) == null ? void 0 : _c.keywords) == null ? void 0 : _d.list) == null ? void 0 : _e.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-title", children: "Suggestions" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__widget-search-form-result-list", children: suggestionSettings[suggestionIndex].keywords.list.map((keyword2, index) => {
+              return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "a",
+                {
+                  href: `${SEARCH_RESULT_URL}?q=${keyword2}`,
+                  className: "sledge-instant-search__widget-search-form-result-list-link sledge-instant-search__widget-search-form-result-list-link-suggestion",
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 12, height: 12, color: "#677487" }),
+                    " ",
+                    keyword2
+                  ]
+                }
+              ) }, index);
+            }) })
+          ] }) : null,
+          searchResultOther.map((item, index) => {
+            const { hits, name } = item;
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-title", children: name }),
+              (hits == null ? void 0 : hits.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__widget-search-form-result-list", children: hits.map((hit, index2) => {
+                const { title, url } = hit;
+                return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, className: "sledge-instant-search__widget-search-form-result-list-link", children: title }) }, index2);
+              }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge-instant-search__widget-search-form-result-list", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "sledge-instant-search__widget-search-form-result-item-disabled", children: [
+                "No ",
+                name.toLowerCase(),
+                " were found"
+              ] }) })
+            ] }, index);
+          })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-product", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-title-product", children: "Products" }),
+          (searchResultProduct == null ? void 0 : searchResultProduct.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-product", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ProductGrid,
+            {
+              sourceApp: "instant-search",
+              type: "small",
+              data: searchResultProduct.map((item) => {
+                const { id, title, currency, image, url, vendor, variants } = item || {};
+                return {
+                  product: {
+                    id,
+                    title,
+                    image,
+                    url,
+                    vendor,
+                    currency
+                  },
+                  variants: (variants == null ? void 0 : variants.length) ? variants.map((variant) => {
+                    const { id: variant_id, title: variant_title, price, sku, inventory_quantity } = variant || {};
+                    return { id: variant_id, title: variant_title, price, sku, inventory_quantity };
+                  }) : []
+                };
+              }),
+              setting: {
+                show_vendor: (_f = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _f.show_vendor,
+                show_sku: (_g = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _g.show_sku,
+                show_price: (_h = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _h.show_price
+              },
+              customProductCard,
+              showOptionOutOfStock: true,
+              onAfterAddToCart,
+              onAfterAddWishlist,
+              onAfterRemoveWishlist,
+              onAfterRenderProduct
+            }
+          ) }) : Object.keys(suggestionSettings).length && ((_j = (_i = suggestionSettings[suggestionIndex]) == null ? void 0 : _i.products) == null ? void 0 : _j.active) && ((_m = (_l = (_k = suggestionSettings[suggestionIndex]) == null ? void 0 : _k.products) == null ? void 0 : _l.list) == null ? void 0 : _m.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-product-suggestion-no-result-text", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Sorry, nothing found for" }),
+              " ",
+              /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: keyword }),
+              ". ",
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Did you mean:" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ProductGrid,
+              {
+                sourceApp: "instant-search",
+                type: "small",
+                data: suggestionSettings[suggestionIndex].products.list.map((item) => {
+                  const { id, title, currency, image, url, vendor, variants } = item || {};
+                  return {
+                    product: {
+                      id,
+                      title,
+                      image,
+                      url,
+                      vendor,
+                      currency
+                    },
+                    variants: (variants == null ? void 0 : variants.length) ? variants.map((variant) => {
+                      const { id: variant_id, title: variant_title, price, sku, inventory_quantity } = variant || {};
+                      return { id: variant_id, title: variant_title, price, sku, inventory_quantity };
+                    }) : []
+                  };
+                }),
+                setting: {
+                  show_vendor: (_n = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _n.show_vendor,
+                  show_sku: (_o = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _o.show_sku,
+                  show_price: (_p = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _p.show_price
+                },
+                customProductCard,
+                showOptionOutOfStock: true,
+                onAfterAddToCart,
+                onAfterAddWishlist,
+                onAfterRemoveWishlist,
+                onAfterRenderProduct
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-product-disabled", children: "No product were found" })
+        ] })
+      ] }),
+      (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_r = (_q = suggestionSettings[suggestionIndex]) == null ? void 0 : _q.products) == null ? void 0 : _r.active) && ((_u = (_t = (_s = suggestionSettings[suggestionIndex]) == null ? void 0 : _s.products) == null ? void 0 : _t.list) == null ? void 0 : _u.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: `${SEARCH_RESULT_URL}?q=${keyword}`, className: "sledge-instant-search__widget-button-more", children: "View More Result" }) }) : null
+    ] }) }) })
+  ] });
+};
+export {
+  ProductFilterWidget,
+  SearchIconWidget,
+  SearchIconWidgetPopup,
+  SearchResultWidget,
+  SearchWidget
+};
+//# sourceMappingURL=sledge-react-instant-search.js.map