@sledge-app/react-instant-search 1.0.20 → 1.0.22

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

@@ -1,5 +1,5 @@
-import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, a as $cb5cc270b50c6fcd$export$41fb9f06171c75f4, b as $cb5cc270b50c6fcd$export$602eac185826482c, c as $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, d as $cb5cc270b50c6fcd$export$f39c2d165cd861fe, e as $cb5cc270b50c6fcd$export$21b07c8f274aebd5, f as $67824d98245208a0$export$be92b6f5f03c0fe9, g as $67824d98245208a0$export$adb584737d712b70, h as $e698a72e93240346$export$be92b6f5f03c0fe9, i as $e698a72e93240346$export$adb584737d712b70, k as $faa2e61a3361514f$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$13921ac0cc260818, m as $faa2e61a3361514f$export$9a58ef0d7ad3278c, n as $faa2e61a3361514f$export$6521433ed15a34db, o as $f99a8c78507165f7$export$be92b6f5f03c0fe9, p as $f99a8c78507165f7$export$6d08773d2e66f8f2, q as $f99a8c78507165f7$export$adb584737d712b70, r as $cc7e05a45900e73f$export$6d08773d2e66f8f2, s as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, t as $cc7e05a45900e73f$export$c3468e2714d175fa, u as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, v as $cc7e05a45900e73f$export$41fb9f06171c75f4, w as $cc7e05a45900e73f$export$4c8d1a57a761ef94, x as $cc7e05a45900e73f$export$f04a61298a47a40f, y as $cc7e05a45900e73f$export$602eac185826482c, z as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, A as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, B as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, C as $cc7e05a45900e73f$export$bf1aedc3039c8d63, D as motion, E as client, F as $a093c7e1ec25a057$export$2881499e37b75b9a, G as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, H as $a093c7e1ec25a057$export$41fb9f06171c75f4, I as $a093c7e1ec25a057$export$602eac185826482c, J as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, K as $a093c7e1ec25a057$export$21b07c8f274aebd5, L as $57acba87d6e25586$export$be92b6f5f03c0fe9, M as $57acba87d6e25586$export$d5c6c08dc2d3ca7, N as $57acba87d6e25586$export$9a4e88b92edfce6b, O as $57acba87d6e25586$export$6521433ed15a34db, P as MasonryResponsive, Q as Masonry, R as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, S as $5d3850c4d0b4e6c7$export$602eac185826482c, T as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, U as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-efe38901.js";
-import React__default from "react";
+import { j as jsxRuntimeExports, $ as $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, a as $cb5cc270b50c6fcd$export$41fb9f06171c75f4, b as $cb5cc270b50c6fcd$export$602eac185826482c, c as $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, d as $cb5cc270b50c6fcd$export$f39c2d165cd861fe, e as $cb5cc270b50c6fcd$export$21b07c8f274aebd5, f as $67824d98245208a0$export$be92b6f5f03c0fe9, g as $67824d98245208a0$export$adb584737d712b70, h as $e698a72e93240346$export$be92b6f5f03c0fe9, i as $e698a72e93240346$export$adb584737d712b70, k as $faa2e61a3361514f$export$be92b6f5f03c0fe9, l as $faa2e61a3361514f$export$13921ac0cc260818, m as $faa2e61a3361514f$export$9a58ef0d7ad3278c, n as $faa2e61a3361514f$export$6521433ed15a34db, o as $f99a8c78507165f7$export$be92b6f5f03c0fe9, p as $f99a8c78507165f7$export$6d08773d2e66f8f2, q as $f99a8c78507165f7$export$adb584737d712b70, r as $cc7e05a45900e73f$export$6d08773d2e66f8f2, s as $cc7e05a45900e73f$export$d6e5bf9c43ea9319, t as $cc7e05a45900e73f$export$c3468e2714d175fa, u as $cc7e05a45900e73f$export$be92b6f5f03c0fe9, v as $cc7e05a45900e73f$export$41fb9f06171c75f4, w as $cc7e05a45900e73f$export$4c8d1a57a761ef94, x as $cc7e05a45900e73f$export$f04a61298a47a40f, y as $cc7e05a45900e73f$export$602eac185826482c, z as $cc7e05a45900e73f$export$7c6e2c02157bb7d2, A as $cc7e05a45900e73f$export$2f60d3ec9ad468f2, B as $cc7e05a45900e73f$export$d5c6c08dc2d3ca7, C as $cc7e05a45900e73f$export$bf1aedc3039c8d63, D as motion, E as client, F as $a093c7e1ec25a057$export$2881499e37b75b9a, G as $a093c7e1ec25a057$export$be92b6f5f03c0fe9, H as $a093c7e1ec25a057$export$41fb9f06171c75f4, I as $a093c7e1ec25a057$export$602eac185826482c, J as $a093c7e1ec25a057$export$7c6e2c02157bb7d2, K as $a093c7e1ec25a057$export$21b07c8f274aebd5, L as $57acba87d6e25586$export$be92b6f5f03c0fe9, M as $57acba87d6e25586$export$d5c6c08dc2d3ca7, N as $57acba87d6e25586$export$9a4e88b92edfce6b, O as $57acba87d6e25586$export$6521433ed15a34db, P as MasonryResponsive, Q as Masonry, R as useEmblaCarousel, S as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, T as $5d3850c4d0b4e6c7$export$602eac185826482c, U as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, V as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-eadacf73.js";
+import React__default, { createElement } from "react";
 import { SledgeContext } from "@sledge-app/core";
 import "react-dom";
 const ProductFilterWidget = (props) => {
@@ -7,6 +7,7 @@ const ProductFilterWidget = (props) => {
 };
 const API_URL = "https://api.sledge-app.com";
 const INSTANT_SEARCH_ENGINE_URL = "https://instant-search-engine.sledge-app.com";
+const CDN_URL = "https://sledgeassets.nyc3.cdn.digitaloceanspaces.com";
 const SELECTOR_ATTRIBUTE_KEY = "data-component";
 const DATASET_ATTRIBUTE_KEY = {
   GLOBAL: {
@@ -34,7 +35,11 @@ const DATASET_ATTRIBUTE_KEY = {
     API_KEY: "data-api-key",
     INSTANT_SEARCH_API_KEY: "data-instant-search-api-key",
     RENDER_PRODUCT_CARD: "data-render-product-card",
-    WITH_SKELETON_LOADING: "data-with-skeleton-loading"
+    WITH_SKELETON_LOADING: "data-with-skeleton-loading",
+    SECTION_TITLE: "data-section-title",
+    SECTION_DESCRIPTION: "data-section-description",
+    USE_SLIDER: "data-use-slider",
+    POSITION_WIDGET: "data-position-widget"
   },
   WISHLIST: {
     SHARE_ID: "data-share-id",
@@ -46,7 +51,9 @@ const DATASET_ATTRIBUTE_KEY = {
   PRODUCT_REVIEW: {
     RATING_SIZE: "data-rating-size",
     RATING_TOTAL: "data-rating-total",
-    RATING_AVERAGE: "data-rating-average"
+    RATING_AVERAGE: "data-rating-average",
+    RENDER_REVIEW_PRODUCT_INFO: "data-render-review-product-info",
+    SHOW_RATING_AVERAGE: "data-show-rating-average"
   },
   INSTANT_SEARCH: {
     ON_AFTER_RENDER_COLLECTION: "data-on-after-render-collection",
@@ -62,6 +69,10 @@ const DATASET_ATTRIBUTE_KEY = {
     RENDER_PAGE_CARD: "data-render-page-card",
     RENDER_BLOG_CARD: "data-render-blog-card",
     RENDER_ARTICLE_CARD: "data-render-article-card"
+  },
+  PRODUCT_RECOMMENDATION: {
+    LIMIT_TO_DISPLAY: "data-limit-to-display",
+    HIDDEN_PRODUCT_IDS: "data-hidden-product-ids"
   }
 };
 const LOCAL_STORAGE_KEY = {
@@ -73,22 +84,25 @@ const LOCAL_STORAGE_KEY = {
   WISHLIST_SETTING: "sledge-wishlist-setting",
   PRODUCT_REVIEW_SETTING: "sledge-product-review-setting",
   INSTANT_SEARCH_SETTING: "sledge-instant-search-setting",
+  PRODUCT_RECOMMENDATION_SETTING: "sledge-product-recommendation-setting",
   ISSUED_AUTH_APP: "sledge-issued-auth-app",
-  EXPIRED_AUTH_APP: "sledge-expired-auth-app"
+  EXPIRED_AUTH_APP: "sledge-expired-auth-app",
+  RECENTLY_VIEWED_APP: "sledge-recently-viewed"
 };
 const INTERNAL_SELECTOR_VALUE = {
   ELEMENT_TOAST_NOTIFICATION: "toast-notification",
   ELEMENT_CONFIRMATION_POPUP: "confirmation-popup",
   ELEMENT_INFO_POPUP: "info-popup",
   ELEMENT_CONTAINER_WIDGET: "container-widget",
+  ELEMENT_FLOATING_LEFT_WIDGET: "floating-left-widget",
+  ELEMENT_FLOATING_RIGHT_WIDGET: "floating-right-widget",
   WISHLIST: {
-    ELEMENT_BADGE_FLOATING_ICON: "wishlist-badge-floating-icon",
-    ELEMENT_BADGE_FLOATING_FULL: "wishlist-badge-floating-full",
     ELEMENT_WIDGET_POPUP: "wishlist-widget-popup"
   },
   PRODUCT_REVIEW: {
     ELEMENT_WIDGET_POPUP_DETAIL: "product-review-widget-popup-detail",
-    ELEMENT_WIDGET_FORM_ADD: "product-review-widget-form-add"
+    ELEMENT_WIDGET_FORM_ADD: "product-review-widget-form-add",
+    ELEMENT_HAPPY_CUSTOMERS_PAGE_POPUP: "product-review-happy-customers-page-popup"
   },
   INSTANT_SEARCH: {
     ELEMENT_SEARCH_ICON_WIDGET_POPUP: "instant-search-icon-widget-popup"
@@ -107,15 +121,21 @@ const SELECTOR = {
   },
   PRODUCT_REVIEW: {
     ELEMENT_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-widget"]`,
-    ELEMENT_RATING: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-rating"]`
+    ELEMENT_HAPPY_CUSTOMERS_PAGE: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-happy-customers-page"]`,
+    ELEMENT_RATING: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-rating"]`,
+    ELEMENT_STICKY_SIDEBAR_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-review-sticky-sidebar-widget"]`
   },
   INSTANT_SEARCH: {
     ELEMENT_SEARCH_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="instant-search-widget"]`,
     ELEMENT_SEARCH_ICON_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="instant-search-icon-widget"]`,
     ELEMENT_SEARCH_RESULT_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="instant-search-result-widget"]`,
     ELEMENT_PLP_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="instant-search-product-filter-widget"]`
+  },
+  PRODUCT_RECOMMENDATION: {
+    ELEMENT_RECENTLY_VIEWED_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="product-recommendation-recently-viewed-widget"]`
   }
 };
+const DEFAULT_MAX_WIDTH_COMPONENT = "1180px";
 const DEFAULT_SEARCH_RESULT_URL = "/apps/sledge/search";
 const DEFAULT_WISHLIST_URL = "/apps/sledge/wishlist";
 const DEFAULT_QUERY_PARAM = {
@@ -557,8 +577,18 @@ const NoteIcon = ({ width, height, 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 { className = "", children, colorType = "light", fullWidth = false, elementType = "button", link = "", isActive, ...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 || ""} ${isActive ? "sledge__button-active" : ""}`,
+      "data-button-color-type": colorType,
+      "data-button-full-width": fullWidth,
+      ref: buttonRef,
+      ...otherProps,
+      children
+    }
+  );
 });
 const SearchInputField$1 = "";
 const SearchInputField = (props) => {
@@ -647,7 +677,7 @@ const SelectField = (props) => {
 };
 const ProductGrid$1 = "";
 async function swr(url, options) {
-  if (typeof localStorage !== "undefined" && typeof caches !== "undefined" && options.method === "GET") {
+  if (typeof localStorage !== "undefined" && typeof caches !== "undefined" && options.method === "GET" && !(options == null ? void 0 : options.ignoreSWR)) {
     const data = await getData(url);
     return await data.json();
   } else
@@ -702,8 +732,23 @@ const scrollToElement = (params) => {
     behavior: "smooth"
   });
 };
+const getUnixTimestamp = (params) => {
+  const { addMoreTime = 0, addMoreTimeBy = "day" } = params || {};
+  let moreTime = 0;
+  if (addMoreTime) {
+    if (addMoreTimeBy === "day")
+      moreTime = addMoreTime * 60 * 60 * 24;
+    if (addMoreTimeBy === "hour")
+      moreTime = addMoreTime * 60 * 60;
+    if (addMoreTimeBy === "minute")
+      moreTime = addMoreTime * 60;
+    if (addMoreTimeBy === "second")
+      moreTime = addMoreTime;
+  }
+  return Math.floor(Date.now() / 1e3) + moreTime;
+};
 const fetchApi = async (params) => {
-  const { url, method, authorization = "", payload = {}, headers = {}, isSimpleRequest = true, isUploadFile = false } = params;
+  const { url, method, authorization = "", payload = {}, headers = {}, isSimpleRequest = true, isUploadFile = false, ignoreSWR = false } = params;
   var myHeaders = new Headers();
   if (!isSimpleRequest) {
     if (authorization)
@@ -732,7 +777,8 @@ const fetchApi = async (params) => {
     method: fixMethod,
     redirect: "follow",
     headers: myHeaders,
-    body: fixMethod === "GET" ? null : isSimpleRequest || isUploadFile ? formdata : JSON.stringify(payload)
+    body: fixMethod === "GET" ? null : isSimpleRequest || isUploadFile ? formdata : JSON.stringify(payload),
+    ignoreSWR
   };
   return await swr(`${url}`, requestOptions);
 };
@@ -742,6 +788,35 @@ const convertDate = (date, options = {
   month: "numeric",
   day: "numeric"
 }) => new Date(date).toLocaleString("en-US", options);
+const watchElement = ({ selector = null, init = null, customInit = false }) => {
+  if (!selector || !init)
+    return;
+  var observer = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      var nodes = Array.prototype.slice.call(mutation.addedNodes);
+      nodes.forEach(function(node) {
+        if (node.nodeType === 1 && (node.matches(selector) || node.querySelector(selector))) {
+          if (!customInit) {
+            let elementNode = Array.from(node.querySelectorAll(selector));
+            if (elementNode.length) {
+              elementNode.map((item) => {
+                init(item);
+              });
+            }
+          } else {
+            init();
+          }
+        }
+      });
+    });
+  });
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: false,
+    characterData: false
+  });
+};
 const addToCart = async (data) => {
   var _a, _b;
   let items = [];
@@ -773,113 +848,6 @@ const addToCart = async (data) => {
     return;
   });
 };
