@sledge-app/react-instant-search 0.0.97 → 0.0.99

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

@@ -59,6 +59,7 @@ const LOCAL_STORAGE_KEY = {
   ANONYM_ID: "sledge-anonym-id",
   AUTH_APP: "sledge-auth-app",
   INSTANT_SEARCH_AUTH_APP: "sledge-instant-search-auth-app",
+  GENERAL_SETTING: "sledge-general-setting",
   WISHLIST_SETTING: "sledge-wishlist-setting",
   PRODUCT_REVIEW_SETTING: "sledge-product-review-setting",
   INSTANT_SEARCH_SETTING: "sledge-instant-search-setting",
@@ -1199,7 +1200,7 @@ const WidgetHeaderClearTrigger = ({ buttonText, shareId, dataSettings, isFirstLo
         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: buttonText ? buttonText : button_clear_all || "Clear Wishlist" }) }) }) }) });
+  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: "lighten", 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: buttonText ? buttonText : button_clear_all || "Clear Wishlist" }) }) }) }) });
 };
 const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger, shareLink, shareId, dataSettings, isFirstLoading }) => {
   var _a, _b, _c, _d, _e, _f;
@@ -1336,7 +1337,7 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
   React__default.useEffect(() => {
     setIsRequiredLogin(sledgeAnonymId && is_required_login);
   }, [sledgeAnonymId]);
-  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(
+  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,
     {
       type: "button",
@@ -1471,7 +1472,7 @@ const WidgetHeader$1 = ({ isFirstLoading, ...props }) => {
         justifyContent: "space-between"
       },
       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: "lighten", rounded: "md" }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
@@ -1480,9 +1481,9 @@ const WidgetHeader$1 = ({ isFirstLoading, ...props }) => {
               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.jsx(SkeletonLoading.Item, { width: "440px", height: "46px", color: "lighten", rounded: "md" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "132px", height: "46px", color: "lighten", rounded: "md" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "136px", height: "46px", color: "lighten", rounded: "md" })
             ]
           }
         ),
@@ -1494,8 +1495,8 @@ const WidgetHeader$1 = ({ isFirstLoading, ...props }) => {
               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" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "190px", height: "46px", color: "lighten", rounded: "md" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "190px", height: "46px", color: "lighten", rounded: "md" })
             ]
           }
         )
@@ -1537,6 +1538,22 @@ const getReviewInfo = async (id) => {
     return;
   });
 };
