@sledge-app/react-instant-search 0.0.107 → 0.0.109

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/SearchResultWidget/SearchResultWidget.d.ts +4 -0
  2. package/dist/components/SearchResultWidget/SearchResultWidget.d.ts.map +1 -1
  3. package/dist/components/SearchResultWidget/SearchResultWidgetInitSelector.d.ts.map +1 -1
  4. package/dist/sledge-react-instant-search.cjs +1 -1
  5. package/dist/sledge-react-instant-search.cjs.map +1 -1
  6. package/dist/sledge-react-instant-search.js +343 -274
  7. package/dist/sledge-react-instant-search.js.map +1 -1
  8. package/dist/style.css +1 -1
  9. package/dist/{vendor-4555f002.cjs → vendor-9c93dcff.cjs} +2 -2
  10. package/dist/{vendor-4555f002.cjs.map → vendor-9c93dcff.cjs.map} +1 -1
  11. package/dist/{vendor-1f00eb2b.js → vendor-efe38901.js} +9 -51
  12. package/dist/{vendor-1f00eb2b.js.map → vendor-efe38901.js.map} +1 -1
  13. package/package.json +1 -1
package/dist/sledge-react-instant-search.js CHANGED
@@ -1,4 +1,4 @@
1
- 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 client, E as motion, 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 $57acba87d6e25586$export$ac61190d9fc311a9, Q as MasonryResponsive, R as Masonry, S as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, T as $5d3850c4d0b4e6c7$export$602eac185826482c, U as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, V as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 } from "./vendor-1f00eb2b.js";
1
+ 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";
2
2
  import React__default, { createElement } from "react";
3
3
  import { SledgeContext } from "@sledge-app/core";
4
4
  import "react-dom";
@@ -49,10 +49,18 @@ const DATASET_ATTRIBUTE_KEY = {
49
49
  RATING_AVERAGE: "data-rating-average"
50
50
  },
51
51
  INSTANT_SEARCH: {
52
+ ON_AFTER_RENDER_COLLECTION: "data-on-after-render-collection",
53
+ ON_AFTER_RENDER_PAGE: "data-on-after-render-page",
54
+ ON_AFTER_RENDER_BLOG: "data-on-after-render-blog",
55
+ ON_AFTER_RENDER_ARTICLE: "data-on-after-render-article",
52
56
  QUERY_KEYWORD: "data-query-keyword",
53
57
  RENDER_SUGGESTION_KEYWORD_LIST: "data-render-suggestion-keyword-list",
54
58
  RENDER_OTHER_INDEX_LIST: "data-render-other-index-list",
55
- RENDER_SEARCH_VIEW_MORE_RESULT: "data-render-search-view-more-result"
59
+ RENDER_SEARCH_VIEW_MORE_RESULT: "data-render-search-view-more-result",
60
+ RENDER_COLLECTION_CARD: "data-render-collection-card",
61
+ RENDER_PAGE_CARD: "data-render-page-card",
62
+ RENDER_BLOG_CARD: "data-render-blog-card",
63
+ RENDER_ARTICLE_CARD: "data-render-article-card"
56
64
  }
57
65
  };
58
66
  const LOCAL_STORAGE_KEY = {
@@ -189,6 +197,12 @@ const fetchApi = async (url, method, authorization, payload = {}, headers = {},
189
197
  };
190
198
  return await fetch(`${url}`, requestOptions).then((response) => response.json()).then((result) => result);
191
199
  };
200
+ const convertDate = (date, options = {
201
+ timeZone: "Asia/Jakarta",
202
+ year: "numeric",
203
+ month: "numeric",
204
+ day: "numeric"
205
+ }) => new Date(date).toLocaleString("en-US", options);
192
206
  const root = "";
193
207
  const Loading = "";
194
208
  const ConfirmationPopup = "";
@@ -336,7 +350,7 @@ const Slider = (props) => {
336
350
  Tooltip,
337
351
  {
338
352
  content: value[0],
339
- customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#23BC45"/></svg>`,
353
+ customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
340
354
  wrapTrigger: false,
341
355
  children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
342
356
  }
@@ -345,7 +359,7 @@ const Slider = (props) => {
345
359
  Tooltip,
346
360
  {
347
361
  content: value[1],
348
- customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#23BC45"/></svg>`,
362
+ customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
349
363
  wrapTrigger: false,
350
364
  children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
351
365
  }
@@ -369,7 +383,7 @@ const Pagination = ({ currentPage, totalPage, totalResult, onChange }) => {
369
383
  } : {
370
384
  onClick: () => onChange(currentPage - 1)
371
385
  },
372
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowLeftIcon, { width: 17, height: 17, color: "black" })
386
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowLeftIcon, { width: 16, height: 16, color: "black" })
373
387
  }
374
388
  ),
375
389
  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
@@ -391,7 +405,7 @@ const Pagination = ({ currentPage, totalPage, totalResult, onChange }) => {
391
405
  } : {
392
406
  onClick: () => onChange(currentPage + 1)
393
407
  },
394
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowRightIcon, { width: 17, height: 17, color: "black" })
408
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowRightIcon, { width: 16, height: 16, color: "black" })
395
409
  }
396
410
  )
397
411
  ] });
@@ -537,12 +551,20 @@ const ChevronArrowRightIcon = ({ width, height, color }) => {
537
551
  ) }) });
538
552
  };
539
553
  const BagIcon = ({ width, height, color }) => {
540
- return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__bag", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
554
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__bag", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 18 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "vuesax/bold/bag-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "bag-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
541
555
  "path",
542
556
  {
543
- fillRule: "evenodd",
544
- clipRule: "evenodd",
545
- d: "M19.6334 3.33398C23.9899 3.33398 27.5887 6.65342 28.0324 10.8989L28.1562 10.9003C30.5729 10.9003 33.5112 12.5053 34.5029 17.007L35.8179 27.1853C36.2896 30.4703 35.6996 33.1053 34.0612 34.9953C32.4312 36.8753 29.8512 37.8703 26.5996 37.8703H12.6862C9.11458 37.8703 6.62625 36.9953 5.07792 35.197C3.52292 33.3936 3.00292 30.6886 3.53292 27.1586L4.82625 17.1153C5.67625 12.5103 8.78458 10.9003 11.1912 10.9003C11.399 8.98444 12.2629 7.16182 13.6334 5.79565C15.2084 4.23065 17.3801 3.33398 19.5984 3.33398H19.6334ZM28.1562 13.4003H11.1912C10.4562 13.4003 7.99958 13.697 7.29458 17.5036L6.00792 27.5036C5.58958 30.3086 5.91292 32.3386 6.97125 33.567C8.01625 34.7803 9.88625 35.3703 12.6862 35.3703H26.5996C28.3462 35.3703 30.7312 35.022 32.1712 33.3586C33.3146 32.0403 33.7079 30.077 33.3412 27.522L32.0429 17.4353C31.4896 14.9503 30.0296 13.4003 28.1562 13.4003ZM24.4942 18.0405C25.1842 18.0405 25.7826 18.6005 25.7826 19.2905C25.7826 19.9805 25.2609 20.5405 24.5709 20.5405H24.4942C23.8042 20.5405 23.2442 19.9805 23.2442 19.2905C23.2442 18.6005 23.8042 18.0405 24.4942 18.0405ZM14.7774 18.0405C15.4674 18.0405 16.0657 18.6005 16.0657 19.2905C16.0657 19.9805 15.5424 20.5405 14.8524 20.5405H14.7774C14.0874 20.5405 13.5274 19.9805 13.5274 19.2905C13.5274 18.6005 14.0874 18.0405 14.7774 18.0405ZM19.6284 5.83398H19.6034C18.0351 5.83398 16.5067 6.46565 15.3984 7.56732C14.4956 8.46609 13.9051 9.64764 13.7141 10.8995L25.5129 10.9C25.0846 8.03628 22.6082 5.83398 19.6284 5.83398Z",
557
+ id: "Vector",
558
+ d: "M14.3711 6.04627C13.919 5.54693 13.2374 5.25677 12.2927 5.15555V4.64271C12.2927 3.71824 11.9013 2.82752 11.2131 2.20671C10.518 1.57241 9.6138 1.2755 8.67584 1.36322C7.06309 1.51842 5.70676 3.07719 5.70676 4.76417V5.15555C4.76205 5.25677 4.08051 5.54693 3.6284 6.04627C2.97385 6.77505 2.9941 7.74674 3.06833 8.42154L3.54068 12.1801C3.68238 13.496 4.21547 14.8455 7.11707 14.8455H10.8824C13.784 14.8455 14.3171 13.496 14.4588 12.1869L14.9312 8.41479C15.0054 7.74674 15.0189 6.77505 14.3711 6.04627ZM8.77031 2.30118C9.4451 2.24045 10.0862 2.44963 10.5855 2.90174C11.0781 3.34711 11.3548 3.98141 11.3548 4.64271V5.11506H6.64472V4.76417C6.64472 3.56304 7.63666 2.40915 8.77031 2.30118ZM6.58399 8.87365H6.57724C6.2061 8.87365 5.90245 8.56999 5.90245 8.19885C5.90245 7.82772 6.2061 7.52406 6.57724 7.52406C6.95512 7.52406 7.25878 7.82772 7.25878 8.19885C7.25878 8.56999 6.95512 8.87365 6.58399 8.87365ZM11.3075 8.87365H11.3008C10.9296 8.87365 10.626 8.56999 10.626 8.19885C10.626 7.82772 10.9296 7.52406 11.3008 7.52406C11.6787 7.52406 11.9823 7.82772 11.9823 8.19885C11.9823 8.56999 11.6787 8.87365 11.3075 8.87365Z",
559
+ fill: color
560
+ }
561
+ ) }) }) }) });
562
+ };
563
+ const CloseIcon = ({ width, height, color }) => {
564
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__close", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 20 20", focusable: "false", "aria-hidden": "true", width, height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
565
+ "path",
566
+ {
567
+ d: "m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414l-6.293 6.293-6.293-6.293a1 1 0 0 0-1.414 1.414l6.293 6.293-6.293 6.293a1 1 0 1 0 1.414 1.414l6.293-6.293 6.293 6.293a.998.998 0 0 0 1.707-.707.999.999 0 0 0-.293-.707l-6.293-6.293z",
546
568
  fill: color
547
569
  }
548
570
  ) }) });
