@lanaco/lnc-react-ui 4.0.162 → 4.0.164

package/dist/BlogExploreSection.js

@@ -1,19 +1,21 @@
-import { jsxs as l, jsx as n, Fragment as L } from "react/jsx-runtime";
-import { forwardRef as j, Fragment as B } from "react";
-import { P as e } from "./index-CblbdqjE.js";
-import { p as O, s as P } from "./utils-BdsZgOUE.js";
-import ee from "./TextInput.js";
-import k from "./Icon.js";
-import ne from "./Link.js";
-import F from "./DropdownMenu.js";
+import { jsxs as o, jsx as t, Fragment as j } from "react/jsx-runtime";
+import { forwardRef as V, useRef as ce, useState as le, useEffect as se, Fragment as de } from "react";
+import { P as n } from "./index-CblbdqjE.js";
+import { u as me } from "./useDetectMobile-Bkvj0VMa.js";
+import { p as he, s as fe } from "./utils-BdsZgOUE.js";
+import _e from "./TextInput.js";
+import C from "./Icon.js";
+import ue from "./Link.js";
+import M from "./IconButton.js";
+import W from "./DropdownMenu.js";
 import E from "./DropdownItem.js";
-import { F as te } from "./tag-cRMfP-SZ.js";
-import re from "./BlogProductCardsSection.js";
-import { s as M } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as ie } from "./index-CF3HhgvN.js";
-import A from "./BlogListSection.js";
-import { M as ae } from "./consts-BuFChS64.js";
-const ce = M.div`
+import { F as ge } from "./tag-BtS5lWJ0.js";
+import pe from "./BlogProductCardsSection.js";
+import { s as R } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { P as ve } from "./index-CF3HhgvN.js";
+import F from "./BlogListSection.js";
+import { M as xe } from "./consts-BuFChS64.js";
+const ye = R.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -94,93 +96,93 @@ const ce = M.div`
       }
     }
   }