+const getProductsReviewInfo = async (ids, token) => {
+  let convertIds = ids.map((v) => sanitizeDataId(v));
+  let sledgeAuthApp = token || 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/ids/${convertIds.join(",")}`, requestOptions).then((response) => response.json()).then((result) => {
+    return result;
+  }).catch(() => {
+    return;
+  });
+};
 const Rating = (props) => {
   var _a, _b;
   const { total, average, size = "md", params, withSkeletonLoading = true, withTotal = true, isScrollToElementWidget = true, data: propsData, sledgeSettings } = props;
@@ -1645,7 +1662,7 @@ const Rating = (props) => {
     setIsFirstLoading(true);
     handleProductRatingInfo((_d = (_c = triggerRenderMultipleComponent == null ? void 0 : triggerRenderMultipleComponent.productReview) == null ? void 0 : _c.rating) == null ? void 0 : _d.value, true);
   }, [productId, triggerRenderMultipleComponent]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__rating", onClick: handleOnClick, children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "grey-100", rounded: "md" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__rating", onClick: handleOnClick, children: isFirstLoading && withSkeletonLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "230px", height: "28px", color: "lighten", 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",
@@ -1737,7 +1754,7 @@ 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: "grey-100" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  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(
     Button,
     {
       type: "button",
@@ -1769,7 +1786,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: "grey-100" }) : /* @__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: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "134px", height: "42px", rounded: "lg", color: "lighten" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectField,
     {
       align: "end",
@@ -1894,7 +1911,7 @@ const WidgetHeaderSummary = (props) => {
       setIsFirstLoading(true);
     handleProductReviewInfo();
   }, [isOpen, productId]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary", children: isFirstLoading && !summaryData ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "630px", height: "42px", color: "grey-100", rounded: "md", animationDuration: "5s" }) : isLoading && !summaryData ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary", children: isFirstLoading && !summaryData ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "630px", height: "42px", color: "lighten", rounded: "md" }) : isLoading && !summaryData ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
     Popover,
     {
       trigger: /* @__PURE__ */ jsxRuntimeExports.jsxs(motion.div, { initial: false, animate: isOpen ? "open" : "closed", className: "sledge-product-review__widget-summary-trigger", children: [
@@ -1928,22 +1945,21 @@ const WidgetHeaderSummary = (props) => {
       ] }),
       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: "108px", height: "22px", color: "lighten", rounded: "md" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             SkeletonLoading.Item,
             {
               width: "128px",
               height: "22px",
-              color: "grey-100",
+              color: "lighten",
               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" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "38px", height: "22px", color: "lighten", rounded: "md" })
         ] }, index);
       }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-product-review__widget-summary-dist-progress", children: [5, 4, 3, 2, 1].map((item, index) => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-product-review__widget-summary-dist-progress-item", children: [
@@ -2174,6 +2190,7 @@ const ProductGrid = ({
     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, _b, _c;
     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] : {};
@@ -2190,7 +2207,13 @@ const ProductGrid = ({
               is_out_of_stock: Object.hasOwn(variants[index2], "inventory_quantity") ? !inventory_quantity : false
             };
           })
-        }
+        },
+        ...dataReviews && Object.keys(dataReviews).length ? {
+          review: {
+            total: ((_a = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _a.review_count) ? dataReviews == null ? void 0 : dataReviews[id].review_count : 0,
+            average: ((_c = (_b = dataReviews == null ? void 0 : dataReviews[id]) == null ? void 0 : _b.rating) == null ? void 0 : _c.average) ? dataReviews == null ? void 0 : dataReviews[id].rating.average : 0
+          }
+        } : {}
       },
       showPopupComponent,
       setShowPopupComponent
@@ -2417,17 +2440,33 @@ const ScrollArea = ({ children, isLoading = false, className = "", withCorner =
   ] });
 };
 const SkeletonLoading$1 = "";
-const SkeletonItem = ({ width, height, rounded, color, animationDuration = "8s", disableAnimation = false, style = {}, className = "", ...otherProps }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+const SkeletonItem = ({ width, height, rounded, color, style = {}, className = "", ...otherProps }) => {
+  const [isLoading, setIsLoading] = React__default.useState(true);
+  const [dataSettings, setDataSettings] = React__default.useState({});
+  const { enable, colors } = (dataSettings == null ? void 0 : dataSettings.skeleton) || {};
+  const { main_color } = colors || {};
+  const handleSettings = () => {
+    let response;
+    response = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.GENERAL_SETTING) || "");
+    if (!response)
+      return;
+    setIsLoading(false);
+    setDataSettings(response);
+  };
+  React__default.useEffect(() => {
+    handleSettings();
+  }, []);
+  return !isLoading && enable ? /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: `sledge__skeleton-item ${className} ${!disableAnimation ? "sledge__skeleton-item-animation" : ""}`,
+      className: `sledge__skeleton-item sledge__skeleton-item-animation ${className}`,
       style: {
         ...{
           width,
-          height,
-          WebkitAnimationDuration: animationDuration,
-          animationDuration
+          height
+        },
+        ...main_color && {
+          background: main_color
         },
         ...style
       },
@@ -2435,7 +2474,7 @@ const SkeletonItem = ({ width, height, rounded, color, animationDuration = "8s",
       "data-skeleton-color": color,
       ...otherProps
     }
-  );
+  ) : null;
 };
 const SkeletonProductGrid = ({ count, type }) => {
   let components = [];
@@ -2444,22 +2483,21 @@ const SkeletonProductGrid = ({ count, type }) => {
       /* @__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.jsx("div", { className: "sledge-wishlist__trigger-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "40px", height: "40px", color: "darken", rounded: "sm" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "100%", color: "lighten", 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(SkeletonItem, { width: "134px", height: "28px", color: "lighten", rounded: "md" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "80px", height: "28px", color: "lighten", rounded: "md" })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               SkeletonItem,
               {
                 width: "190px",
                 height: "46px",
-                color: "grey-100",
+                color: "lighten",
                 rounded: "md",
-                animationDuration: "13s",
                 style: {
                   marginBottom: "16px"
                 }
@@ -2467,7 +2505,7 @@ const SkeletonProductGrid = ({ count, type }) => {
             ) })
           ] })
         ] }),
-        /* @__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" }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "117px", height: "40px", color: "lighten", rounded: "md" }) })
       ] }, i)
     );
   }
@@ -2477,16 +2515,7 @@ 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)
+      /* @__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)
     );
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2503,16 +2532,16 @@ const SkeletonCollectionGrid = ({ count }) => {
   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.jsx("div", { className: "sledge__collection-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "246px", height: "246px", color: "darken", 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-title", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "70px", color: "darken", 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",
+                color: "darken",
                 rounded: "md",
                 style: {
                   maxWidth: "357px"
@@ -2525,9 +2554,8 @@ const SkeletonCollectionGrid = ({ count }) => {
             {
               width: "100%",
               height: "40px",
-              color: "grey-300",
+              color: "darken",
               rounded: "md",
-              animationDuration: "20s",
               style: {
                 maxWidth: "117px"
               }
@@ -2549,9 +2577,8 @@ const SkeletonPageGrid = ({ count }) => {
           {
             width: "100%",
             height: "100%",
-            color: "grey-300",
+            color: "darken",
             rounded: "md",
-            animationDuration: "13s",
             style: {
               borderTopRightRadius: 0,
               borderBottomRightRadius: 0
@@ -2559,15 +2586,14 @@ const SkeletonPageGrid = ({ count }) => {
           }
         ) }),
         /* @__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-title", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "40px", color: "darken", rounded: "md" }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-description", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             SkeletonItem,
             {
               width: "100%",
               height: "40px",
-              color: "grey-300",
+              color: "darken",
               rounded: "md",
-              animationDuration: "17s",
               style: {
                 maxWidth: "115px"
               }
@@ -2584,14 +2610,14 @@ const SkeletonBlogGrid = ({ count }) => {
   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.jsx("div", { className: "sledge__blog-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "100%", color: "lighten", rounded: "md" }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card-desc", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             SkeletonItem,
             {
               width: "100%",
               height: "28px",
-              color: "grey-100",
+              color: "lighten",
               rounded: "md",
               style: {
                 maxWidth: "242px",
@@ -2605,9 +2631,8 @@ const SkeletonBlogGrid = ({ count }) => {
             {
               width: "100%",
               height: "28px",
-              color: "grey-100",
+              color: "lighten",
               rounded: "md",
-              animationDuration: "23s",
               style: {
                 maxWidth: "80px",
                 marginBottom: "27px"
@@ -2619,9 +2644,8 @@ const SkeletonBlogGrid = ({ count }) => {
             {
               width: "100%",
               height: "80px",
-              color: "grey-100",
+              color: "lighten",
               rounded: "md",
-              animationDuration: "13s",
               style: {
                 maxWidth: "190px",
                 marginBottom: "27px"
@@ -2633,9 +2657,8 @@ const SkeletonBlogGrid = ({ count }) => {
             {
               width: "100%",
               height: "40px",
-              color: "grey-100",
+              color: "lighten",
               rounded: "md",
-              animationDuration: "20s",
               style: {
                 maxWidth: "117px"
               }
@@ -2787,6 +2810,7 @@ const SearchIconWidgetPopup = () => {
   const [keyword, setKeyword] = React__default.useState("");
   const [searchResultProduct, setSearchResultProduct] = React__default.useState([]);
   const [searchResultOther, setSearchResultOther] = React__default.useState([]);
+  const [dataReviews, setDataReviews] = React__default.useState({});
   const [displaySettings, setDisplaySettings] = React__default.useState({});
   const [suggestionSettings, setSuggestionSettings] = React__default.useState({});
   const [suggestionIndex, setSuggestionIndex] = React__default.useState("");
@@ -2807,8 +2831,8 @@ const SearchIconWidgetPopup = () => {
   });
   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;
+  const handleMultiSearch = async (data, onSearch = false, withFetchReviewInfo = false) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
     setIsLoading(true);
     const { tabs, suffix_index_product, hidden_tags, display, show_out_of_stock } = data;
     const suggestion = ((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion) || {};
@@ -2857,6 +2881,14 @@ const SearchIconWidgetPopup = () => {
       !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)
     );
     let dataSearchResultProduct = isPriorityZeroCharacter ? (_k2 = (_j2 = suggestion[valueSuggestionIndex]) == null ? void 0 : _j2.products) == null ? void 0 : _k2.list : getValueSearchResultProduct;
+    if (withFetchReviewInfo) {
+      let searchResultProductIds = dataSearchResultProduct.map(({ id }) => id);
+      let valueDataReviews = await getProductsReviewInfo(searchResultProductIds);
+      if (((_l2 = valueDataReviews == null ? void 0 : valueDataReviews.status) == null ? void 0 : _l2.code) === 200)
+        setDataReviews(valueDataReviews == null ? void 0 : valueDataReviews.data);
+    } else {
+      setDataReviews({});
+    }
     setSearchResultProduct(dataSearchResultProduct);
     setSearchResultOther(valueSearchResultOther);
     setSuggestionIndex(valueSuggestionIndex);
@@ -2871,7 +2903,7 @@ const SearchIconWidgetPopup = () => {
     const { display } = response;
     setDisplaySettings(display);
     setSuggestionSettings((_a2 = display == null ? void 0 : display.search) == null ? void 0 : _a2.suggestion);
-    await handleMultiSearch(response);
+    await handleMultiSearch(response, false, true);
   };
   React__default.useEffect(() => {
     if (!isRenderAppInstantSearch)
@@ -2949,7 +2981,7 @@ const SearchIconWidgetPopup = () => {
             {
               width: "100%",
               height: "42px",
-              color: "grey-100",
+              color: "lighten",
               rounded: "md",
               ...Boolean(index) && {
                 style: { marginTop: "12px" }
@@ -2971,9 +3003,8 @@ const SearchIconWidgetPopup = () => {
                 {
                   width: "100%",
                   height: "28px",
-                  color: "grey-100",
+                  color: "lighten",
                   rounded: "md",
-                  animationDuration: "13s",
                   style: {
                     maxWidth: "140px"
                   }
@@ -3037,7 +3068,8 @@ const SearchIconWidgetPopup = () => {
               onAfterRemoveWishlist: handleFunctions.onAfterRemoveWishlist,
               onAfterRenderProduct: handleFunctions.onAfterRenderProduct,
               showPopupComponent: showInfo,
-              setShowPopupComponent: setShowInfo
+              setShowPopupComponent: setShowInfo,
+              dataReviews
             }
           ) }) : 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: [
@@ -3276,8 +3308,8 @@ const SearchResultWidget = (props) => {
       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 = ((_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) === "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 tabSkeleton = layoutType === "default" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-tab-list sledge-instant-search__result-tab-list-skeleton", children: [1, 2, 3, 4, 5].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "122px", height: "28px", rounded: "md", color: "lighten" }, index)) }) : null;
+  const filterHorizontalSkeleton = ((_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) === "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: "lighten" }, index)) }) : null;
   const filterVerticalSkeleton = ((_l = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _l.enable_on_search) && ((_m = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _m.layout) === "vertical" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
@@ -3291,8 +3323,8 @@ const SearchResultWidget = (props) => {
           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: "117px", height: "28px", color: "lighten", rounded: "md" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "80px", height: "28px", color: "lighten", rounded: "md" })
         ]
       }
     ),
@@ -3301,7 +3333,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "270px",
@@ -3314,7 +3346,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "163px",
@@ -3328,7 +3360,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "163px",
@@ -3341,7 +3373,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "270px",
@@ -3354,7 +3386,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "163px",
@@ -3367,7 +3399,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "163px",
@@ -3380,7 +3412,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "270px",
@@ -3393,7 +3425,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "270px",
@@ -3406,7 +3438,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "270px",
@@ -3419,7 +3451,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "163px",
@@ -3432,7 +3464,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "163px",
@@ -3445,7 +3477,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "270px",
@@ -3458,7 +3490,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "163px",
@@ -3472,7 +3504,7 @@ const SearchResultWidget = (props) => {
       {
         width: "100%",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
         style: {
           maxWidth: "270px",
@@ -3489,7 +3521,7 @@ const SearchResultWidget = (props) => {
           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))
+        children: [1, 2, 3, 4, 5, 6, 7, 8, 9].map((index) => /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "34px", height: "34px", color: "lighten", rounded: "full" }, index))
       }
     )
   ] }) : null;
@@ -3499,9 +3531,8 @@ const SearchResultWidget = (props) => {
       {
         width: "117px",
         height: "28px",
-        color: "grey-100",
+        color: "lighten",
         rounded: "md",
-        animationDuration: "13s",
         style: {
           marginBottom: "21px"
         }
@@ -3510,13 +3541,13 @@ const SearchResultWidget = (props) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 12, type: "large" })
   ] });
   const searchAndSelectOptionSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-keyword", children: [
-    ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.show_total_products) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.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,
+    ((_p = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _p.show_total_products) && ((_q = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _q.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: "lighten", rounded: "md" }) }) : 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",
+        color: "lighten",
         rounded: "lg",
         style: {
           maxWidth: "630px"
@@ -3524,8 +3555,8 @@ const SearchResultWidget = (props) => {
       }
     ) }),
     /* @__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" }) })
+      /* @__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" }) }),
+      /* @__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: [
@@ -4338,7 +4369,7 @@ const ResultCategory = (props) => {
       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 summaryTextSkeleton = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.Item, { width: "117px", height: "28px", color: "lighten", rounded: "md" }) });
   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,
@@ -4526,7 +4557,7 @@ const SearchWidget = (props) => {
           {
             width: "100%",
             height: "42px",
-            color: "grey-100",
+            color: "lighten",
             rounded: "md",
             ...Boolean(index) && {
               style: { marginTop: "12px" }
@@ -4548,9 +4579,8 @@ const SearchWidget = (props) => {
               {
                 width: "100%",
                 height: "28px",
-                color: "grey-100",
+                color: "lighten",
                 rounded: "md",
-                animationDuration: "13s",
                 style: {
                   maxWidth: "140px"
                 }