-const BadgeFloatingFull = (props) => {
-  var _a;
-  const { sledgeAnonymId } = React__default.useContext(SledgeContext);
-  const { isFirstLoading, isLoading, totalWishlist, isMaximizeTotalWishlist, proxyUrl, position = "left", dataSettings, useProxyUrl } = props || {};
-  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
-  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
-  React__default.useEffect(() => {
-    setIsRequiredLogin(sledgeAnonymId && is_required_login);
-  }, [sledgeAnonymId]);
-  const handleRequiredLogin = (e) => {
-    if (isRequiredLogin) {
-      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"
-        });
-    } else {
-      if (useProxyUrl)
-        window.location.href = proxyUrl || "/";
-    }
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-wishlist__badge-floating sledge-wishlist__badge-floating-${position}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { onClick: handleRequiredLogin, className: "sledge-wishlist__badge-floating-icon-link", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-wishlist__badge-floating-text", children: "My Wishlist" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge-icon", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 18, height: 18, type: "fill", color: "#000000" }),
-      !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-bottom-right ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
-    ] })
-  ] }) });
-};
-const BadgeFloatingIcon = (props) => {
-  var _a;
-  const { sledgeAnonymId } = React__default.useContext(SledgeContext);
-  const { isFirstLoading, isLoading, totalWishlist, isMaximizeTotalWishlist, proxyUrl, position = "bottom-right", dataSettings, useProxyUrl } = props || {};
-  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
-  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
-  React__default.useEffect(() => {
-    setIsRequiredLogin(sledgeAnonymId && is_required_login);
-  }, [sledgeAnonymId]);
-  const handleRequiredLogin = (e) => {
-    if (isRequiredLogin) {
-      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"
-        });
-    } else {
-      if (useProxyUrl)
-        window.location.href = proxyUrl || "/";
-    }
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-wishlist__badge-floating-icon sledge-wishlist__badge-floating-${position}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { onClick: handleRequiredLogin, className: "sledge-wishlist__badge-floating-icon-link", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge-icon", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 27.01, height: 25.73, type: "outline", color: "#000000" }),
-    !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-bottom-right ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
-  ] }) }) });
-};
-const BadgeHeaderMenu = (props) => {
-  var _a;
-  const { sledgeAnonymId } = React__default.useContext(SledgeContext);
-  const { isFirstLoading, isLoading, totalWishlist, isMaximizeTotalWishlist, proxyUrl, dataSettings, useProxyUrl } = props || {};
-  const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
-  const defaultColorIcon = "currentColor";
-  const [colorIcon, setColorIcon] = React__default.useState(defaultColorIcon);
-  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
-  React__default.useEffect(() => {
-    setIsRequiredLogin(sledgeAnonymId && is_required_login);
-  }, [sledgeAnonymId]);
-  const handleRequiredLogin = (e) => {
-    if (isRequiredLogin) {
-      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"
-        });
-    } else {
-      if (useProxyUrl)
-        window.location.href = proxyUrl || "/";
-    }
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge", onClick: handleRequiredLogin, onMouseEnter: () => setColorIcon("#F85538"), onMouseLeave: () => setColorIcon(defaultColorIcon), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 20, height: 20, type: "outline", color: colorIcon }),
-    !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-header-menu ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
-  ] });
-};
 const addWishlist = async (data) => {
   const { productId, productVariantId, productName, productVendor, productSku, productVariantName, productLink, productImage, productCurrency, productPrice } = data;
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
@@ -995,18 +963,24 @@ const addToCartTrigger$1 = async (data) => {
     return;
   });
 };