-`, oe = j(
+`, be = V(
   ({
-    perPageOptions: o = [
+    perPageOptions: d = [
       { code: 10, name: "Show 10 items" },
       { code: 25, name: "Show 25 items" },
       { code: 50, name: "Show 50 items" }
     ],
-    perPage: f,
-    handlePerPage: g = () => {
+    perPage: u,
+    handlePerPage: v = () => {
     },
     page: c = 1,
-    handlePage: s = () => {
+    handlePage: m = () => {
     },
-    totalPage: t
-  }, m) => {
-    var _, d;
-    const h = () => {
-      c > 1 && (s == null || s(c - 1));
-    }, p = () => {
-      c < t && (s == null || s(c + 1));
+    totalPage: r
+  }, _) => {
+    var p, h;
+    const g = () => {
+      c > 1 && (m == null || m(c - 1));
     }, x = () => {
+      c < r && (m == null || m(c + 1));
+    }, b = () => {
       const i = [];
-      if (t <= 7)
-        for (let a = 1; a <= t; a++)
+      if (r <= 7)
+        for (let a = 1; a <= r; a++)
           i.push(a);
       else
-        c <= 3 ? i.push(1, 2, 3, "...", t) : c >= t - 2 ? i.push(1, "...", t - 2, t - 1, t) : i.push(1, 2, 3, "...", t);
-      return i == null ? void 0 : i.map((a, v) => a === "..." ? /* @__PURE__ */ n(
+        c <= 3 ? i.push(1, 2, 3, "...", r) : c >= r - 2 ? i.push(1, "...", r - 2, r - 1, r) : i.push(1, 2, 3, "...", r);
+      return i == null ? void 0 : i.map((a, y) => a === "..." ? /* @__PURE__ */ t(
         "div",
         {
           className: "pagination__page ellipsis",
           children: a
         },
-        `pagination-ellipsis__${v}`
-      ) : /* @__PURE__ */ n(
+        `pagination-ellipsis__${y}`
+      ) : /* @__PURE__ */ t(
         "div",
         {
-          onClick: () => s(a),
+          onClick: () => m(a),
           className: `pagination__page ${c === a ? "active" : ""}`,
           children: a
         },
-        `pagination-page__${v}`
+        `pagination-page__${y}`
       ));
     };
-    return /* @__PURE__ */ l(ce, { className: "pagination", children: [
-      /* @__PURE__ */ n(
-        F,
+    return /* @__PURE__ */ o(ye, { className: "pagination", children: [
+      /* @__PURE__ */ t(
+        W,
         {
           color: "neutral",
-          control: ((_ = o == null ? void 0 : o.find((i) => (i == null ? void 0 : i.code) === f)) == null ? void 0 : _.name) || ((d = o[0]) == null ? void 0 : d.name),
+          control: ((p = d == null ? void 0 : d.find((i) => (i == null ? void 0 : i.code) === u)) == null ? void 0 : p.name) || ((h = d[0]) == null ? void 0 : h.name),
           placement: "bottom",
           zIndex: 1001,
           className: "pagination__per-page",
-          children: o == null ? void 0 : o.map((i, a) => /* @__PURE__ */ n(
+          children: d == null ? void 0 : d.map((i, a) => /* @__PURE__ */ t(
             E,
             {
-              active: (i == null ? void 0 : i.code) === (f == null ? void 0 : f.code),
+              active: (i == null ? void 0 : i.code) === (u == null ? void 0 : u.code),
               className: "sort-by__item",
-              onClick: () => g(i),
+              onClick: () => v(i),
               children: i == null ? void 0 : i.name
             },
             `blog-epxlore-section-per-page-option__${a + 1}`
           ))
         }
       ),
-      /* @__PURE__ */ l("div", { className: "pagination__pages", children: [
-        /* @__PURE__ */ n(
+      /* @__PURE__ */ o("div", { className: "pagination__pages", children: [
+        /* @__PURE__ */ t(
           "div",
           {
             className: `pagination__page ${c === 1 ? "disabled" : ""}`,
-            onClick: h,
-            children: /* @__PURE__ */ n(k, { icon: " mng-lnc-chevron--left" })
+            onClick: g,
+            children: /* @__PURE__ */ t(C, { icon: " mng-lnc-chevron--left" })
           }
         ),
-        x(),
-        /* @__PURE__ */ n(
+        b(),
+        /* @__PURE__ */ t(
           "div",
           {
-            className: `pagination__page ${c === t ? "disabled" : ""}`,
-            onClick: p,
-            children: /* @__PURE__ */ n(k, { icon: " mng-lnc-chevron--right" })
+            className: `pagination__page ${c === r ? "disabled" : ""}`,
+            onClick: x,
+            children: /* @__PURE__ */ t(C, { icon: " mng-lnc-chevron--right" })
           }
         )
       ] })
     ] });
   }
-), le = M.div`
+), we = R.div`
   display: flex;
   align-items: flex-start;
   gap: 2rem;
@@ -197,18 +199,44 @@ const ce = M.div`
     flex-direction: column;
     align-items: flex-start;
     gap: 1.5rem;
+    max-width: 50rem;
 
     border-right: 1px solid var(--gray-200, #dddfe4);
     padding-right: 2rem;
 
     & .section__tags {
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
+      width: 100%;
+      overflow-x: hidden;
+      white-space: nowrap;
     }
 
     & .pagination {
       padding: 1.25rem 0;
     }
 
+    & .main-content__heading {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      & .main-content__tags-nav {
+        display: flex;
+        gap: 0.25rem;
+
+        & .main-content__tag-nav {
+          &:not(:disabled) {
+            color: var(--gray-950, #14161a);
+            background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+
+            &:hover {
+              background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+            }
+          }
+        }
+      }
+    }
+
     & .main-content__title {
       color: var(--gray-950, #14161a);
       font-size: 1.5rem;
@@ -219,7 +247,11 @@ const ce = M.div`
 
     & .tags__item {
       &:not(.active) {
-        background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
+        background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+
+        &:hover {
+          background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
+        }
       }
     }
 
@@ -356,7 +388,7 @@ const ce = M.div`
             font-style: normal;
             font-weight: 500;
             line-height: 1.25rem;
-            ${O(2)}
+            ${he(2)}
           }
 
           & .item__description {
@@ -371,16 +403,19 @@ const ce = M.div`
     }
   }
 
-  @media (max-width: ${ae + "px"}) {
+  @media (max-width: ${xe + "px"}) {
     flex-direction: column;
 
     & .landing__main-content {
       width: 100%;
+      max-width: 100%;
       padding-right: 0;
       border-right: none;
 
       & .section__tags {
-        flex-wrap: nowrap;
+        width: 100%;
+        overflow-x: auto;
+        white-space: nowrap;
       }
 
       & .main-content__actions {
@@ -388,6 +423,8 @@ const ce = M.div`
       }
 
       & .main-content__items {
+        width: 100%;
+
         & .main-content__divider {
           display: none;
         }
@@ -418,86 +455,142 @@ const ce = M.div`
       display: none;
     }
   }
-`, se = j(
+`, Ne = V(
   ({
-    mainTitle: o,
-    sideTitle: f,
-    tags: g,
+    mainTitle: d,
+    sideTitle: u,
+    tags: v,
     selectedTag: c,
-    handleSelectTag: s = () => {
+    handleSelectTag: m = () => {
     },
-    blogs: t,
-    miniBlogs: m,
-    products: h,
-    blogsLoading: p = !1,
-    productsLoading: x = !1,
-    sortingOptions: _,
-    sortBy: d,
+    blogs: r,
+    miniBlogs: _,
+    products: g,
+    blogsLoading: x = !1,
+    productsLoading: b = !1,
+    sortingOptions: p,
+    sortBy: h,
     handleSortBy: i = () => {
     },
     allTagText: a = "All",
-    searchPlaceholderText: v = "Search blogs",
-    timeToReadText: T = "{0} min read",
-    getBlogImageUrl: y = () => {
+    searchPlaceholderText: y = "Search blogs",
+    timeToReadText: L = "{0} min read",
+    getBlogImageUrl: w = () => {
     },
-    handleSelectBlog: w = () => {
+    handleSelectBlog: N = () => {
     },
-    handleSelectBlogTag: C = () => {
+    handleSelectBlogTag: A = () => {
     },
-    handleShareBlog: I = () => {
+    handleShareBlog: z = () => {
     },
     // handleBookmarkBlog = () => {},
-    showAllButtonLink: D,
-    showAllButtonText: R = "Show all products",
-    viewAllButtonText: U = "View all (11)",
-    viewAllButtonLink: de,
-    handleViewAll: V = () => {
+    showAllButtonLink: U,
+    showAllButtonText: q = "Show all products",
+    viewAllButtonText: H = "View all (11)",
+    // viewAllButtonLink,
+    handleViewAll: X = () => {
     },
-    handleShowAll: q = () => {
+    handleShowAll: Z = () => {
     },
-    handleSelectProduct: H = () => {
+    handleSelectProduct: G = () => {
     },
-    getProductImageUrl: W = () => {
+    getProductImageUrl: J = () => {
     },
-    page: X,
-    handlePage: b = () => {
+    page: K,
+    handlePage: k = () => {
     },
-    perPage: Z,
-    handlePerPage: G = () => {
+    perPage: Q,
+    handlePerPage: Y = () => {
     },
-    totalPage: N,
-    perPageOptions: J,
-    handleSearch: K = () => {
+    totalPage: S,
+    perPageOptions: B,
+    handleSearch: O = () => {
     },
     onBookmark: $ = () => {
     },
-    bookmarkComponent: z = /* @__PURE__ */ n(L, { children: " " }),
-    componentName: S
-  }, Q) => {
-    const Y = (r) => {
-      document.getElementById("landing__container").scrollIntoView({ behavior: "smooth", block: "start" }), b == null || b(r);
+    bookmarkComponent: I = /* @__PURE__ */ t(j, {}),
+    componentName: T
+  }, P) => {
+    const ee = (e) => {
+      document.getElementById("landing__container").scrollIntoView({ behavior: "smooth", block: "start" }), k == null || k(e);
+    }, l = ce(null), ne = me(), [f, te] = le({
+      arrowsVisible: !1,
+      leftArrowDisabled: !1,
+      rightArrowDisabled: !1
+    });
+    se(() => {
+      const e = l == null ? void 0 : l.current;
+      if (!e) return;
+      const s = () => {
+        const ae = e.scrollWidth - e.clientWidth;
+        te((oe) => ({
+          ...oe,
+          arrowsVisible: e.clientWidth < e.scrollWidth,
+          leftArrowDisabled: e.scrollLeft <= 0,
+          rightArrowDisabled: e.scrollLeft >= ae
+        }));
+      }, D = new ResizeObserver(s);
+      return D.observe(e), s(), e.addEventListener("scroll", s), () => {
+        D.disconnect(), e.removeEventListener("scroll", s);
+      };
+    }, []);
+    const re = () => {
+      var e;
+      (e = l == null ? void 0 : l.current) == null || e.scrollBy({ left: 100, behavior: "smooth" });
+    }, ie = () => {
+      var e;
+      (e = l == null ? void 0 : l.current) == null || e.scrollBy({ left: -100, behavior: "smooth" });
     };
-    return /* @__PURE__ */ l(le, { ref: Q, id: "landing__container", children: [
-      /* @__PURE__ */ l("div", { className: "landing__main-content", children: [
-        o && /* @__PURE__ */ n("div", { className: "main-content__title", children: o }),
-        g && /* @__PURE__ */ n(
-          te,
+    return /* @__PURE__ */ o(we, { ref: P, id: "landing__container", children: [
+      /* @__PURE__ */ o("div", { className: "landing__main-content", children: [
+        /* @__PURE__ */ o("div", { className: "main-content__heading", children: [
+          /* @__PURE__ */ t("div", { className: "main-content__title", children: d }),
+          !ne && (f == null ? void 0 : f.arrowsVisible) && /* @__PURE__ */ o("div", { className: "main-content__tags-nav", children: [
+            /* @__PURE__ */ t(
+              M,
+              {
+                icon: "chevron-left",
+                borderRadius: "curved",
+                btnType: "tinted",
+                color: "neutral",
+                disabled: f == null ? void 0 : f.leftArrowDisabled,
+                className: "main-content__tag-nav",
+                onClick: ie
+              }
+            ),
+            /* @__PURE__ */ t(
+              M,
+              {
+                icon: "chevron-right",
+                borderRadius: "curved",
+                btnType: "tinted",
+                color: "neutral",
+                disabled: f == null ? void 0 : f.rightArrowDisabled,
+                className: "main-content__tag-nav",
+                onClick: re
+              }
+            )
+          ] })
+        ] }),
+        v && /* @__PURE__ */ t(
+          ge,
           {
-            tags: g,
+            ref: l,
+            tags: v,
             allTagText: a,
             selectedTagCode: c,
-            onSelectTag: s
+            onSelectTag: m
           }
         ),
-        /* @__PURE__ */ l("div", { className: "main-content__actions", children: [
-          /* @__PURE__ */ n(
-            ee,
+        /* @__PURE__ */ o("div", { className: "main-content__actions", children: [
+          /* @__PURE__ */ t(
+            _e,
             {
               className: "main-content__search",
-              placeholder: v,
+              placeholder: y,
               debounceTime: 200,
-              prefix: /* @__PURE__ */ n(
-                k,
+              prefix: /* @__PURE__ */ t(
+                C,
                 {
                   icon: " mng-lnc-search",
                   sizeInUnits: "1.25rem",
@@ -505,155 +598,155 @@ const ce = M.div`
                 }
               ),
               color: "neutral",
-              onChange: K
+              onChange: O
             }
           ),
-          /* @__PURE__ */ n(
-            F,
+          /* @__PURE__ */ t(
+            W,
             {
               color: "neutral",
-              control: d == null ? void 0 : d.name,
+              control: h == null ? void 0 : h.name,
               zIndex: 1001,
               className: "main-content__sort-by",
-              children: _ == null ? void 0 : _.map((r, u) => /* @__PURE__ */ n(
+              children: p == null ? void 0 : p.map((e, s) => /* @__PURE__ */ t(
                 E,
                 {
-                  active: (r == null ? void 0 : r.code) === (d == null ? void 0 : d.code),
+                  active: (e == null ? void 0 : e.code) === (h == null ? void 0 : h.code),
                   className: "sort-by__item",
-                  onClick: () => i(r),
-                  children: r == null ? void 0 : r.name
+                  onClick: () => i(e),
+                  children: e == null ? void 0 : e.name
                 },
-                `blog-epxlore-section-sorting-option__${u + 1}`
+                `blog-epxlore-section-sorting-option__${s + 1}`
               ))
             }
           )
         ] }),
-        /* @__PURE__ */ l("div", { className: "main-content__items", children: [
-          t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ n(
-            A,
+        /* @__PURE__ */ o("div", { className: "main-content__items", children: [
+          r && (r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ t(
+            F,
             {
-              timeToReadText: T,
-              items: t == null ? void 0 : t.slice(0, 5),
-              isLoading: p,
-              getImage: y,
-              onSelectCard: w,
-              onSelectOption: C,
-              onShare: I,
+              timeToReadText: L,
+              items: r == null ? void 0 : r.slice(0, 5),
+              isLoading: x,
+              getImage: w,
+              onSelectCard: N,
+              onSelectOption: A,
+              onShare: z,
               onBookmark: $,
-              bookmarkComponent: z,
-              componentName: S
+              bookmarkComponent: I,
+              componentName: T
             }
           ),
-          /* @__PURE__ */ n("div", { className: "main-content__divider" }),
-          h && (h == null ? void 0 : h.length) > 0 && /* @__PURE__ */ n(
-            re,
+          /* @__PURE__ */ t("div", { className: "main-content__divider" }),
+          g && (g == null ? void 0 : g.length) > 0 && /* @__PURE__ */ t(
+            pe,
             {
-              buttonText: R,
-              buttonLink: D,
-              onButtonAction: q,
-              onSelectCard: H,
-              items: h,
-              isLoading: x,
-              getImage: W,
+              buttonText: q,
+              buttonLink: U,
+              onButtonAction: Z,
+              onSelectCard: G,
+              items: g,
+              isLoading: b,
+              getImage: J,
               isHighlight: !0,
-              componentName: S
+              componentName: T
             }
           ),
-          /* @__PURE__ */ n("div", { className: "main-content__divider" }),
-          t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ n(
-            A,
+          /* @__PURE__ */ t("div", { className: "main-content__divider" }),
+          r && (r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ t(
+            F,
             {
-              timeToReadText: T,
-              items: t == null ? void 0 : t.slice(5),
-              isLoading: p,
-              getImage: y,
-              onSelectCard: w,
-              onSelectOption: C,
-              onShare: I,
+              timeToReadText: L,
+              items: r == null ? void 0 : r.slice(5),
+              isLoading: x,
+              getImage: w,
+              onSelectCard: N,
+              onSelectOption: A,
+              onShare: z,
               onBookmark: $,
-              bookmarkComponent: z,
-              componentName: S
+              bookmarkComponent: I,
+              componentName: T
             }
           )
         ] }),
-        N && N > 1 && /* @__PURE__ */ n(
-          oe,
+        S && S > 1 && /* @__PURE__ */ t(
+          be,
           {
-            perPageOptions: J,
-            perPage: Z,
-            handlePerPage: G,
-            page: X,
-            handlePage: Y,
-            totalPage: N
+            perPageOptions: B,
+            perPage: Q,
+            handlePerPage: Y,
+            page: K,
+            handlePage: ee,
+            totalPage: S
           }
         )
       ] }),
-      /* @__PURE__ */ l("div", { className: "landing__side-content", children: [
-        f && /* @__PURE__ */ n("div", { className: "side-content__title", children: f }),
-        m && (m == null ? void 0 : m.length) > 0 && /* @__PURE__ */ l(L, { children: [
-          /* @__PURE__ */ n("div", { className: "side-content__items", children: m == null ? void 0 : m.map((r, u) => /* @__PURE__ */ n(B, { children: /* @__PURE__ */ l(
+      /* @__PURE__ */ o("div", { className: "landing__side-content", children: [
+        u && /* @__PURE__ */ t("div", { className: "side-content__title", children: u }),
+        _ && (_ == null ? void 0 : _.length) > 0 && /* @__PURE__ */ o(j, { children: [
+          /* @__PURE__ */ t("div", { className: "side-content__items", children: _ == null ? void 0 : _.map((e, s) => /* @__PURE__ */ t(de, { children: /* @__PURE__ */ o(
             "div",
             {
               className: "side-content__item",
-              onClick: () => w(r),
+              onClick: () => N(e),
               children: [
-                /* @__PURE__ */ n(
-                  ie,
+                /* @__PURE__ */ t(
+                  ve,
                   {
-                    src: y(r == null ? void 0 : r.imageUrl, r == null ? void 0 : r.uuid) || null,
-                    alt: `Mini blog ${u + 1}`,
+                    src: w(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+                    alt: `Mini blog ${s + 1}`,
                     className: "item__image"
                   }
                 ),
-                /* @__PURE__ */ l("div", { className: "item__content", children: [
-                  /* @__PURE__ */ n("div", { className: "item__title", children: r == null ? void 0 : r.title }),
-                  /* @__PURE__ */ n("div", { className: "item__description", children: P(r == null ? void 0 : r.publishedAt) })
+                /* @__PURE__ */ o("div", { className: "item__content", children: [
+                  /* @__PURE__ */ t("div", { className: "item__title", children: e == null ? void 0 : e.title }),
+                  /* @__PURE__ */ t("div", { className: "item__description", children: fe(e == null ? void 0 : e.publishedAt) })
                 ] })
               ]
             }
-          ) }, `mini_blg_${u}`)) }),
-          /* @__PURE__ */ n(ne, { onClick: V, className: "side-content__link", children: U })
+          ) }, `mini_blg_${s}`)) }),
+          /* @__PURE__ */ t(ue, { onClick: X, className: "side-content__link", children: H })
         ] })
       ] })
     ] });
   }
 );
-se.propTypes = {
-  mainTitle: e.string,
-  sideTitle: e.string,
-  tags: e.array,
-  selectedTag: e.any,
-  handleSelectTag: e.func,
-  blogs: e.array,
-  miniBlogs: e.array,
-  products: e.array,
-  blogsLoading: e.bool,
-  productsLoading: e.bool,
-  sortingOptions: e.array,
-  sortBy: e.any,
-  handleSortBy: e.func,
-  allTagText: e.string,
-  searchPlaceholderText: e.string,
-  timeToReadText: e.string,
-  getBlogImageUrl: e.func,
-  handleSelectBlog: e.func,
-  handleSelectBlogTag: e.func,
-  handleShareBlog: e.func,
-  handleBookmarkBlog: e.func,
-  showAllButtonLink: e.string,
-  showAllButtonText: e.string,
-  viewAllButtonText: e.string,
-  handleShowAll: e.func,
-  handleSelectProduct: e.func,
-  getProductImageUrl: e.func,
-  page: e.number,
-  handlePage: e.func,
-  perPage: e.any,
-  handlePerPage: e.func,
-  totalPage: e.number,
-  perPageOptions: e.array,
-  handleSearch: e.func
+Ne.propTypes = {
+  mainTitle: n.string,
+  sideTitle: n.string,
+  tags: n.array,
+  selectedTag: n.any,
+  handleSelectTag: n.func,
+  blogs: n.array,
+  miniBlogs: n.array,
+  products: n.array,
+  blogsLoading: n.bool,
+  productsLoading: n.bool,
+  sortingOptions: n.array,
+  sortBy: n.any,
+  handleSortBy: n.func,
+  allTagText: n.string,
+  searchPlaceholderText: n.string,
+  timeToReadText: n.string,
+  getBlogImageUrl: n.func,
+  handleSelectBlog: n.func,
+  handleSelectBlogTag: n.func,
+  handleShareBlog: n.func,
+  handleBookmarkBlog: n.func,
+  showAllButtonLink: n.string,
+  showAllButtonText: n.string,
+  viewAllButtonText: n.string,
+  handleShowAll: n.func,
+  handleSelectProduct: n.func,
+  getProductImageUrl: n.func,
+  page: n.number,
+  handlePage: n.func,
+  perPage: n.any,
+  handlePerPage: n.func,
+  totalPage: n.number,
+  perPageOptions: n.array,
+  handleSearch: n.func
 };
 export {
-  se as default
+  Ne as default
 };