@@ -558,6 +580,46 @@ const SearchIcon = ({ width, height, color }) => {
558
580
  }
559
581
  ) }) });
560
582
  };
583
+ const MessageAddIcon = ({ width, height, color }) => {
584
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__message-add", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "vuesax/bold/message-add", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "message-add", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
585
+ "path",
586
+ {
587
+ id: "Vector",
588
+ d: "M11.1666 1.33301H5.83325C3.16659 1.33301 1.83325 2.66634 1.83325 5.33301V13.9997C1.83325 14.3663 2.13325 14.6663 2.49992 14.6663H11.1666C13.8333 14.6663 15.1666 13.333 15.1666 10.6663V5.33301C15.1666 2.66634 13.8333 1.33301 11.1666 1.33301ZM10.8333 8.49967H8.99992V10.333C8.99992 10.6063 8.77325 10.833 8.49992 10.833C8.22658 10.833 7.99992 10.6063 7.99992 10.333V8.49967H6.16658C5.89325 8.49967 5.66658 8.27301 5.66658 7.99967C5.66658 7.72634 5.89325 7.49967 6.16658 7.49967H7.99992V5.66634C7.99992 5.39301 8.22658 5.16634 8.49992 5.16634C8.77325 5.16634 8.99992 5.39301 8.99992 5.66634V7.49967H10.8333C11.1066 7.49967 11.3333 7.72634 11.3333 7.99967C11.3333 8.27301 11.1066 8.49967 10.8333 8.49967Z",
589
+ fill: color
590
+ }
591
+ ) }) }) }) });
592
+ };
593
+ const SwapIcon = ({ width, height, color }) => {
594
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__swap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "Swap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "Iconly/Light-Outline/Swap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { id: "Swap_2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
595
+ "path",
596
+ {
597
+ id: "Combined-Shape",
598
+ d: "M11.7263 3.864C11.9795 3.864 12.1887 4.0521 12.2218 4.29616L12.2263 4.364L12.2262 12.2307L14.0904 10.359C14.2852 10.1633 14.6018 10.1626 14.7975 10.3574C14.9754 10.5345 14.9922 10.8122 14.8474 11.0083L14.7991 11.0645L12.0806 13.7956C12.0642 13.8117 12.0476 13.8263 12.03 13.8398L12.0806 13.7956C12.0561 13.8203 12.0296 13.8418 12.0017 13.8603C11.992 13.8663 11.9819 13.8725 11.9715 13.8784C11.9619 13.8842 11.9522 13.8892 11.9423 13.894C11.9325 13.8983 11.9226 13.9027 11.9125 13.9067C11.8998 13.9122 11.8866 13.9168 11.8734 13.9209C11.8656 13.9229 11.8576 13.9252 11.8495 13.9272C11.8351 13.9312 11.8206 13.9342 11.8061 13.9365C11.7993 13.9373 11.7921 13.9383 11.7849 13.9391C11.7685 13.9414 11.7522 13.9425 11.7359 13.9428C11.7327 13.9425 11.7295 13.9425 11.7263 13.9425L11.7166 13.9428C11.7003 13.9425 11.684 13.9414 11.6678 13.9395L11.7263 13.9425C11.6991 13.9425 11.6724 13.9403 11.6463 13.9362C11.6319 13.9342 11.6174 13.9312 11.6031 13.9276C11.5955 13.9253 11.5879 13.9232 11.5804 13.9209C11.566 13.9169 11.5518 13.9118 11.5378 13.9061C11.5301 13.9026 11.5227 13.8994 11.5154 13.896C11.5038 13.891 11.4923 13.8851 11.4809 13.8787C11.4707 13.8725 11.4606 13.8663 11.4508 13.8598C11.4431 13.8552 11.4355 13.8499 11.428 13.8443L11.4227 13.8398C11.4051 13.8263 11.3884 13.8117 11.3728 13.7961L11.3719 13.7956L8.65336 11.0645C8.45855 10.8688 8.45928 10.5522 8.65499 10.3574C8.83292 10.1803 9.11073 10.1648 9.30613 10.3105L9.3621 10.359L11.2262 12.232L11.2263 4.364C11.2263 4.08786 11.4502 3.864 11.7263 3.864ZM5.10736 2.05497L5.1171 2.05469C5.13339 2.055 5.14967 2.05611 5.16588 2.058L5.10736 2.05497C5.1346 2.05497 5.16133 2.05714 5.18739 2.06133C5.20164 2.06328 5.21594 2.06623 5.23012 2.0698C5.23846 2.07225 5.24696 2.07463 5.25536 2.07723C5.26849 2.08093 5.2812 2.08543 5.29374 2.09046C5.30281 2.0945 5.31199 2.09851 5.32103 2.10279C5.33176 2.10743 5.34234 2.11289 5.35274 2.11876C5.36166 2.12425 5.37048 2.12959 5.37912 2.1352C5.38801 2.14048 5.39691 2.14667 5.40565 2.15318L5.4618 2.20186L8.18032 4.93297C8.37513 5.12868 8.3744 5.44527 8.17869 5.64008C8.00077 5.81718 7.72295 5.83267 7.52755 5.68698L7.47158 5.63844L5.60692 3.76469L5.60736 11.6335C5.60736 11.9096 5.3835 12.1335 5.10736 12.1335C4.85423 12.1335 4.64503 11.9454 4.61192 11.7013L4.60736 11.6335L4.60692 3.76535L2.74329 5.63844C2.56618 5.81636 2.28845 5.83314 2.09237 5.68836L2.03618 5.64008C1.85826 5.46298 1.84148 5.18524 1.98626 4.98916L2.03455 4.93297L4.75306 2.20186L4.78251 2.17486C4.78942 2.16895 4.7965 2.16322 4.80373 2.15768L4.75306 2.20186C4.77759 2.17722 4.80405 2.15567 4.83195 2.13721C4.84168 2.13115 4.8518 2.12496 4.86214 2.11912C4.87175 2.11333 4.88152 2.10825 4.8914 2.10352C4.90117 2.0992 4.91107 2.09484 4.92114 2.09079C4.93393 2.08533 4.94704 2.0807 4.9603 2.07663C4.96836 2.07446 4.97662 2.07215 4.98496 2.07006C4.99839 2.06637 5.01197 2.06355 5.02562 2.06129C5.03383 2.06027 5.04188 2.05915 5.04999 2.05822C5.06542 2.0561 5.08126 2.05503 5.0971 2.0547C5.1006 2.055 5.10398 2.05497 5.10736 2.05497Z",
599
+ fill: color
600
+ }
601
+ ) }) }) }) }) });
602
+ };
603
+ const NoteIcon = ({ width, height, color }) => {
604
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-icon__note", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width, height, viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { id: "vuesax/bold/note-2", children: [
605
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
606
+ "path",
607
+ {
608
+ id: "Vector",
609
+ d: "M8.95178 13.3046C9.13494 13.3473 9.15172 13.5871 8.97332 13.6466L7.91998 13.9933C5.27332 14.8466 3.87998 14.1333 3.01998 11.4866L2.16665 8.85328C1.31332 6.20661 2.01998 4.80661 4.66665 3.95328L4.67731 3.94975C5.08018 3.81633 5.48102 4.22359 5.37901 4.63553C5.37264 4.66126 5.3663 4.68718 5.35998 4.71328L4.70665 7.50661C3.97332 10.6466 5.04665 12.3799 8.18665 13.1266L8.95178 13.3046Z",
610
+ fill: color
611
+ }
612
+ ),
613
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
614
+ "path",
615
+ {
616
+ id: "Vector_2",
617
+ d: "M11.9467 2.14033L10.8334 1.88033C8.6067 1.35366 7.28004 1.787 6.50004 3.40033C6.30004 3.807 6.14004 4.30033 6.00671 4.867L5.35337 7.66033C4.70004 10.447 5.56004 11.8203 8.34004 12.4803L9.46004 12.747C9.8467 12.8403 10.2067 12.9003 10.54 12.927C12.62 13.127 13.7267 12.1537 14.2867 9.747L14.94 6.96033C15.5934 4.17366 14.74 2.79366 11.9467 2.14033ZM10.6934 8.887C10.6334 9.11366 10.4334 9.26033 10.2067 9.26033C10.1667 9.26033 10.1267 9.25366 10.08 9.247L8.14004 8.75366C7.87337 8.687 7.71337 8.41366 7.78004 8.147C7.84671 7.88033 8.12004 7.72033 8.38671 7.787L10.3267 8.28033C10.6 8.347 10.76 8.62033 10.6934 8.887ZM12.6467 6.63366C12.5867 6.86033 12.3867 7.007 12.16 7.007C12.12 7.007 12.08 7.00033 12.0334 6.99366L8.80004 6.17366C8.53337 6.107 8.37337 5.83366 8.44004 5.567C8.50671 5.30033 8.78004 5.14033 9.04671 5.207L12.28 6.027C12.5534 6.087 12.7134 6.36033 12.6467 6.63366Z",
618
+ fill: color
619
+ }
620
+ )
621
+ ] }) }) });
622
+ };
561
623
  const Button$1 = "";