-const BadgeRoot = (props) => {
+const Badge = (props) => {
   var _a;
-  const { children, useProxyUrl = false, data: propsData } = props;
-  const { isRenderApp, triggerRenderMultipleComponent } = React__default.useContext(SledgeContext);
+  const { useProxyUrl = false, data: propsData, position: positionProp } = props;
+  const { isRenderApp, triggerRenderMultipleComponent, sledgeAnonymId } = React__default.useContext(SledgeContext);
   const { wishlist: isRenderAppWishlist } = isRenderApp || {};
   const { value: valueRenderWishlistBadge, trigger: triggerRenderWishlistBadge } = ((_a = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.wishlist) == null ? void 0 : _a.badge) || {};
+  const defaultColorIcon = "currentColor";
+  const [colorIcon, setColorIcon] = React__default.useState(defaultColorIcon);
   const [totalWishlist, setTotalWishlist] = React__default.useState((propsData == null ? void 0 : propsData.total_data) || 0);
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
   const [isLoading, setIsLoading] = React__default.useState(!propsData);
   const [isMaximizeTotalWishlist, setIsMaximizeTotalWishlist] = React__default.useState(false);
   const [proxyUrl, setProxyUrl] = React__default.useState((propsData == null ? void 0 : propsData.proxy_url) || "");
   const [dataSettings, setDataSettings] = React__default.useState({});
+  const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
+  const { floating_button_type } = (dataSettings == null ? void 0 : dataSettings.launch_point) || {};
+  const defaultPosition = positionProp || floating_button_type;
+  const position = defaultPosition ? defaultPosition : "none";
   const handleGetWishlistInfo = async () => {
     var _a2, _b;
     let response;
@@ -1030,14 +1004,40 @@ const BadgeRoot = (props) => {
     response = JSON.parse(LOCAL_STORAGE_WISHLIST_SETTING);
     if (!response)
       return;
+    const { is_required_login } = response || {};
     setDataSettings(response);
-    await handleGetWishlistInfo();
+    setIsRequiredLogin(sledgeAnonymId && is_required_login);
+  };
+  const handleRequiredLogin = (e) => {
+    if (isRequiredLogin) {
+      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"
+        });
+    } else {
+      if (useProxyUrl)
+        window.location.href = proxyUrl || "/";
+    }
   };
   React__default.useEffect(() => {
     if (!isRenderAppWishlist)
       return;
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) || null);
   }, [isRenderAppWishlist]);
+  React__default.useEffect(() => {
+    if (!(dataSettings == null ? void 0 : dataSettings.launch_point))
+      return;
+    handleGetWishlistInfo();
+  }, [dataSettings]);
   React__default.useEffect(() => {
     if (!valueRenderWishlistBadge)
       return;
@@ -1045,86 +1045,96 @@ const BadgeRoot = (props) => {
       triggerRenderWishlistBadge(false);
     handleGetWishlistInfo();
   }, [valueRenderWishlistBadge]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.count(children) && React__default.Children.map(
-    children,
-    (child) => React__default.cloneElement(child, {
-      isFirstLoading,
-      isLoading,
-      totalWishlist,
-      isMaximizeTotalWishlist,
-      proxyUrl,
-      dataSettings,
-      useProxyUrl
-    })
-  ) });
+  const HeaderMenu = () => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge", onClick: handleRequiredLogin, onMouseEnter: () => setColorIcon("#F85538"), onMouseLeave: () => setColorIcon(defaultColorIcon), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 20, height: 20, type: "outline", color: colorIcon }),
+      !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-header-menu ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
+    ] });
+  };
+  const FloatingFull = () => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-wishlist__badge-floating sledge__badge-floating-${position}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { onClick: handleRequiredLogin, className: "sledge-wishlist__badge-floating-icon-link", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-wishlist__badge-floating-text", children: "My Wishlist" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge-icon", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 18, height: 18, type: "fill", color: "#000000" }),
+        !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-bottom-right ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
+      ] })
+    ] }) });
+  };
+  const FloatingIcon = () => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-wishlist__badge-floating-icon sledge-wishlist__badge-floating-${position}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { onClick: handleRequiredLogin, className: "sledge-wishlist__badge-floating-icon-link", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "sledge-wishlist__badge-icon", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(HeartIcon, { width: 27.01, height: 25.73, type: "outline", color: "#000000" }),
+      !isFirstLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `sledge-wishlist__badge-counter sledge-wishlist__badge-counter-bottom-right ${isMaximizeTotalWishlist ? "sledge-wishlist__badge-fit-content" : ""}`, children: isLoading || isRequiredLogin ? 0 : `${isMaximizeTotalWishlist ? "99+" : totalWishlist}` || 0 })
+    ] }) }) });
+  };
+  return isFirstLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: position === "none" ? /* @__PURE__ */ jsxRuntimeExports.jsx(HeaderMenu, {}) : String(position).includes("bottom") ? /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingFull, {}) });
 };
-const Badge = ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.count(children) && React__default.Children.map(children, (child) => React__default.cloneElement(child, {})) });
-Badge.Root = BadgeRoot;
-Badge.HeaderMenu = BadgeHeaderMenu;
-Badge.FloatingFull = BadgeFloatingFull;
-Badge.FloatingIcon = BadgeFloatingIcon;
 const BadgeInitSelector = () => {
   const sledgeWishlistSettings = localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.WISHLIST_SETTING) || "") : null;