562
624
  const Button = React__default.forwardRef((props, buttonRef) => {
563
625
  const { className = "", children, colorType = "light", fullWidth = false, elementType = "button", link = "", ...otherProps } = props;
@@ -581,10 +643,32 @@ const SearchInputField = (props) => {
581
643
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__search-input-field-wrapper ${className || ""}`, children: [
582
644
  !icon ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__search-input-field-icon", children: icon }),
583
645
  /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "sledge__search-input-field", value, onChange: (e) => handleChangeField(e), ref: fieldRef, ...otherProps }),
584
- isVisibleClearField && withClearField ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__clear-field-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sledge__clear-field", type: "button", onClick: handleResetField, children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 20 20", focusable: "false", "aria-hidden": "true", width: 14, height: 14, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414l-6.293 6.293-6.293-6.293a1 1 0 0 0-1.414 1.414l6.293 6.293-6.293 6.293a1 1 0 1 0 1.414 1.414l6.293-6.293 6.293 6.293a.998.998 0 0 0 1.707-.707.999.999 0 0 0-.293-.707l-6.293-6.293z" }) }) }) }) : null
646
+ isVisibleClearField && withClearField ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__clear-field-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "sledge__clear-field", type: "button", onClick: handleResetField, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { width: 14, height: 14, color: "#393d4e" }) }) }) : null
585
647
  ] });
586
648
  };
587
649
  const SelectField$1 = "";
650
+ const ROTATE_FILTER_ARROW_ANIMATION = {
651
+ open: { rotate: 180 },
652
+ closed: { rotate: 0 },
653
+ transition: {
654
+ type: "spring",
655
+ duration: 0.2
656
+ }
657
+ };
658
+ const VISIBLE_ANIMATION = {
659
+ hidden: { opacity: 0, scale: 0 },
660
+ visible: (custom) => {
661
+ const { duration } = custom || {};
662
+ return {
663
+ opacity: 1,
664
+ scale: 1,
665
+ transition: {
666
+ type: "spring",
667
+ duration: duration || 0.7
668
+ }
669
+ };
670
+ }
671
+ };
588
672
  const SelectField = (props) => {
589
673
  var _a;
590
674
  const { className = "", placeholder = null, prefixLabel = null, prefixSelectedLabel = "", align = "end", onChange, value = "", options = [], LinkComponent, link } = props;
@@ -599,7 +683,8 @@ const SelectField = (props) => {
599
683
  {
600
684
  trigger: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "sledge__button sledge__select-field", "data-button-color-type": "light", "data-button-full-width": "true", children: [
601
685
  !prefixLabel ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge__select-field-icon", children: prefixLabel }),
602
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (prefixSelectedLabel == null ? void 0 : prefixSelectedLabel.length) ? `${prefixSelectedLabel} ${selectedLabel}` : selectedLabel })
686
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (prefixSelectedLabel == null ? void 0 : prefixSelectedLabel.length) ? `${prefixSelectedLabel} ${selectedLabel}` : selectedLabel }),
687
+ /* @__PURE__ */ jsxRuntimeExports.jsx(motion.div, { initial: "closed", animate: isOpen ? "open" : "closed", variants: ROTATE_FILTER_ARROW_ANIMATION, className: "sort-trigger-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronArrowDownIcon, { width: 18, height: 18, color: "#000000" }) })
603
688
  ] }),
604
689
  content: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "sledge__select-field-option", children: options == null ? void 0 : options.map((option, index) => {
605
690
  const { label, value: optionValue } = option;
@@ -1242,9 +1327,14 @@ const WidgetHeaderShareTrigger = ({ wishlistData, buttonText, showShareTrigger,
1242
1327
  };
1243
1328
  const [isLoadingBulkAdd, setIsLoadingBulkAdd] = React__default.useState(false);
1244
1329
  let clipboardIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1245
- <path d="M15 17V20C15 20.2652 14.8946 20.5196 14.7071 20.7071C14.5196 20.8946 14.2652 21 14 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V8C3 7.73478 3.10536 7.48043 3.29289 7.29289C3.48043 7.10536 3.73478 7 4 7H7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
1246
- <path d="M18 3H8C7.44772 3 7 3.44772 7 4V16C7 16.5523 7.44772 17 8 17H18C18.5523 17 19 16.5523 19 16V4C19 3.44772 18.5523 3 18 3Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
1247
- </svg>`;
1330
+ <g id="vuesax/linear/copy">
1331
+ <g id="copy">
1332
+ <path id="Vector" d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z" stroke="#767676" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1333
+ <path id="Vector_2" d="M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z" stroke="#767676" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
1334
+ </g>
1335
+ </g>
1336
+ </svg>
1337
+ `;
1248
1338
  let checkIcon = `<svg width="20" height="20" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
1249
1339
  const handleBulkAddWishlist = async () => {
1250
1340
  var _a2, _b2, _c2, _d2, _e2, _f2, _g;
@@ -1422,7 +1512,7 @@ const WidgetHeaderLimit = ({ options, defaultLimitOptions, selectedLimit, setSel
1422
1512
  React__default.useEffect(() => {
1423
1513
  setIsRequiredLogin(sledgeAnonymId && is_required_login);
1424
1514
  }, [sledgeAnonymId]);
1425
- return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: getOptions && Boolean(getOptions == null ? void 0 : getOptions.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1515
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: getOptions && Boolean(getOptions == null ? void 0 : getOptions.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1426
1516
  SelectField,
1427
1517
  {
1428
1518
  align: "end",
@@ -1435,7 +1525,7 @@ const WidgetHeaderLimit = ({ options, defaultLimitOptions, selectedLimit, setSel
1435
1525
  value: selectedLimit || getOptions[0],
1436
1526
  onChange: ({ value }) => handleChangeLimit(value)
1437
1527
  }
1438
- ) }) }) });
1528
+ ) }) }) : null });
1439
1529
  };
1440
1530
  const WidgetHeaderSort$1 = ({ wishlistSort, selectedSort, setSelectedSort, setIsRefreshWidgetList, dataSettings }) => {
1441
1531
  var _a, _b;
@@ -1449,7 +1539,7 @@ const WidgetHeaderSort$1 = ({ wishlistSort, selectedSort, setSelectedSort, setIs
1449
1539
  React__default.useEffect(() => {
1450
1540
  setIsRequiredLogin(sledgeAnonymId && is_required_login);
1451
1541
  }, [sledgeAnonymId]);
1452
- return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: wishlistSort && Boolean(wishlistSort == null ? void 0 : wishlistSort.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1542
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !isRequiredLogin ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: wishlistSort && Boolean(wishlistSort == null ? void 0 : wishlistSort.length) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1453
1543
  SelectField,
1454
1544
  {
1455
1545
  align: "end",
@@ -1463,7 +1553,7 @@ const WidgetHeaderSort$1 = ({ wishlistSort, selectedSort, setSelectedSort, setIs
1463
1553
  value: selectedSort || ((_b = wishlistSort[0]) == null ? void 0 : _b.value),
1464
1554
  onChange: ({ value }) => handleChangeSort(value)
1465
1555
  }
1466
- ) }) }) });
1556
+ ) }) }) : null });
1467
1557
  };
1468
1558
  const WidgetHeader$1 = ({ isFirstLoading, ...props }) => {
1469
1559
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__widget-header", children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -1548,7 +1638,7 @@ const getProductsReviewInfo = async (ids, token) => {
1548
1638
  };
1549
1639
  const Rating = (props) => {
1550
1640
  var _a, _b;
1551
- const { total, average, size = "md", params, withSkeletonLoading = true, withTotal = true, isScrollToElementWidget = true, data: propsData, sledgeSettings } = props;
1641
+ const { total, average, size = "sm", params, withSkeletonLoading = true, withTotal = true, isScrollToElementWidget = true, data: propsData, sledgeSettings } = props;
1552
1642
  const { productId } = params || {};
1553
1643
  const { isRenderApp, triggerRenderMultipleComponent } = React__default.useContext(SledgeContext);
1554
1644
  const { productReview: isRenderAppProductReview } = isRenderApp || {};
@@ -1656,7 +1746,7 @@ const Rating = (props) => {
1656
1746
  }, [productId, triggerRenderMultipleComponent]);
1657
1747
  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: [
1658
1748
  /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", style: { display: "none" }, id: "sledge-product-review-rating-icon-svg-store", children: [
1659
- /* @__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(
1749
+ /* @__PURE__ */ jsxRuntimeExports.jsx("symbol", { id: "sledge-product-review-icons-rating-icon-fill", viewBox: "0 0 30 29", fill: fill_color || "#43c6ac", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1660
1750
  "path",
1661
1751
  {
1662
1752
  fillRule: "evenodd",
@@ -1751,18 +1841,11 @@ const WidgetHeaderAddTrigger = ({ isFirstLoading, text, dataSettings, params, on
1751
1841
  {
1752
1842
  type: "button",
1753
1843
  colorType: "success",
1844
+ className: "sledge-product-review__widget-header-add-trigger",
1754
1845
  onClick: () => typeof window !== "undefined" && window.sledgeProductReviewWidgetFormAdd && window.sledgeProductReviewWidgetFormAdd(params, onAfterAddReview),
1755
1846
  style: display_button_write_review_style,
1756
1847
  children: [
1757
- /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 16, height: 17, viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1758
- "path",
1759
- {
1760
- fillRule: "evenodd",
1761
- clipRule: "evenodd",
1762
- d: "M13.8323 14.1264C14.1083 14.1264 14.3323 14.3504 14.3323 14.6264C14.3323 14.9024 14.1083 15.1264 13.8323 15.1264H8.99701C8.72101 15.1264 8.49701 14.9024 8.49701 14.6264C8.49701 14.3504 8.72101 14.1264 8.99701 14.1264H13.8323ZM10.7429 2.93576C10.7762 2.96176 11.8915 3.82843 11.8915 3.82843C12.2969 4.06976 12.6135 4.5011 12.7335 5.01176C12.8529 5.5171 12.7662 6.03843 12.4882 6.47909C12.4864 6.48203 12.4845 6.48494 12.4781 6.49358L12.4731 6.50025C12.4279 6.55972 12.2318 6.80776 11.2417 8.04815C11.2325 8.06441 11.2221 8.07963 11.2107 8.09443C11.1941 8.11624 11.1759 8.13628 11.1565 8.15453C11.089 8.23956 11.0176 8.3289 10.9426 8.42283L10.7907 8.61313C10.4772 9.00579 10.1053 9.47139 9.66407 10.0236L9.43764 10.3071C8.58586 11.3732 7.49499 12.7382 6.09755 14.4864C5.79155 14.8678 5.33288 15.0898 4.84021 15.0958L2.41421 15.1264H2.40755C2.17621 15.1264 1.97488 14.9678 1.92088 14.7418L1.37488 12.4278C1.26221 11.9484 1.37421 11.4538 1.68155 11.0698L7.96155 3.2151C7.96421 3.21243 7.96621 3.2091 7.96888 3.20643C8.65755 2.3831 9.90288 2.26176 10.7429 2.93576ZM7.26136 5.69133L2.46221 11.6944C2.34821 11.8371 2.30621 12.0211 2.34821 12.1978L2.80221 14.1211L4.82821 14.0958C5.02088 14.0938 5.19888 14.0078 5.31688 13.8611C5.92454 13.1008 6.68825 12.1452 7.47345 11.1627L7.75125 10.815L8.02952 10.4668C8.76591 9.54526 9.4934 8.63471 10.1021 7.87258L7.26136 5.69133ZM8.73888 3.84443L7.88603 4.91L10.7265 7.09062C11.2733 6.4058 11.633 5.95476 11.6662 5.91176C11.7755 5.73443 11.8182 5.48376 11.7609 5.24243C11.7022 4.9951 11.5482 4.78509 11.3262 4.65109C11.2789 4.61843 10.1555 3.74643 10.1209 3.71909C9.69821 3.38043 9.08155 3.4391 8.73888 3.84443Z",
1763
- fill: "currentColor"
1764
- }
1765
- ) }),
1848
+ /* @__PURE__ */ jsxRuntimeExports.jsx(MessageAddIcon, { width: 16, height: 16, color: "currentColor" }),
1766
1849
  text ? text : button_write_review || "Add review"
1767
1850
  ]
1768
1851
  }
@@ -1782,15 +1865,7 @@ const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, set
1782
1865
  SelectField,
1783
1866
  {
1784
1867
  align: "end",
1785
- prefixLabel: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1786
- "path",
1787
- {
1788
- fillRule: "evenodd",
1789
- clipRule: "evenodd",
1790
- d: "M11.5919 9.13869C12.7359 9.13869 13.6666 10.0647 13.6666 11.2027C13.6666 12.3407 12.7359 13.2667 11.5919 13.2667C10.4473 13.2667 9.51593 12.3407 9.51593 11.2027C9.51593 10.0647 10.4473 9.13869 11.5919 9.13869ZM11.5919 10.1387C10.9986 10.1387 10.5159 10.616 10.5159 11.2027C10.5159 11.79 10.9986 12.2667 11.5919 12.2667C12.1846 12.2667 12.6666 11.79 12.6666 11.2027C12.6666 10.616 12.1846 10.1387 11.5919 10.1387ZM6.7202 10.7286C6.9962 10.7286 7.2202 10.9526 7.2202 11.2286C7.2202 11.5046 6.9962 11.7286 6.7202 11.7286H2.51953C2.24353 11.7286 2.01953 11.5046 2.01953 11.2286C2.01953 10.9526 2.24353 10.7286 2.51953 10.7286H6.7202ZM4.07533 2.66669C5.22 2.66669 6.15067 3.59335 6.15067 4.73135C6.15067 5.86935 5.22 6.79469 4.07533 6.79469C2.93133 6.79469 2 5.86935 2 4.73135C2 3.59335 2.93133 2.66669 4.07533 2.66669ZM4.07533 3.66669C3.48267 3.66669 3 4.14402 3 4.73135C3 5.31802 3.48267 5.79469 4.07533 5.79469C4.66867 5.79469 5.15067 5.31802 5.15067 4.73135C5.15067 4.14402 4.66867 3.66669 4.07533 3.66669ZM12.7941 4.26695C13.0701 4.26695 13.2941 4.49095 13.2941 4.76695C13.2941 5.04295 13.0701 5.26695 12.7941 5.26695H8.59407C8.31807 5.26695 8.09407 5.04295 8.09407 4.76695C8.09407 4.49095 8.31807 4.26695 8.59407 4.26695H12.7941Z",
1791
- fill: "currentColor"
1792
- }
1793
- ) }),
1868
+ prefixLabel: /* @__PURE__ */ jsxRuntimeExports.jsx(SwapIcon, { width: 16, height: 16, color: "currentColor" }),
1794
1869
  prefixSelectedLabel: "Sort by",
1795
1870
  options: productReviewSort.map((item) => {
1796
1871
  const { name, value } = item;
@@ -1805,28 +1880,6 @@ const WidgetHeaderSort = ({ isFirstLoading, productReviewSort, dataSettings, set
1805
1880
  }
1806
1881
  ) }) });