-  if (!sledgeWishlistSettings)
+  let element = Array.from(document.querySelectorAll(SELECTOR.WISHLIST.ELEMENT_BADGE));
+  let isElementDetected = !element || element && !element.length;
+  if (!sledgeWishlistSettings || isElementDetected)
     return;
   const { floating_button_type } = (sledgeWishlistSettings == null ? void 0 : sledgeWishlistSettings.launch_point) || {};
   const isBottomFloatingType = String(floating_button_type).includes("bottom");
   if (floating_button_type !== "none") {
     if (isBottomFloatingType) {
-      let elementFloatingIcon = document.createElement("div");
-      elementFloatingIcon.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.WISHLIST.ELEMENT_BADGE_FLOATING_ICON);
-      document.body.appendChild(elementFloatingIcon);
-      if (elementFloatingIcon) {
-        elementFloatingIcon.innerHTML = "";
-        const USE_PROXY_URL = elementFloatingIcon.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
-        client.createRoot(elementFloatingIcon).render(
-          /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            SledgeContext.Provider,
-            {
-              value: {
-                isRenderApp: {
-                  wishlist: true,
-                  productReview: true,
-                  instantSearch: true
+      element.map((item, index) => {
+        if (item && !index) {
+          if (item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`))
+            item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`).remove();
+          let elementContainerWidget = document.createElement("div");
+          elementContainerWidget.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET);
+          item.appendChild(elementContainerWidget);
+          const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
+          client.createRoot(elementContainerWidget).render(
+            /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SledgeContext.Provider,
+              {
+                value: {
+                  isRenderApp: {
+                    wishlist: true,
+                    productReview: true,
+                    instantSearch: true
+                  },
+                  sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
+                  isJsVersion: true
                 },
-                sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
-                isJsVersion: true
-              },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge.Root, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge.FloatingIcon, { position: floating_button_type }) })
-            }
-          ) })
-        );
-      }
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"), position: floating_button_type })
+              }
+            ) })
+          );
+        }
+      });
     } else {
-      let elementFloatingFull = document.createElement("div");
-      elementFloatingFull.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.WISHLIST.ELEMENT_BADGE_FLOATING_FULL);
-      document.body.appendChild(elementFloatingFull);
-      if (elementFloatingFull) {
-        elementFloatingFull.innerHTML = "";
-        const USE_PROXY_URL = elementFloatingFull.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
-        client.createRoot(elementFloatingFull).render(
-          /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            SledgeContext.Provider,
-            {
-              value: {
-                isRenderApp: {
-                  wishlist: true,
-                  productReview: true,
-                  instantSearch: true
+      element.map((item, index) => {
+        if (item && !index) {
+          if (item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`))
+            item.querySelector(`[${SELECTOR_ATTRIBUTE_KEY}="${INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET}"]`).remove();
+          let elementContainerWidget = document.createElement("div");
+          elementContainerWidget.setAttribute(SELECTOR_ATTRIBUTE_KEY, INTERNAL_SELECTOR_VALUE.ELEMENT_CONTAINER_WIDGET);
+          item.appendChild(elementContainerWidget);
+          const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
+          client.createRoot(elementContainerWidget).render(
+            /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SledgeContext.Provider,
+              {
+                value: {
+                  isRenderApp: {
+                    wishlist: true,
+                    productReview: true,
+                    instantSearch: true
+                  },
+                  sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
+                  isJsVersion: true
                 },
-                sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
-                isJsVersion: true
-              },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge.Root, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge.FloatingFull, { position: floating_button_type }) })
-            }
-          ) })
-        );
-      }
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"), position: floating_button_type })
+              }
+            ) })
+          );
+        }
+      });
     }
   } else {
-    let element = Array.from(document.querySelectorAll(SELECTOR.WISHLIST.ELEMENT_BADGE));
-    if (!element || element && !element.length)
-      return;
     element.map((item) => {
       if (item) {
         const USE_PROXY_URL = item.getAttribute(DATASET_ATTRIBUTE_KEY.WISHLIST.USE_PROXY_URL);
@@ -1146,7 +1156,7 @@ const BadgeInitSelector = () => {
                 sledgeAnonymId: localStorage.getItem(LOCAL_STORAGE_KEY.ANONYM_ID) || "",
                 isJsVersion: true
               },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge.Root, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge.HeaderMenu, {}) })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { useProxyUrl: Boolean(USE_PROXY_URL && USE_PROXY_URL === "true") })
             }
           ) })
         );
@@ -1206,11 +1216,11 @@ const Trigger = (props) => {
         });
       return;
     }
-    setIsWishlist(!isWishlist);
     let resAddWishlist = await addWishlist(params);
     const { status, data: response_data } = resAddWishlist || {};
     const { code } = status || {};
     if (code === 200) {
+      setIsWishlist(!isWishlist);
       if (triggerRenderWishlistBadge)
         triggerRenderWishlistBadge(true);
       BadgeInitSelector();
@@ -1495,20 +1505,9 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
   React__default.useEffect(() => {
     setIsRequiredLogin(sledgeAnonymId && is_required_login);
   }, [sledgeAnonymId]);
-  var observer = new MutationObserver(function(mutations) {
-    mutations.forEach(function(mutation) {
-      var nodes = Array.prototype.slice.call(mutation.addedNodes);
-      nodes.forEach(function(node) {
-        if (node.nodeType === 1 && node.querySelector(".sledge-wishlist__widget-box-copy"))
-          handleCopyShareLink();
-      });
-    });
-  });
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-    attributes: false,
-    characterData: false
+  watchElement({
+    selector: ".sledge-wishlist__widget-box-copy",
+    init: handleCopyShareLink
   });
   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: "lighten", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item sledge-wishlist__widget-header-share-trigger", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     Button,
@@ -1689,10 +1688,15 @@ WidgetHeader$1.ShareTrigger = WidgetHeaderShareTrigger;
 WidgetHeader$1.ClearTrigger = WidgetHeaderClearTrigger;
 WidgetHeader$1.Sort = WidgetHeaderSort$1;
 WidgetHeader$1.Limit = WidgetHeaderLimit;
-const getReviewInfo = async (id) => {
-  let convertId = sanitizeDataId(id);
+const getReviewInfo = async (props) => {
+  const { productId = null, query = null } = props || {};
+  let convertId = productId ? sanitizeDataId(productId) : "";
   let sledgeAuthApp = typeof localStorage !== "undefined" ? localStorage.getItem(LOCAL_STORAGE_KEY.AUTH_APP) || "" : "";
-  let url = `${API_URL}/review/info/${convertId}?${PAYLOAD_API_ALIASES.Authorization}=${sledgeAuthApp}`;
+  let queryParams = "?" + new URLSearchParams({
+    [PAYLOAD_API_ALIASES.Authorization]: sledgeAuthApp,
+    ...query
+  }).toString();
+  let url = `${API_URL}/review/info/${convertId}${queryParams}`;
   return await fetchApi({
     url,
     method: "GET",
@@ -1721,7 +1725,22 @@ const getProductsReviewInfo = async (ids, token) => {
 };
 const Rating = (props) => {
   var _a, _b, _c;
-  const { total, average, size = "sm", params, withSkeletonLoading = true, withTotal = true, isScrollToElementWidget = true, data: propsData, sledgeSettings } = props;
+  const {
+    total,
+    average,
+    size = "sm",
+    params,
+    withSkeletonLoading = true,
+    withTotal = true,
+    isScrollToElementWidget = true,
+    data: propsData,
+    sledgeSettings,
+    fillColor = "",
+    outlineColor = "",
+    withOutlineColor = true,
+    customComponentId = "",
+    numberOfIcons = 5
+  } = props;
   const { productId } = params || {};
   const { isRenderApp, triggerRenderMultipleComponent } = React__default.useContext(SledgeContext);
   const { productReview: isRenderAppProductReview } = isRenderApp || {};
@@ -1744,6 +1763,7 @@ const Rating = (props) => {
   const [isFirstTime, setIsFirstTime] = React__default.useState(true);
   const previousState = usePrevious({ productId });
   const { fill_color = "#23BC45", outline_color = "#8D9196" } = ((_c = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _c.rating) || {};
+  const unixTimestamp = getUnixTimestamp();
   const handleProductRatingInfo = async (paramsProductId, isTriggerMultiComponent = false) => {
     var _a2;
     if (paramsProductId !== productId)
@@ -1758,7 +1778,9 @@ const Rating = (props) => {
       run = true;
       setIsFirstTime(false);
     } else {
-      response = await getReviewInfo(paramsProductId);
+      response = await getReviewInfo({
+        productId: paramsProductId
+      });
       if (!response)
         return;
       const { status } = response;
@@ -1835,103 +1857,114 @@ const Rating = (props) => {
     setIsFirstLoading(true);
     handleProductRatingInfo(valueRenderProductReviewRating, true);
   }, [productId, valueRenderProductReviewRating]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__rating", onClick: handleOnClick, "data-rating-size": size, children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "lighten", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !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}`;
-      }
-      fillOther = item <= ratingValue ? "full" : fillOther;
-      let offset;
-      if (fillOther === "fill-0") {
-        offset = "0%";
-      }
-      if (fillOther === "fill-1") {
-        offset = "25%";
-      }
-      if (fillOther === "fill-2") {
-        offset = "35%";
-      }
-      if (fillOther === "fill-3") {
-        offset = "40%";
-      }
-      if (fillOther === "fill-4") {
-        offset = "45%";
-      }
-      if (fillOther === "fill-5") {
-        offset = "50%";
-      }
-      if (fillOther === "fill-6") {
-        offset = "60%";
-      }
-      if (fillOther === "fill-7") {
-        offset = "70%";
-      }
-      if (fillOther === "fill-8") {
-        offset = "80%";
-      }
-      if (fillOther === "fill-9") {
-        offset = "90%";
-      }
-      if (fillOther === "full") {
-        offset = "100%";
-      }
-      let suffixGradientId = `-${fillOther}-${index}-${productId}`;
-      let strokeGradientId = `rating-stroke${suffixGradientId}`;
-      let fillGradientId = `rating-gradient${suffixGradientId}`;
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", ...sizing, viewBox: "0 0 32 32", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: strokeGradientId, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset, stopColor: fill_color }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset, stopColor: fillOther === "full" ? fill_color : outline_color })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: fillGradientId, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset, stopColor: fill_color }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset, stopColor: "transparent" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "path",
-          {
-            fill: `url(#${fillGradientId})`,
-            d: "M9.18817 19.8162L9.25542 19.4179L8.94431 19.1604L3.14591 14.3604L3.14598 14.3603L3.13673 14.3529C2.5294 13.8672 2.784 12.8955 3.54372 12.7636L11.7291 12.3989L12.1807 12.3788L12.3481 11.959L15.8472 3.18648C15.977 2.94796 16.2257 2.79961 16.4979 2.79961C16.769 2.79961 17.0185 2.94848 17.1489 3.18698L20.6478 11.959L20.8152 12.3788L21.2668 12.3989L29.4522 12.7636C30.2119 12.8955 30.4665 13.8672 29.8592 14.3529L29.8591 14.3528L29.85 14.3604L24.0516 19.1604L23.7405 19.4179L23.8077 19.8162L25.3884 29.1774C25.4834 29.8833 24.7613 30.4104 24.1224 30.1159L16.8734 25.5088L16.498 25.2702L16.1226 25.5088L8.87373 30.1141C8.23317 30.409 7.51248 29.8817 7.60746 29.1758L9.18817 19.8162Z",
-            stroke: `url(#${strokeGradientId})`,
-            strokeWidth: "1.4"
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "sledge-product-review__rating",
+      onClick: handleOnClick,
+      ...typeof size === "string" ? {
+        ["data-rating-size"]: size
+      } : {},
+      children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "lighten", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        [1, 2, 3, 4, 5].map((item, index) => {
+          if (!(item <= numberOfIcons))
+            return;
+          let ratingValue = Math.floor(parseFloat(averageReview));
+          let getCommaValue = String(averageReview).includes(",") ? String(averageReview).split(",") : [];
+          let getCommaValueDot = String(averageReview).includes(".") ? String(averageReview).split(".") : [];
+          let isHaveCommaValue = getCommaValue.length || getCommaValueDot.length;
+          let commaValue = isHaveCommaValue ? getCommaValue[1] || getCommaValueDot[1] : 0;
+          let fillOther = "fill-0";
+          if (item > ratingValue && ratingValue + 1 === item) {
+            fillOther = `fill-${commaValue}`;
           }
-        )
-      ] });
-    }),
-    withTotal ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__rating-summary-total", children: [
-      "(",
-      totalReview,
-      ")"
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {})
-  ] }) }) });
+          fillOther = item <= ratingValue ? "full" : fillOther;
+          let offset;
+          if (fillOther === "fill-0") {
+            offset = "0%";
+          }
+          if (fillOther === "fill-1") {
+            offset = "25%";
+          }
+          if (fillOther === "fill-2") {
+            offset = "35%";
+          }
+          if (fillOther === "fill-3") {
+            offset = "40%";
+          }
+          if (fillOther === "fill-4") {
+            offset = "45%";
+          }
+          if (fillOther === "fill-5") {
+            offset = "50%";
+          }
+          if (fillOther === "fill-6") {
+            offset = "60%";
+          }
+          if (fillOther === "fill-7") {
+            offset = "70%";
+          }
+          if (fillOther === "fill-8") {
+            offset = "80%";
+          }
+          if (fillOther === "fill-9") {
+            offset = "90%";
+          }
+          if (fillOther === "full") {
+            offset = "100%";
+          }
+          let suffixGradientId = `-${fillOther}-${index}-${productId ? productId : unixTimestamp}${customComponentId ? `-${customComponentId}` : ""}`;
+          let strokeGradientId = `rating-stroke${suffixGradientId}`;
+          let fillGradientId = `rating-gradient${suffixGradientId}`;
+          return /* @__PURE__ */ createElement("svg", { xmlns: "http://www.w3.org/2000/svg", ...sizing, viewBox: "0 0 32 32", key: suffixGradientId }, /* @__PURE__ */ jsxRuntimeExports.jsxs("defs", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: strokeGradientId, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset, stopColor: fillColor || fill_color }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset, stopColor: fillOther === "full" ? fillColor || fill_color : outlineColor || outline_color })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: fillGradientId, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset, stopColor: fillColor || fill_color }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset, stopColor: "transparent" })
+            ] })
+          ] }), /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
+            {
+              fill: `url(#${fillGradientId})`,
+              d: "M9.18817 19.8162L9.25542 19.4179L8.94431 19.1604L3.14591 14.3604L3.14598 14.3603L3.13673 14.3529C2.5294 13.8672 2.784 12.8955 3.54372 12.7636L11.7291 12.3989L12.1807 12.3788L12.3481 11.959L15.8472 3.18648C15.977 2.94796 16.2257 2.79961 16.4979 2.79961C16.769 2.79961 17.0185 2.94848 17.1489 3.18698L20.6478 11.959L20.8152 12.3788L21.2668 12.3989L29.4522 12.7636C30.2119 12.8955 30.4665 13.8672 29.8592 14.3529L29.8591 14.3528L29.85 14.3604L24.0516 19.1604L23.7405 19.4179L23.8077 19.8162L25.3884 29.1774C25.4834 29.8833 24.7613 30.4104 24.1224 30.1159L16.8734 25.5088L16.498 25.2702L16.1226 25.5088L8.87373 30.1141C8.23317 30.409 7.51248 29.8817 7.60746 29.1758L9.18817 19.8162Z",
+              ...withOutlineColor ? {
+                stroke: `url(#${strokeGradientId})`,
+                strokeWidth: "1.4"
+              } : {}
+            }
+          ));
+        }),
+        withTotal ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__rating-summary-total", children: [
+          "(",
+          totalReview,
+          ")"
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {})
+      ] }) })
+    }
+  );
 };
 const getSizing = (size) => {
   if (size === "xs") {
     return {
-      width: 14.4,
-      height: 14.4
+      width: 14,
+      height: 14
     };
   } else if (size === "sm") {
     return {
-      width: 18,
-      height: 18
+      width: 20,
+      height: 20
     };
   } else {
     return {
-      width: 28.8,
-      height: 28.8
+      width: 32,
+      height: 32
     };
   }
 };
-const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, params, onAfterAddReview }) => {
+const WidgetHeaderAddTrigger = ({ isFirstLoadingHeader, text, dataSettings, params, onAfterAddReview, tabIndex }) => {
   var _a, _b, _c;
   const {
     text_color: display_button_write_review_text_color,
@@ -1960,13 +1993,13 @@ const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, params, on
     ...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: "lighten" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-header-item", children: isFirstLoadingHeader ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "134px", height: "42px", rounded: "lg", color: "lighten" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Button,
     {
       type: "button",
       colorType: "success",
       className: "sledge-product-review__widget-header-add-trigger",
-      onClick: () => typeof window !== "undefined" && window.sledgeProductReviewWidgetFormAdd && window.sledgeProductReviewWidgetFormAdd(params, onAfterAddReview),
+      onClick: () => typeof window !== "undefined" && window.sledgeProductReviewWidgetFormAdd && window.sledgeProductReviewWidgetFormAdd(params, onAfterAddReview, tabIndex),
       style: display_button_write_review_style,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(MessageAddIcon, { width: 16, height: 16, color: "currentColor" }),
@@ -1975,7 +2008,7 @@ const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, params, on
     }
   ) });
 };
-const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, setSelectedSort, setIsRefreshWidgetList }) => {
+const WidgetHeaderSort = ({ isFirstLoadingHeader, 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);
@@ -1985,7 +2018,7 @@ const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, set
     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: "lighten" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !show_sorting_options ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-header-item", children: isFirstLoadingHeader ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "134px", height: "42px", rounded: "lg", color: "lighten" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectField,
     {
       align: "end",
@@ -2015,7 +2048,7 @@ const WidgetHeaderSummary = (props) => {
   const [isLoading, setIsLoading] = React__default.useState(true);
   const [isRefreshRating, setIsRefreshRating] = React__default.useState(summaryData ? false : true);
   const [isOpen, setIsOpen] = React__default.useState(false);
-  const [totalReview, setTotalReview] = React__default.useState((summaryData == null ? void 0 : summaryData.review_count) | 0);
+  const [totalReview, setTotalReview] = React__default.useState((summaryData == null ? void 0 : summaryData.review_count) || 0);
   const [ratingList, setRatingList] = React__default.useState(
     (summaryData == null ? void 0 : summaryData.rating) || {
       5: 0,
@@ -2041,7 +2074,9 @@ const WidgetHeaderSummary = (props) => {
       run = true;
       setIsFirstTime(false);
     } else {
-      response = await getReviewInfo(productId);
+      response = await getReviewInfo({
+        productId
+      });
       if (!response)
         return;
       const { status } = response;
@@ -2451,7 +2486,7 @@ const ProductCard = (props) => {
                       productSku: sku,
                       productVariantName: variant_title,
                       productLink: url,
-                      productImage: (image == null ? void 0 : image.src) || "https://sledgeassets.nyc3.cdn.digitaloceanspaces.com/images/blank-image.png",
+                      productImage: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
                       productCurrency: currency,
                       productPrice: price
                     },
@@ -2461,15 +2496,7 @@ const ProductCard = (props) => {
                     wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "img",
-                  {
-                    src: (image == null ? void 0 : image.src) || "https://sledgeassets.nyc3.cdn.digitaloceanspaces.com/images/blank-image.png",
-                    alt: "sledge-card-image",
-                    loading: "lazy",
-                    className: "sledge__product-grid-card-image-featured-image"
-                  }
-                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`, alt: "sledge-card-image", loading: "lazy", className: "sledge__product-grid-card-image-featured-image" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: images == null ? void 0 : images.map((image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "img",
                   {
@@ -2603,7 +2630,7 @@ ${selectedOption === item2 ? "sledge__product-variant-size-swatch-active" : ""}
   return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: component }, id);
 };
 const ProductGrid = (props) => {
-  const { type, className = "", data, setting, sourceApp = null, onAfterAddToCart, onAfterRenderProduct } = props;
+  const { type, className = "", data, setting, sourceApp = null, useSlider = false, onAfterAddToCart, onAfterRenderProduct } = props;
   const { redirect_add_to_cart = true } = setting || {};
   const [clickedAddToCartId, setClickedAddToCartId] = React__default.useState(null);
   const handleAddToCart = async (data2) => {
@@ -2653,10 +2680,11 @@ const ProductGrid = (props) => {
       }, 1e3);
     }
   };
+  const Container = useSlider ? Carousel : "div";
   React__default.useEffect(() => {
     onAfterRenderProduct && onAfterRenderProduct("success");
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { className: `sledge__product-grid ${className}`, "data-grid-type": type, children: data == null ? void 0 : data.map((item, index) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ProductCard, { item, handleAddToCart, clickedAddToCartId, ...props }, `sledge-product-card_${index}`);
   }) });
 };
@@ -2674,7 +2702,7 @@ const CollectionGrid = ({ className = "", data, cards: CardsComponent, isCompone
       return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) }, index);
     } else {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-image-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || "https://sledgeassets.nyc3.cdn.digitaloceanspaces.com/images/blank-image.png", alt: "sledge-card-image", loading: "lazy" }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-image-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-content", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-title", children: title }),
           body_html ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-description", dangerouslySetInnerHTML: { __html: body_html } }) : null
@@ -2695,7 +2723,7 @@ const PageGrid = ({ className = "", data, cards: CardsComponent, isComponentJsVe
       return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: CardsComponent({ ...CardsProps }) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CardsComponent, { ...CardsProps }) }, index);
     } else {
       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-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || "https://sledgeassets.nyc3.cdn.digitaloceanspaces.com/images/blank-image.png", alt: "sledge-card-image", loading: "lazy" }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-image-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card-content", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-title", children: title }),
           body_html ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-description", dangerouslySetInnerHTML: { __html: body_html } }) : null
@@ -2717,7 +2745,7 @@ const BlogGrid = ({ className = "", data, cards: CardsComponent, isComponentJsVe
     } else {
       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 == null ? void 0 : image.src) || "https://sledgeassets.nyc3.cdn.digitaloceanspaces.com/images/blank-image.png", alt: "sledge-card-image", loading: "lazy" }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card-desc", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-title", children: title }) }),
             created_at ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-badge-vendor", children: convertDate(created_at) }) : null
@@ -2744,7 +2772,7 @@ const ArticleGrid = ({ className = "", data, cards: CardsComponent, isComponentJ
     } else {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-card", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-content", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || "https://sledgeassets.nyc3.cdn.digitaloceanspaces.com/images/blank-image.png", alt: "sledge-card-image", loading: "lazy" }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-card-desc", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-card-title", children: title }) }),
             created_at ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-badge-vendor", children: convertDate(created_at) }) : null,
@@ -2874,13 +2902,21 @@ 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: "lighten", rounded: "md" }) }, i)
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-review-card", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SkeletonItem,
+        {
+          width: "100%",
+          height: type === "list" || (type === "grid" || type === "image_grid") && !(gridItemHeights == null ? void 0 : gridItemHeights.length) ? "111px" : gridItemHeights[i],
+          color: "lighten",
+          rounded: "md"
+        }
+      ) }, i)
     );
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     MasonryResponsive,
     {
-      columnsCountBreakPoints: type === "grid" ? { 350: 1, 750: 3, 1024: 4 } : { 350: 1 },
+      columnsCountBreakPoints: type === "list" ? { 350: 1 } : { 350: 1, 750: 3, 1024: 4 },
       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 })
     }
@@ -3013,6 +3049,95 @@ const LoadingDots = () => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__loading-icon-dot" })
   ] });
 };
+const Carousel$1 = "";
+const Carousel = (props) => {
+  const { children, className = "", "data-grid-type": dataGridType } = props;
+  const [active, setActive] = React__default.useState(true);
+  const {
+    options = {
+      active,
+      slidesToScroll: "auto",
+      align: "start",
+      dragFree: true,
+      duration: 35
+    }
+  } = props;
+  const [carouselRef, carouselApi] = useEmblaCarousel(options);
+  const [prevBtnDisabled, setPrevBtnDisabled] = React__default.useState(true);
+  const [nextBtnDisabled, setNextBtnDisabled] = React__default.useState(true);
+  const scrollPrev = React__default.useCallback(() => carouselApi && carouselApi.scrollPrev(), [carouselApi]);
+  const scrollNext = React__default.useCallback(() => carouselApi && carouselApi.scrollNext(), [carouselApi]);
+  const onSelect = React__default.useCallback((carouselApi2) => {
+    setPrevBtnDisabled(!carouselApi2.canScrollPrev());
+    setNextBtnDisabled(!carouselApi2.canScrollNext());
+  }, []);
+  React__default.useEffect(() => {
+    if (!carouselApi)
+      return;
+    if (prevBtnDisabled && nextBtnDisabled)
+      setActive(false);
+    else
+      setActive(true);
+  }, [carouselApi, prevBtnDisabled, nextBtnDisabled]);
+  React__default.useEffect(() => {
+    if (!carouselApi)
+      return;
+    onSelect(carouselApi);
+    carouselApi.on("reInit", onSelect);
+    carouselApi.on("select", onSelect);
+  }, [carouselApi, onSelect]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__carousel ${className}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Navigation,
+      {
+        state: {
+          prevBtnDisabled,
+          nextBtnDisabled
+        },
+        position: "left",
+        disabled: prevBtnDisabled,
+        onClick: scrollPrev,
+        className: "sledge__carousel-button-prev"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__carousel-viewport", ref: carouselRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__carousel-container sledge__product-grid", "data-grid-type": dataGridType, children }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Navigation,
+      {
+        state: {
+          prevBtnDisabled,
+          nextBtnDisabled
+        },
+        position: "right",
+        disabled: nextBtnDisabled,
+        onClick: scrollNext,
+        className: "sledge__carousel-button-next"
+      }
+    )
+  ] });
+};
+const Navigation = (props) => {
+  const { children, state, className, position, ...restProps } = props;
+  const { prevBtnDisabled, nextBtnDisabled } = state;
+  if (prevBtnDisabled && nextBtnDisabled)
+    return null;
+  const LeftIcon = /* @__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",
+    {
+      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: "#767676"
+    }
+  ) });
+  const RightIcon = /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 17, height: 17, viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "path",
+    {
+      d: "M5.60738 13.1299C5.42987 12.9524 5.41374 12.6746 5.55897 12.4789L5.60738 12.4228L9.92027 8.1097L5.60738 3.79659C5.42987 3.61908 5.41374 3.3413 5.55897 3.14556L5.60738 3.08948C5.7849 2.91197 6.06267 2.89583 6.25841 3.04107L6.31449 3.08948L10.9812 7.75615C11.1587 7.93366 11.1748 8.21143 11.0296 8.40718L10.9812 8.46325L6.31449 13.1299C6.11923 13.3252 5.80265 13.3252 5.60738 13.1299Z",
+      fill: "#767676"
+    }
+  ) });
+  const Icon = () => position === "left" ? LeftIcon : RightIcon;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: `sledge__carousel-button ${className}`, type: "button", ...restProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, {}) });
+};
 const SearchIconWidget = (props) => {
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
@@ -3515,6 +3640,7 @@ const SearchResultWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const {
     layoutType = "default",
+    width = DEFAULT_MAX_WIDTH_COMPONENT,
     query,
     params,
     children,
@@ -3611,7 +3737,7 @@ const SearchResultWidget = (props) => {
         let isHasProductFacets = isProductIndex && getFacets.length;
         let additionalFilter = [];
         if (hidden_tags == null ? void 0 : hidden_tags.length)
-          additionalFilter.push(`tags NOT IN [${hidden_tags}]`);
+          additionalFilter.push(`tags NOT IN ${JSON.stringify(hidden_tags)}`);
         if (!show_out_of_stock)
           additionalFilter.push("variants.inventory_quantity > 0");
         if (collectionId)
@@ -3958,7 +4084,10 @@ const SearchResultWidget = (props) => {
       /* @__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: "lighten", rounded: "lg" }) })
     ] })
   ] });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-container", ref: searchResultContainerRef, children: [
+  const containerStyle = {
+    maxWidth: width
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-container", ref: searchResultContainerRef, style: containerStyle, 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, type, total } = item;
       let isActive = clickedTabIndexId === index;
@@ -4336,15 +4465,15 @@ const ResultProduct = (props) => {
         let isCustom = ["variants.inventory_quantity"].includes(value);
         let isRange = ["variants.price"].includes(value);
         let isArray = ["tags"].includes(value);
-        let items = Array.isArray(facet[1]) && ((_a3 = facet[1]) == null ? void 0 : _a3.length) > 1 ? isRange ? `${value} >= ${facet[1][0]} AND ${value} <= ${facet[1][1]}` : isArray ? `${value} IN [${facet[1]}]` : (_b3 = facet[1]) == null ? void 0 : _b3.map((item) => {
+        let items = Array.isArray(facet[1]) && ((_a3 = facet[1]) == null ? void 0 : _a3.length) > 1 ? isRange ? `${value} >= ${facet[1][0]} AND ${value} <= ${facet[1][1]}` : isArray ? `${value} IN ${JSON.stringify(facet[1])}` : (_b3 = facet[1]) == null ? void 0 : _b3.map((item) => {
           return isCustom ? `${value} ${item}` : `${value} = '${item}'`;
-        }).join(" OR ") : isCustom ? `${value} ${facet[1]}` : isArray ? `${value} IN [${facet[1]}]` : `${value} = '${facet[1]}'`;
+        }).join(" OR ") : isCustom ? `${value} ${facet[1]}` : isArray ? `${value} IN ${JSON.stringify(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}]`);
+      filters.push(`tags NOT IN ${JSON.stringify(hiddenTags)}`);
     if (collectionId)
       filters.push(`collections.id = '${collectionId}'`);
     let body = {