1807
1882
  };
1808
- const ROTATE_FILTER_ARROW_ANIMATION = {
1809
- open: { rotate: 180 },
1810
- closed: { rotate: 0 },
1811
- transition: {
1812
- type: "spring",
1813
- duration: 0.2
1814
- }
1815
- };
1816
- const VISIBLE_ANIMATION = {
1817
- hidden: { opacity: 0, scale: 0 },
1818
- visible: (custom) => {
1819
- const { duration } = custom || {};
1820
- return {
1821
- opacity: 1,
1822
- scale: 1,
1823
- transition: {
1824
- type: "spring",
1825
- duration: duration || 0.7
1826
- }
1827
- };
1828
- }
1829
- };
1830
1883
  const WidgetHeaderSummary = (props) => {
1831
1884
  var _a, _b, _c, _d;
1832
1885
  const { params, dataSettings, summaryData, sledgeSettings } = props;
@@ -2222,7 +2275,7 @@ const ProductGrid = ({
2222
2275
  wishlistChecked: dataWishlists == null ? void 0 : dataWishlists[id]
2223
2276
  }
2224
2277
  ),
2225
- /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`, alt: "sledge-product-card-image", loading: "lazy" })
2278
+ /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: (image == null ? void 0 : image.src) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy" })
2226
2279
  ]
2227
2280
  }
2228
2281
  ),
@@ -2230,34 +2283,14 @@ const ProductGrid = ({
2230
2283
  ] }),
2231
2284
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-desc", children: [
2232
2285
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-title", children: [
2233
- title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
2234
- "a",
2235
- {
2236
- href: url,
2237
- onClick: () => sourceApp === "instant-search" && productClickTrigger({
2238
- productId: id
2239
- }),
2240
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { style: display_product_name_style, children: title })
2241
- }
2242
- ) : null,
2243
2286
  show_price ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-price", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: display_price_style, children: [
2244
2287
  currency,
2245
2288
  price
2246
- ] }) }) : null
2247
- ] }),
2248
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-text", children: [
2249
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: variant_title }),
2250
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2251
- /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: show_vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
2252
- "Vendor: ",
2253
- vendor
2254
- ] }) : null }),
2255
- /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: " | " }),
2256
- /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: show_sku ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
2257
- "SKU: ",
2258
- sku
2259
- ] }) : null })
2260
- ] })
2289
+ ] }) }) : null,
2290
+ show_vendor ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-badge-vendor", children: [
2291
+ "Vendor: ",
2292
+ (vendor == null ? void 0 : vendor.length) > 5 ? `${String(vendor).substring(0, 5)}...` : vendor
2293
+ ] }) : null
2261
2294
  ] }),
2262
2295
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2263
2296
  Rating,
@@ -2270,7 +2303,21 @@ const ProductGrid = ({
2270
2303
  isScrollToElementWidget: false,
2271
2304
  data: dataReviews == null ? void 0 : dataReviews[id]
2272
2305
  }
2273
- ) })
2306
+ ) }),
2307
+ title ? /* @__PURE__ */ jsxRuntimeExports.jsx(
2308
+ "a",
2309
+ {
2310
+ href: url,
2311
+ onClick: () => sourceApp === "instant-search" && productClickTrigger({
2312
+ productId: id
2313
+ }),
2314
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "sledge__product-grid-card-product-name", style: display_product_name_style, children: title })
2315
+ }
2316
+ ) : null,
2317
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", children: show_sku ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
2318
+ "SKU: ",
2319
+ sku
2320
+ ] }) : null })
2274
2321
  ] })
2275
2322
  ] }),
2276
2323
  show_add_to_cart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2293,15 +2340,7 @@ const ProductGrid = ({
2293
2340
  })
2294
2341
  },
2295
2342
  children: isLoadingAddToCart ? "Adding..." : isOutOfStock ? "Sold out" : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
2296
- /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2297
- "path",
2298
- {
2299
- fillRule: "evenodd",
2300
- clipRule: "evenodd",
2301
- d: "M8.83562 1.50023C10.796 1.50023 12.4155 2.99397 12.6152 4.90442L12.6709 4.90507C13.7584 4.90507 15.0806 5.62732 15.5269 7.65307L16.1186 12.2333C16.3309 13.7116 16.0654 14.8973 15.3281 15.7478C14.5946 16.5938 13.4336 17.0416 11.9704 17.0416H5.7094C4.10215 17.0416 2.9824 16.6478 2.28565 15.8386C1.5859 15.0271 1.3519 13.8098 1.5904 12.2213L2.1724 7.70182C2.5549 5.62957 3.95365 4.90507 5.03665 4.90507C5.13014 4.04293 5.51889 3.22275 6.13562 2.60797C6.84437 1.90372 7.82162 1.50023 8.81987 1.50023H8.83562ZM12.6709 6.03007H5.03665C4.7059 6.03007 3.6004 6.16357 3.28315 7.87657L2.70415 12.3766C2.5159 13.6388 2.6614 14.5523 3.13765 15.1051C3.6079 15.6511 4.4494 15.9166 5.7094 15.9166H11.9704C12.7564 15.9166 13.8296 15.7598 14.4776 15.0113C14.9921 14.4181 15.1691 13.5346 15.0041 12.3848L14.4199 7.84582C14.1709 6.72757 13.5139 6.03007 12.6709 6.03007ZM11.023 8.11815C11.3335 8.11815 11.6027 8.37015 11.6027 8.68065C11.6027 8.99115 11.368 9.24315 11.0575 9.24315H11.023C10.7125 9.24315 10.4605 8.99115 10.4605 8.68065C10.4605 8.37015 10.7125 8.11815 11.023 8.11815ZM6.65042 8.11815C6.96092 8.11815 7.23017 8.37015 7.23017 8.68065C7.23017 8.99115 6.99467 9.24315 6.68417 9.24315H6.65042C6.33992 9.24315 6.08792 8.99115 6.08792 8.68065C6.08792 8.37015 6.33992 8.11815 6.65042 8.11815ZM8.83337 2.62522H8.82212C8.11637 2.62522 7.42862 2.90947 6.92987 3.40522C6.5236 3.80967 6.25789 4.34137 6.17193 4.90472L11.4814 4.90493C11.2887 3.61626 10.1743 2.62522 8.83337 2.62522Z",
2302
- fill: "#393D4E"
2303
- }
2304
- ) }),
2343
+ /* @__PURE__ */ jsxRuntimeExports.jsx(BagIcon, { width: 15, height: 15, color: "#393D4E" }),
2305
2344
  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: language_button_add_to_cart ? language_button_add_to_cart : "Add To Cart" })
2306
2345
  ] })
2307
2346
  }
@@ -2312,69 +2351,83 @@ const ProductGrid = ({
2312
2351
  const TextAreaField = "";
2313
2352
  const InputField = "";
2314
2353
  const CollectionGrid$1 = "";
2315
- const CollectionGrid = ({ className = "", data }) => {
2354
+ const CollectionGrid = ({ className = "", data, cards, isComponentJsVersion, onAfterRenderCollection }) => {
2355
+ React__default.useEffect(() => {
2356
+ onAfterRenderCollection && onAfterRenderCollection("success");
2357
+ }, []);
2316
2358
  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__collection-grid ${className}`, children: data.map((item, index) => {
2317
- const { id, title, description, url, image } = item;
2318
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card", children: [
2319
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2320
- "img",
2321
- {
2322
- src: image || `${API_URL}/img/blank-image.png`,
2323
- alt: "sledge-product-card-image",
2324
- loading: "lazy"
2325
- }
2326
- ) }),
2359
+ const { id, title, body_html, url, image } = item;
2360
+ const getCards = cards ? cards({ data: item }) : null;
2361
+ return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index) : /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card", children: [
2362
+ /* @__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) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
2327
2363
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-content", children: [
2328
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-text", children: [
2329
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-title", children: title }),
2330
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-description", children: description })
2331
- ] }),
2332
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", colorType: "success", elementType: "hyperlink", link: url, children: "Shop Now" }) })
2364
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-title", children: title }),
2365
+ body_html ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-description", dangerouslySetInnerHTML: { __html: body_html } }) : null
2333
2366
  ] })
2334
- ] }, index);
2367
+ ] }) }, index);
2335
2368
  }) }) });
2336
2369
  };
2337
2370
  const PageGrid$1 = "";
2338
- const PageGrid = ({ className = "", data }) => {
2371
+ const PageGrid = ({ className = "", data, cards, isComponentJsVersion, onAfterRenderPage }) => {
2372
+ React__default.useEffect(() => {
2373
+ onAfterRenderPage && onAfterRenderPage("success");
2374
+ }, []);
2339
2375
  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__page-grid ${className}`, children: data.map((item, index) => {
2340
- const { id, title, description, url, image } = item;
2341
- return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card", children: [
2342
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2343
- "img",
2344
- {
2345
- src: image || `${API_URL}/img/blank-image.png`,
2346
- alt: "sledge-product-card-image",
2347
- loading: "lazy"
2348
- }
2349
- ) }),
2376
+ const { id, title, body_html, url, image } = item;
2377
+ const getCards = cards ? cards({ data: item }) : null;
2378
+ return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index) : /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card", children: [
2379
+ /* @__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) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
2350
2380
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card-content", children: [
2351
2381
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-title", children: title }),
2352
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-description", children: description })
2382
+ body_html ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-description", dangerouslySetInnerHTML: { __html: body_html } }) : null
2353
2383
  ] })
2354
2384
  ] }) }, index);
2355
2385
  }) }) });
2356
2386
  };
2357
2387
  const BlogGrid$1 = "";
2358
- const BlogGrid = ({ className = "", data }) => {
2388
+ const BlogGrid = ({ className = "", data, cards, isComponentJsVersion, onAfterRenderBlog }) => {
2389
+ React__default.useEffect(() => {
2390
+ onAfterRenderBlog && onAfterRenderBlog("success");
2391
+ }, []);
2359
2392
  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__blog-grid ${className}`, children: data == null ? void 0 : data.map((item, index) => {
2360
- const { id, title, date, description, url, image } = item;
2361
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card", children: [
2393
+ const { id, title, created_at, url, image } = item;
2394
+ const getCards = cards ? cards({ data: item }) : null;
2395
+ return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card", children: [
2362
2396
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-content", children: [
2363
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2364
- "img",
2365
- {
2366
- src: image || `${API_URL}/img/blank-image.png`,
2367
- alt: "sledge-blog-card-image",
2368
- loading: "lazy"
2369
- }
2370
- ) }) }),
2397
+ /* @__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) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
2371
2398
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card-desc", children: [
2372
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-title", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: title }) }) }) }),
2373
- !(date == null ? void 0 : date.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-date", children: date }),
2374
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-text", children: description })
2399
+ /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-title", children: title }) }),
2400
+ created_at ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-badge-vendor", children: convertDate(created_at) }) : null
2375
2401
  ] })
2376
2402
  ] }),
2377
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "button", colorType: "light", elementType: "hyperlink", link: url, children: "Learn More" }) })
2403
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { type: "button", colorType: "light", children: [
2404
+ /* @__PURE__ */ jsxRuntimeExports.jsx(NoteIcon, { width: 16, height: 16, color: "#000000" }),
2405
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "View Blog" })
2406
+ ] }) }) })
2407
+ ] }, index);
2408
+ }) }) });
2409
+ };
2410
+ const ArticleGrid$1 = "";
2411
+ const ArticleGrid = ({ className = "", data, cards, isComponentJsVersion, onAfterRenderArticle }) => {
2412
+ React__default.useEffect(() => {
2413
+ onAfterRenderArticle && onAfterRenderArticle("success");
2414
+ }, []);
2415
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__article-grid ${className}`, children: data == null ? void 0 : data.map((item, index) => {
2416
+ const { id, title, created_at, summary_html, url, image } = item;
2417
+ const getCards = cards ? cards({ data: item }) : null;
2418
+ return cards ? /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: getCards } }) : getCards }, index) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-card", children: [
2419
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-content", children: [
2420
+ /* @__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) || `${API_URL}/img/blank-image.png`, alt: "sledge-card-image", loading: "lazy" }) }) }),
2421
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-card-desc", children: [
2422
+ /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-card-title", children: title }) }),
2423
+ created_at ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-badge-vendor", children: convertDate(created_at) }) : null,
2424
+ summary_html ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-card-text", dangerouslySetInnerHTML: { __html: summary_html } }) : null
2425
+ ] })
2426
+ ] }),
2427
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: url, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { type: "button", colorType: "light", children: [
2428
+ /* @__PURE__ */ jsxRuntimeExports.jsx(NoteIcon, { width: 16, height: 16, color: "#000000" }),
2429
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "View Article" })
2430
+ ] }) }) })
2378
2431
  ] }, index);
2379
2432
  }) }) });
2380
2433
  };
@@ -2398,13 +2451,12 @@ const Tooltip = ({ children, content, withArrow = true, customArrow = "", sideOf
2398
2451
  ] }) });
2399
2452
  };
2400
2453
  const ScrollArea$1 = "";
2401
- const ScrollArea = ({ children, isLoading = false, className = "", withCorner = true }) => {
2454
+ const ScrollArea = ({ children, isLoading = false, className = "" }) => {
2402
2455
  return /* @__PURE__ */ jsxRuntimeExports.jsxs($57acba87d6e25586$export$be92b6f5f03c0fe9, { className: `sledge__scroll-area-root ${className}`, children: [
2403
2456
  /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$d5c6c08dc2d3ca7, { className: `sledge__scroll-area-viewport ${isLoading ? "sledge__scroll-area-viewport-loading" : ""}`, children }),
2404
2457
  !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
2405
2458
  /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$9a4e88b92edfce6b, { className: "sledge__scroll-area-scrollbar", orientation: "vertical", children: /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$6521433ed15a34db, { className: "sledge__scroll-area-thumb" }) }),
2406
- /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$9a4e88b92edfce6b, { className: "sledge__scroll-area-scrollbar", orientation: "horizontal", children: /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$6521433ed15a34db, { className: "sledge__scroll-area-thumb" }) }),
2407
- withCorner && /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$ac61190d9fc311a9, { className: "sledge__scroll-area-corner" })
2459
+ /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$9a4e88b92edfce6b, { className: "sledge__scroll-area-scrollbar", orientation: "horizontal", children: /* @__PURE__ */ jsxRuntimeExports.jsx($57acba87d6e25586$export$6521433ed15a34db, { className: "sledge__scroll-area-thumb" }) })
2408
2460
  ] })
2409
2461
  ] });
2410
2462
  };
@@ -2449,19 +2501,32 @@ const SkeletonProductGrid = ({ count, type }) => {
2449
2501
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card", children: [
2450
2502
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-content", children: [
2451
2503
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-image sledge__skeleton-product-grid-card-image", children: [
2452
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__trigger-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "40px", height: "40px", color: "darken", rounded: "sm" }) }),
2453
- /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "100%", color: "lighten", rounded: "md" })
2504
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-wishlist__trigger-block", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "32px", height: "32px", color: "darken", rounded: "sm" }) }),
2505
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
2506
+ SkeletonItem,
2507
+ {
2508
+ width: "100%",
2509
+ height: "100%",
2510
+ color: "lighten",
2511
+ rounded: "md",
2512
+ style: {
2513
+ borderBottomLeftRadius: 0,
2514
+ borderBottomRightRadius: 0
2515
+ }
2516
+ }
2517
+ )
2454
2518
  ] }),
2455
2519
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-desc", children: [
2456
2520
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-title", children: [
2457
- /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "134px", height: "28px", color: "lighten", rounded: "md" }),
2521
+ /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "79px", height: "28px", color: "lighten", rounded: "md" }),
2458
2522
  /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "80px", height: "28px", color: "lighten", rounded: "md" })
2459
2523
  ] }),
2524
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-rating", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "134px", height: "25px", color: "lighten", rounded: "md" }) }),
2460
2525
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-text", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2461
2526
  SkeletonItem,
2462
2527
  {
2463
- width: "190px",
2464
- height: "46px",
2528
+ width: "100%",
2529
+ height: "35px",
2465
2530
  color: "lighten",
2466
2531
  rounded: "md",
2467
2532
  style: {
@@ -2471,7 +2536,7 @@ const SkeletonProductGrid = ({ count, type }) => {
2471
2536
  ) })
2472
2537
  ] })
2473
2538
  ] }),
2474
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "117px", height: "40px", color: "lighten", rounded: "md" }) })
2539
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "40px", color: "lighten", rounded: "md" }) })
2475
2540
  ] }, i)
2476
2541
  );
2477
2542
  }
@@ -2497,38 +2562,10 @@ const SkeletonCollectionGrid = ({ count }) => {
2497
2562
  let components = [];
2498
2563
  for (let i = 0; i < count; i++) {
2499
2564
  components.push(
2500
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card", children: [
2501
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "246px", height: "246px", color: "darken", rounded: "md" }) }),
2502
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-content", children: [
2503
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-text", children: [
2504
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-title", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "70px", color: "darken", rounded: "lg" }) }),
2505
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-description", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2506
- SkeletonItem,
2507
- {
2508
- width: "100%",
2509
- height: "47px",
2510
- color: "darken",
2511
- rounded: "md",
2512
- style: {
2513
- maxWidth: "357px"
2514
- }
2515
- }
2516
- ) })
2517
- ] }),
2518
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2519
- SkeletonItem,
2520
- {
2521
- width: "100%",
2522
- height: "40px",
2523
- color: "darken",
2524
- rounded: "md",
2525
- style: {
2526
- maxWidth: "117px"
2527
- }
2528
- }
2529
- ) })
2530
- ] })
2531
- ] }, i)
2565
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__collection-grid-card-content", children: [
2566
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-title", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "139px", height: "32px", color: "darken", rounded: "md" }) }),
2567
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid-card-content-description", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "238px", height: "48px", color: "darken", rounded: "md" }) })
2568
+ ] }) }, i)
2532
2569
  );
2533
2570
  }
2534
2571
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__collection-grid sledge__skeleton-collection-grid sledge__skeleton-pointer-events-none", children: components });
@@ -2537,36 +2574,10 @@ const SkeletonPageGrid = ({ count }) => {
2537
2574
  let components = [];
2538
2575
  for (let i = 0; i < count; i++) {
2539
2576
  components.push(
2540
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card", children: [
2541
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2542
- SkeletonItem,
2543
- {
2544
- width: "100%",
2545
- height: "100%",
2546
- color: "darken",
2547
- rounded: "md",
2548
- style: {
2549
- borderTopRightRadius: 0,
2550
- borderBottomRightRadius: 0
2551
- }
2552
- }
2553
- ) }),
2554
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card-content", children: [
2555
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-title", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "40px", color: "darken", rounded: "md" }) }),
2556
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-description", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2557
- SkeletonItem,
2558
- {
2559
- width: "100%",
2560
- height: "40px",
2561
- color: "darken",
2562
- rounded: "md",
2563
- style: {
2564
- maxWidth: "115px"
2565
- }
2566
- }
2567
- ) })
2568
- ] })
2569
- ] }, i)
2577
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__page-grid-card-content", children: [
2578
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-title", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "139px", height: "32px", color: "darken", rounded: "md" }) }),
2579
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid-card-content-description", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "238px", height: "48px", color: "darken", rounded: "md" }) })
2580
+ ] }) }, i)
2570
2581
  );
2571
2582
  }
2572
2583
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__page-grid sledge__skeleton-page-grid sledge__skeleton-pointer-events-none", children: components });
@@ -2575,66 +2586,87 @@ const SkeletonBlogGrid = ({ count }) => {
2575
2586
  let components = [];
2576
2587
  for (let i = 0; i < count; i++) {
2577
2588
  components.push(
2578
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-content", children: [
2579
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "100%", color: "lighten", rounded: "md" }) }),
2580
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card-desc", children: [
2581
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2589
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card", children: [
2590
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-content", children: [
2591
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-card-image sledge__skeleton-blog-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2582
2592
  SkeletonItem,
2583
2593
  {
2584
2594
  width: "100%",
2585
- height: "28px",
2595
+ height: "100%",
2586
2596
  color: "lighten",
2587
2597
  rounded: "md",
2588
2598
  style: {
2589
- maxWidth: "242px",
2590
- marginTop: "26px",
2591
- marginBottom: "12px"
2599
+ borderBottomLeftRadius: 0,
2600
+ borderBottomRightRadius: 0
2592
2601
  }
2593
2602
  }
2594
- ),
2595
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2596
- SkeletonItem,
2597
- {
2598
- width: "100%",
2599
- height: "28px",
2600
- color: "lighten",
2601
- rounded: "md",
2602
- style: {
2603
- maxWidth: "80px",
2604
- marginBottom: "27px"
2603
+ ) }),
2604
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__blog-grid-card-desc", children: [
2605
+ /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "40px", color: "lighten", rounded: "md" }),
2606
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
2607
+ SkeletonItem,
2608
+ {
2609
+ width: "79px",
2610
+ height: "26px",
2611
+ color: "lighten",
2612
+ rounded: "md",
2613
+ style: {
2614
+ marginTop: "12px",
2615
+ marginBottom: "16px"
2616
+ }
2605
2617
  }
2606
- }
2607
- ),
2608
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2618
+ ),
2619
+ /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "72px", color: "lighten", rounded: "md" })
2620
+ ] })
2621
+ ] }),
2622
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "40px", color: "lighten", rounded: "md" }) })
2623
+ ] }, i)
2624
+ );
2625
+ }
2626
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid sledge__skeleton-blog-grid sledge__skeleton-pointer-events-none", children: components });
2627
+ };
2628
+ const SkeletonArticleGrid = ({ count }) => {
2629
+ let components = [];
2630
+ for (let i = 0; i < count; i++) {
2631
+ components.push(
2632
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-card", children: [
2633
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-content", children: [
2634
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-card-image sledge__skeleton-article-grid-card-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
2609
2635
  SkeletonItem,
2610
2636
  {
2611
2637
  width: "100%",
2612
- height: "80px",
2638
+ height: "100%",
2613
2639
  color: "lighten",
2614
2640
  rounded: "md",
2615
2641
  style: {
2616
- maxWidth: "190px",
2617
- marginBottom: "27px"
2642
+ borderBottomLeftRadius: 0,
2643
+ borderBottomRightRadius: 0
2618
2644
  }
2619
2645
  }
2620
- ),
2621
- /* @__PURE__ */ jsxRuntimeExports.jsx(
2622
- SkeletonItem,
2623
- {
2624
- width: "100%",
2625
- height: "40px",
2626
- color: "lighten",
2627
- rounded: "md",
2628
- style: {
2629
- maxWidth: "117px"
2646
+ ) }),
2647
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__article-grid-card-desc", children: [
2648
+ /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "40px", color: "lighten", rounded: "md" }),
2649
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
2650
+ SkeletonItem,
2651
+ {
2652
+ width: "79px",
2653
+ height: "26px",
2654
+ color: "lighten",
2655
+ rounded: "md",
2656
+ style: {
2657
+ marginTop: "12px",
2658
+ marginBottom: "16px"
2659
+ }
2630
2660
  }
2631
- }
2632
- )
2633
- ] })
2634
- ] }) }, i)
2661
+ ),
2662
+ /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "72px", color: "lighten", rounded: "md" })
2663
+ ] })
2664
+ ] }),
2665
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid-button-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonItem, { width: "100%", height: "40px", color: "lighten", rounded: "md" }) })
2666
+ ] }, i)
2635
2667
  );
2636
2668
  }
2637
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__blog-grid sledge__skeleton-blog-grid sledge__skeleton-pointer-events-none", children: components });
2669
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__article-grid sledge__skeleton-article-grid sledge__skeleton-pointer-events-none", children: components });
2638
2670
  };
2639
2671
  const SkeletonLoading = {
2640
2672
  Item: SkeletonItem,
@@ -2642,7 +2674,8 @@ const SkeletonLoading = {
2642
2674
  ProductGrid: SkeletonProductGrid,
2643
2675
  CollectionGrid: SkeletonCollectionGrid,
2644
2676
  PageGrid: SkeletonPageGrid,
2645
- BlogGrid: SkeletonBlogGrid
2677
+ BlogGrid: SkeletonBlogGrid,
2678
+ ArticleGrid: SkeletonArticleGrid
2646
2679
  };
2647
2680
  const SearchIconWidget = (props) => {
2648
2681
  const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
@@ -3095,15 +3128,42 @@ const SearchResultWidget = (props) => {
3095
3128
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
3096
3129
  const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
3097
3130
  const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
3098
- const { layoutType = "default", query, params, children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, data: propsData, sledgeSettings } = props;
3131
+ const {
3132
+ layoutType = "default",
3133
+ query,
3134
+ params,
3135
+ children,
3136
+ onAfterAddToCart,
3137
+ onAfterAddWishlist,
3138
+ onAfterRemoveWishlist,
3139
+ onAfterRenderProduct,
3140
+ onAfterRenderCollection,
3141
+ onAfterRenderPage,
3142
+ onAfterRenderBlog,
3143
+ onAfterRenderArticle,
3144
+ data: propsData,
3145
+ sledgeSettings
3146
+ } = props;
3099
3147
  const { keyword: queryKeyword = "" } = query || {};
3100
3148
  const { collectionId } = params || {};
3101
3149
  let productCardsComponent = null;
3150
+ let collectionCardsComponent = null;
3151
+ let pageCardsComponent = null;
3152
+ let blogCardsComponent = null;
3153
+ let articleCardsComponent = null;
3102
3154
  React__default.Children.map(children, (child) => {
3103
3155
  if (React__default.isValidElement(child) && isFunction(child.type)) {
3104
- const { productCard } = (child == null ? void 0 : child.props) || {};
3156
+ const { productCard, collectionCard, pageCard, blogCard, articleCard } = (child == null ? void 0 : child.props) || {};
3105
3157
  if (productCard && isFunction(productCard))
3106
3158
  productCardsComponent = productCard;
3159
+ if (collectionCard && isFunction(collectionCard))
3160
+ collectionCardsComponent = collectionCard;
3161
+ if (pageCard && isFunction(pageCard))
3162
+ pageCardsComponent = pageCard;
3163
+ if (blogCard && isFunction(blogCard))
3164
+ blogCardsComponent = blogCard;
3165
+ if (articleCard && isFunction(articleCard))
3166
+ articleCardsComponent = articleCard;
3107
3167
  }
3108
3168
  });
3109
3169
  const searchParams = typeof document !== "undefined" ? new URLSearchParams((_a = document == null ? void 0 : document.location) == null ? void 0 : _a.search) : null;
@@ -3563,10 +3623,18 @@ const SearchResultWidget = (props) => {
3563
3623
  params,
3564
3624
  isJsVersion,
3565
3625
  productCardsComponent,
3626
+ collectionCardsComponent,
3627
+ pageCardsComponent,
3628
+ blogCardsComponent,
3629
+ articleCardsComponent,
3566
3630
  onAfterAddToCart,
3567
3631
  onAfterAddWishlist,
3568
3632
  onAfterRemoveWishlist,
3569
3633
  onAfterRenderProduct,
3634
+ onAfterRenderCollection,
3635
+ onAfterRenderPage,
3636
+ onAfterRenderBlog,
3637
+ onAfterRenderArticle,
3570
3638
  setIsLoading,
3571
3639
  setKeyword,
3572
3640
  filterHorizontalSkeleton,
@@ -4255,7 +4323,22 @@ const ResultProduct = (props) => {
4255
4323
  };
4256
4324
  const ResultCategory = (props) => {
4257
4325
  var _a, _b, _c, _d;
4258
- const { keyword, clickedTabIndexId, clickedTabIndexName, setKeyword, searchResultContainerRef } = props || {};
4326
+ const {
4327
+ keyword,
4328
+ clickedTabIndexId,
4329
+ clickedTabIndexName,
4330
+ isJsVersion,
4331
+ collectionCardsComponent,
4332
+ pageCardsComponent,
4333
+ blogCardsComponent,
4334
+ articleCardsComponent,
4335
+ setKeyword,
4336
+ searchResultContainerRef,
4337
+ onAfterRenderCollection,
4338
+ onAfterRenderPage,
4339
+ onAfterRenderBlog,
4340
+ onAfterRenderArticle
4341
+ } = props || {};
4259
4342
  const [isFirstLoading, setIsFirstLoading] = React__default.useState(true);
4260
4343
  const [isLoading, setIsLoading] = React__default.useState(true);
4261
4344
  const [clickedSortId, setClickedSortId] = React__default.useState("");
@@ -4336,7 +4419,7 @@ const ResultCategory = (props) => {
4336
4419
  }
4337
4420
  ) });
4338
4421
  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" }) });
4339
- 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;
4422
+ const skeletonLoadingComponent = ((_a = String(clickedTabIndexId)) == null ? void 0 : _a.includes("collection")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.CollectionGrid, { count: 6 }) : ((_b = String(clickedTabIndexId)) == null ? void 0 : _b.includes("page")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.PageGrid, { count: 6 }) : ((_c = String(clickedTabIndexId)) == null ? void 0 : _c.includes("blog")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.BlogGrid, { count: 12 }) : ((_d = String(clickedTabIndexId)) == null ? void 0 : _d.includes("article")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ArticleGrid, { count: 12 }) : null;
4340
4423
  const ProvideElementFirstLoading = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-data-category-wrapper", children: [
4341
4424
  searchKeywordComponent,
4342
4425
  summaryTextSkeleton,
@@ -4349,27 +4432,13 @@ const ResultCategory = (props) => {
4349
4432
  ] });
4350
4433
  const ProvideElement = (elementProps) => {
4351
4434
  var _a2, _b2, _c2, _d2;
4352
- return ((_a2 = String(clickedTabIndexId)) == null ? void 0 : _a2.includes("collection")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionGrid, { ...elementProps }) : ((_b2 = String(clickedTabIndexId)) == null ? void 0 : _b2.includes("page")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(PageGrid, { ...elementProps }) : ((_c2 = String(clickedTabIndexId)) == null ? void 0 : _c2.includes("blog")) || ((_d2 = String(clickedTabIndexId)) == null ? void 0 : _d2.includes("article")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlogGrid, { ...elementProps }) : null;
4435
+ return ((_a2 = String(clickedTabIndexId)) == null ? void 0 : _a2.includes("collection")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionGrid, { cards: collectionCardsComponent, onAfterRenderCollection, ...elementProps }) : ((_b2 = String(clickedTabIndexId)) == null ? void 0 : _b2.includes("page")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(PageGrid, { cards: pageCardsComponent, onAfterRenderPage, ...elementProps }) : ((_c2 = String(clickedTabIndexId)) == null ? void 0 : _c2.includes("blog")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlogGrid, { cards: blogCardsComponent, onAfterRenderBlog, ...elementProps }) : ((_d2 = String(clickedTabIndexId)) == null ? void 0 : _d2.includes("article")) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ArticleGrid, { cards: articleCardsComponent, onAfterRenderArticle, ...elementProps }) : null;
4353
4436
  };
4354
4437
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", children: isFirstLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElementFirstLoading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-category-wrapper", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElementLoading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
4355
4438
  searchKeywordComponent,
4356
4439
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data-summary", children: summaryText }),
4357
4440
  (searchResult == null ? void 0 : searchResult.length) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
4358
- /* @__PURE__ */ jsxRuntimeExports.jsx(
4359
- ProvideElement,
4360
- {
4361
- data: searchResult.map((item) => {
4362
- const { id, title, url } = item;
4363
- return {
4364
- id,
4365
- title,
4366
- description: `${title}${clickedTabIndexName ? ` ${clickedTabIndexName.toLowerCase()}` : ""}`,
4367
- url,
4368
- image: ""
4369
- };
4370
- })
4371
- }
4372
- ),
4441
+ /* @__PURE__ */ jsxRuntimeExports.jsx(ProvideElement, { data: searchResult, isComponentJsVersion: isJsVersion }),
4373
4442
  /* @__PURE__ */ jsxRuntimeExports.jsx(Pagination, { currentPage, totalPage, totalResult: totalSearchResult, onChange: (page) => handlePageChange(page) })
4374
4443
  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ResultEmpty, {})
4375
4444
  ] }) }) });
@@ -4557,7 +4626,7 @@ const SearchWidget = (props) => {
4557
4626
  )
4558
4627
  ] }, index)) }),
4559
4628
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-product", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoading.ProductGrid, { count: 6, type: "small" }) })
4560
- ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { isLoading, withCorner: false, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
4629
+ ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { isLoading, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
4561
4630
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex", children: [
4562
4631
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__widget-search-form-result-flex-item-other", children: [
4563
4632
  Object.keys(suggestionSettings).length && ((_b = (_a = suggestionSettings[suggestionIndex]) == null ? void 0 : _a.keywords) == null ? void 0 : _b.active) && ((_e = (_d = (_c = suggestionSettings[suggestionIndex]) == null ? void 0 : _c.keywords) == null ? void 0 : _d.list) == null ? void 0 : _e.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(