@lanaco/lnc-react-ui 4.0.124 → 4.0.126

package/dist/BlogExploreSection.js

@@ -0,0 +1,634 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { P as e } from "./index-CblbdqjE.js";
+import { s as J } from "./utils-BbgAIA9N.js";
+import K from "./TextInput.js";
+import b from "./Icon.js";
+import Q from "./Link.js";
+import z from "./DropdownMenu.js";
+import I from "./DropdownItem.js";
+import { F as W } from "./tag-D6in2BG6.js";
+import Y from "./BlogProductCardsSection.js";
+import { s as L } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import T from "./BlogListSection.js";
+import { M as B } from "./consts-BuFChS64.js";
+const O = L.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+
+  & .pagination__per-page {
+    & button {
+      border-radius: 8px;
+      border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+      background: transparent;
+      color: var(---gray-950, #14161a);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.25rem;
+    }
+  }
+
+  & .pagination__pages {
+    display: flex;
+    align-items: center;
+    border-radius: 0.375rem;
+
+    & .pagination__page {
+      display: flex;
+      width: 2.5rem;
+      height: 2.25rem;
+      padding: 0.5rem 1rem;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      border-top: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+      border-right: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+      border-bottom: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+      color: var(--gray-600, #676e79);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.25rem;
+
+      &:hover {
+        cursor: pointer;
+        background: var(--gray-200, #e4e9f0);
+      }
+
+      &.active {
+        border: 1px solid var(--teal-500, #009ea8);
+        background: var(--teal-50, #f4fdff);
+        color: var(--teal-500, #009ea8);
+      }
+
+      &.disabled {
+        cursor: unset;
+        border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+        opacity: 0.4;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+
+      &.ellipsis {
+        cursor: unset;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+
+      &:first-of-type {
+        border-radius: 0.5rem 0 0 0.5rem;
+        border-left: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
+      }
+
+      &:last-of-type {
+        border-radius: 0 0.5rem 0.5rem 0;
+      }
+    }
+  }
+`, P = C(
+  ({
+    perPageOptions: s = [
+      { code: 10, name: "Show 10 items" },
+      { code: 25, name: "Show 25 items" },
+      { code: 50, name: "Show 50 items" }
+    ],
+    perPage: d,
+    handlePerPage: h = () => {
+    },
+    page: o = 1,
+    handlePage: c = () => {
+    },
+    total: i
+  }, f) => {
+    var m;
+    const p = () => {
+      o > 1 && (c == null || c(o - 1));
+    }, _ = () => {
+      o < i && (c == null || c(o + 1));
+    }, u = () => {
+      const t = [];
+      if (i <= 7)
+        for (let a = 1; a <= i; a++)
+          t.push(a);
+      else
+        o <= 3 ? t.push(1, 2, 3, "...", i) : o >= i - 2 ? t.push(1, "...", i - 2, i - 1, i) : t.push(1, 2, 3, "...", i);
+      return t == null ? void 0 : t.map((a, g) => a === "..." ? /* @__PURE__ */ n(
+        "div",
+        {
+          className: "pagination__page ellipsis",
+          children: a
+        },
+        `pagination-ellipsis__${g}`
+      ) : /* @__PURE__ */ n(
+        "div",
+        {
+          onClick: () => c(a),
+          className: `pagination__page ${o === a ? "active" : ""}`,
+          children: a
+        },
+        `pagination-page__${g}`
+      ));
+    };
+    return /* @__PURE__ */ l(O, { className: "pagination", children: [
+      /* @__PURE__ */ n(
+        z,
+        {
+          color: "neutral",
+          control: d || ((m = s[0]) == null ? void 0 : m.name),
+          placement: "bottom",
+          zIndex: 1001,
+          className: "pagination__per-page",
+          children: s == null ? void 0 : s.map((t, a) => /* @__PURE__ */ n(
+            I,
+            {
+              active: (t == null ? void 0 : t.code) === (d == null ? void 0 : d.code),
+              className: "sort-by__item",
+              onClick: () => h(t),
+              children: t == null ? void 0 : t.name
+            },
+            `blog-epxlore-section-per-page-option__${a + 1}`
+          ))
+        }
+      ),
+      /* @__PURE__ */ l("div", { className: "pagination__pages", children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `pagination__page ${o === 1 ? "disabled" : ""}`,
+            onClick: p,
+            children: /* @__PURE__ */ n(b, { icon: " mng-lnc-chevron--left" })
+          }
+        ),
+        u(),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `pagination__page ${o === i ? "disabled" : ""}`,
+            onClick: _,
+            children: /* @__PURE__ */ n(b, { icon: " mng-lnc-chevron--right" })
+          }
+        )
+      ] })
+    ] });
+  }
+), ee = L.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 2rem;
+  align-self: stretch;
+
+  & button {
+    &:focus {
+      outline: none;
+    }
+  }
+
+  & .landing__main-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+
+    border-right: 1px solid var(--gray-200, #dddfe4);
+    padding-right: 2rem;
+
+    & .pagination {
+      padding: 1.25rem 0;
+    }
+
+    & .main-content__title {
+      color: var(--gray-950, #14161a);
+      font-size: 1.5rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 2rem;
+    }
+
+    & .tags__item {
+      &:not(.active) {
+        background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
+      }
+    }
+
+    & .main-content__items {
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+
+      & .main-content__divider {
+        content: "";
+        display: block;
+        height: 1px;
+        width: 100%;
+        background: var(--gray-200, #dddfe4);
+      }
+
+      & .blog-card-item {
+        background: transparent;
+        border: none;
+        padding: 0;
+      }
+    }
+
+    & .main-content__actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      align-self: stretch;
+      width: 100%;
+
+      & .main-content__search {
+        border-radius: 999px;
+        height: 2.5rem;
+        min-height: 2.5rem;
+        max-width: 23.75rem;
+        width: 100%;
+
+        border: 1px solid var(--gray-200, #e4e9f0);
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        outline: none;
+
+        & input::placeholder {
+          color: var(--gray-500, #7a8594);
+          font-size: 0.875rem;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 1.25rem;
+          letter-spacing: 0.0156rem;
+        }
+
+        & .main-content__search-prefix {
+          color: var(--gray-500, #7a8594);
+        }
+      }
+
+      & .main-content__sort-by {
+        & button {
+          border-radius: 999px;
+          color: var(--gray-950, #14161a);
+          background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
+          font-size: 0.875rem;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 1.25rem;
+          letter-spacing: -0.0056rem;
+        }
+      }
+    }
+  }
+
+  & .landing__side-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+    align-self: stretch;
+
+    & .side-content__title {
+      color: var(--gray-950, #14161a);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 1.5rem;
+    }
+
+    & .side-content__link {
+      color: var(--gray-950, #14161a);
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1rem;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+
+    & .side-content__items {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1.25rem;
+      align-self: stretch;
+
+      & .side-content__item {
+        display: flex;
+        align-items: flex-start;
+        gap: 1rem;
+        align-self: stretch;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        & .item__image {
+          width: 100%;
+          max-width: 6rem;
+          height: 100%;
+          max-height: 3.75rem;
+          object-fit: cover;
+          border-radius: 0.375rem;
+        }
+
+        & .item__content {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.25rem;
+
+          & .item__title {
+            color: var(--gray-950, #14161a);
+            font-size: 0.875rem;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 1.25rem;
+          }
+
+          & .item__description {
+            color: var(--gray-600, #676e79);
+            font-size: 0.75rem;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: ${B + "px"}) {
+    flex-direction: column;
+
+    & .landing__main-content {
+      width: 100%;
+      padding-right: 0;
+      border-right: none;
+
+      & .main-content__actions {
+        gap: 0.5rem;
+      }
+
+      & .main-content__items {
+        & .main-content__divider {
+          display: none;
+        }
+
+        & .separated {
+          gap: 1.25rem;
+
+          & > div:not(:last-of-type)::after {
+            display: none;
+          }
+        }
+
+        & .blog-product-cards-section {
+          border-radius: 0;
+        }
+      }
+
+      & .pagination {
+        justify-content: center;
+
+        & .pagination__per-page {
+          display: none;
+        }
+      }
+    }
+
+    & .landing__side-content {
+      display: none;
+    }
+  }
+`, ne = C(
+  ({
+    mainTitle: s,
+    sideTitle: d,
+    tags: h,
+    selectedTag: o,
+    handleSelectTag: c = () => {
+    },
+    blogs: i,
+    miniBlogs: f,
+    products: p,
+    blogsLoading: _ = !1,
+    productsLoading: u = !1,
+    sortingOptions: m,
+    sortBy: t,
+    handleSortBy: a = () => {
+    },
+    allTagText: g = "All",
+    searchPlaceholderText: $ = "Search blogs",
+    timeToReadText: w = "{0} min read",
+    getBlogImageUrl: v = () => {
+    },
+    handleSelectBlog: x = () => {
+    },
+    handleSelectBlogTag: N = () => {
+    },
+    handleShareBlog: k = () => {
+    },
+    handleBookmarkBlog: S = () => {
+    },
+    showAllButtonLink: A,
+    showAllButtonText: j = "Show all products",
+    viewAllButtonText: M = "View all (11)",
+    viewAllButtonLink: te,
+    handleViewAll: D = () => {
+    },
+    handleShowAll: E = () => {
+    },
+    handleSelectProduct: F = () => {
+    },
+    getProductImageUrl: U = () => {
+    },
+    page: q,
+    handlePage: H = () => {
+    },
+    perPage: R,
+    handlePerPage: V = () => {
+    },
+    total: X,
+    perPageOptions: Z,
+    handleSearch: G = () => {
+    }
+  }, re) => /* @__PURE__ */ l(ee, { children: [
+    /* @__PURE__ */ l("div", { className: "landing__main-content", children: [
+      /* @__PURE__ */ n("div", { className: "main-content__title", children: s }),
+      h && /* @__PURE__ */ n(
+        W,
+        {
+          tags: h,
+          allTagText: g,
+          selectedTag: o,
+          onSelectTag: c
+        }
+      ),
+      /* @__PURE__ */ l("div", { className: "main-content__actions", children: [
+        /* @__PURE__ */ n(
+          K,
+          {
+            className: "main-content__search",
+            placeholder: $,
+            debounceTime: 200,
+            prefix: /* @__PURE__ */ n(
+              b,
+              {
+                icon: " mng-lnc-search",
+                sizeInUnits: "1.25rem",
+                className: "main-content__search-prefix"
+              }
+            ),
+            color: "neutral",
+            onChange: G
+          }
+        ),
+        /* @__PURE__ */ n(
+          z,
+          {
+            color: "neutral",
+            control: t == null ? void 0 : t.name,
+            zIndex: 1001,
+            className: "main-content__sort-by",
+            children: m == null ? void 0 : m.map((r, y) => /* @__PURE__ */ n(
+              I,
+              {
+                active: (r == null ? void 0 : r.code) === (t == null ? void 0 : t.code),
+                className: "sort-by__item",
+                onClick: () => a(r),
+                children: r == null ? void 0 : r.name
+              },
+              `blog-epxlore-section-sorting-option__${y + 1}`
+            ))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l("div", { className: "main-content__items", children: [
+        /* @__PURE__ */ n(
+          T,
+          {
+            timeToReadText: w,
+            items: i == null ? void 0 : i.slice(0, 5),
+            isLoading: _,
+            getImage: v,
+            onSelectCard: x,
+            onSelectOption: N,
+            onShare: k,
+            onBookmark: S
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: "main-content__divider" }),
+        /* @__PURE__ */ n(
+          Y,
+          {
+            buttonText: j,
+            buttonLink: A,
+            onButtonAction: E,
+            onSelectCard: F,
+            items: p,
+            isLoading: u,
+            getImage: U,
+            isHighlight: !0
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: "main-content__divider" }),
+        /* @__PURE__ */ n(
+          T,
+          {
+            timeToReadText: w,
+            items: i == null ? void 0 : i.slice(5),
+            isLoading: _,
+            getImage: v,
+            onSelectCard: x,
+            onSelectOption: N,
+            onShare: k,
+            onBookmark: S
+          }
+        )
+      ] }),
+      /* @__PURE__ */ n(
+        P,
+        {
+          perPageOptions: Z,
+          perPage: R,
+          handlePerPage: V,
+          page: q,
+          handlePage: H,
+          total: X
+        }
+      )
+    ] }),
+    /* @__PURE__ */ l("div", { className: "landing__side-content", children: [
+      /* @__PURE__ */ n("div", { className: "side-content__title", children: d }),
+      /* @__PURE__ */ n("div", { className: "side-content__items", children: f && (f == null ? void 0 : f.map((r, y) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: "side-content__item",
+          onClick: () => x(r),
+          children: [
+            /* @__PURE__ */ n(
+              "img",
+              {
+                src: v(r == null ? void 0 : r.imageUrl, r == null ? void 0 : r.uuid) || null,
+                alt: `Mini blog ${y + 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: J(r == null ? void 0 : r.publishedAt) })
+            ] })
+          ]
+        }
+      ))) }),
+      /* @__PURE__ */ n(Q, { onClick: D, className: "side-content__link", children: M })
+    ] })
+  ] })
+);
+ne.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,
+  total: e.number,
+  perPageOptions: e.array,
+  handleSearch: e.func
+};
+export {
+  ne as default
+};

package/dist/BlogListSection.cjs

@@ -7,7 +7,7 @@
   align-items: stretch;
   border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
   background: var(--white, #fff);
-  min-height: 10.5rem;
+  min-height: 9.5rem;
   position: relative;
   width: 100%;
 
@@ -23,7 +23,7 @@
     width: 100%;
     object-fit: cover;
     height: auto;
-    max-height: 9rem;
+    max-height: 9.5rem;
     max-width: 17.75rem;
     border-radius: 0.75rem;
   }
@@ -148,18 +148,21 @@
 
         & .info__content {
           align-items: flex-start;
+          justify-content: space-between;
           width: 100%;
         }
       }
     }
   }
-`,C=p.forwardRef(({title:g,imageUrl:s,options:i,publishedAt:n,timeToReadText:a="{0} min read",timeToRead:l=0,numberOfLikes:f=0,numberOfComments:u=0,isBookmarked:c=!1,onSelectCard:h=()=>{},onSelectOption:_=()=>{},onBookmark:e=()=>{},onShare:d=()=>{}},w)=>t.jsxs(I,{onClick:h,children:[t.jsx(N.ProductImageWrapper,{src:s,className:"wrapper__image"}),t.jsxs("div",{className:"wrapper__content",children:[t.jsxs("div",{className:"wrapper__subcontent",children:[t.jsx("div",{className:"wrapper__title",children:g}),t.jsxs("div",{className:"wrapper__tags-action",children:[t.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.map((r,v)=>t.jsx(k,{label:r==null?void 0:r.name,color:r==null?void 0:r.color,className:"wrapper__tag",onClick:b=>{b==null||b.stopPropagation(),_(r==null?void 0:r.code)}},`blog-card-sponsored-option__${v+1}`)))}),t.jsxs("div",{className:"info__content mobile-only",children:[t.jsx(m,{icon:c?" mng-lnc-bookmark--filled":" mng-lnc-bookmark",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:r=>{r==null||r.stopPropagation(),e()}}),t.jsx(m,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:r=>{r==null||r.stopPropagation(),d()}})]})]})]}),t.jsxs("div",{className:"wrapper__info",children:[t.jsxs("div",{className:"info__content",children:[t.jsx("div",{className:"info__text",children:`${o.formatLocaleDateString(n)} • ${o.formatString(a,l)}`}),t.jsxs("div",{className:"info__text",children:[t.jsxs("div",{children:[t.jsx(y,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),o.getRoundedNumber(f)]}),t.jsxs("div",{children:[t.jsx(y,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),o.getRoundedNumber(u)]})]})]}),t.jsxs("div",{className:"info__content desktop-only",children:[t.jsx(m,{icon:c?" mng-lnc-bookmark--filled":" mng-lnc-bookmark",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:r=>{r==null||r.stopPropagation(),e()}}),t.jsx(m,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:r=>{r==null||r.stopPropagation(),d()}})]})]})]})]})),P=j.styled.div`
+`,C=p.forwardRef(({title:g,imageUrl:s,options:i,publishedAt:a,timeToReadText:n="{0} min read",timeToRead:l=0,numberOfLikes:f=0,numberOfComments:u=0,isBookmarked:c=!1,onSelectCard:h=()=>{},onSelectOption:_=()=>{},onBookmark:e=()=>{},onShare:d=()=>{}},w)=>t.jsxs(I,{onClick:h,className:"blog-card-item",children:[t.jsx(N.ProductImageWrapper,{src:s,className:"wrapper__image"}),t.jsxs("div",{className:"wrapper__content",children:[t.jsxs("div",{className:"wrapper__subcontent",children:[t.jsx("div",{className:"wrapper__title",children:g}),t.jsxs("div",{className:"wrapper__tags-action",children:[t.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.map((r,v)=>t.jsx(k,{label:r==null?void 0:r.name,color:r==null?void 0:r.color,className:"wrapper__tag",onClick:b=>{b==null||b.stopPropagation(),_(r==null?void 0:r.code)}},`blog-card-sponsored-option__${v+1}`)))}),t.jsxs("div",{className:"info__content mobile-only",children:[t.jsx(m,{icon:c?" mng-lnc-bookmark--filled":" mng-lnc-bookmark",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:r=>{r==null||r.stopPropagation(),e()}}),t.jsx(m,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:r=>{r==null||r.stopPropagation(),d()}})]})]})]}),t.jsxs("div",{className:"wrapper__info",children:[t.jsxs("div",{className:"info__content",children:[t.jsx("div",{className:"info__text",children:`${o.formatLocaleDateString(a)} • ${o.formatString(n,l)}`}),t.jsxs("div",{className:"info__text",children:[t.jsxs("div",{children:[t.jsx(y,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),o.getRoundedNumber(f)]}),t.jsxs("div",{children:[t.jsx(y,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),o.getRoundedNumber(u)]})]})]}),t.jsxs("div",{className:"info__content desktop-only",children:[t.jsx(m,{icon:c?" mng-lnc-bookmark--filled":" mng-lnc-bookmark",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:r=>{r==null||r.stopPropagation(),e()}}),t.jsx(m,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:r=>{r==null||r.stopPropagation(),d()}})]})]})]})]})),P=j.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1.5rem;
+  gap: 1.25rem;
 
   &.separated {
+    gap: 2.5rem;
+
     & > div {
       position: relative;
     }
@@ -172,7 +175,7 @@
       background: var(--gray-200, #dddfe4);
       position: absolute;
       left: 0;
-      bottom: -0.75rem;
+      bottom: -1.25rem;
     }
   }
-`,z=p.memo(C),L=p.forwardRef(({timeToReadText:g="{0} min read",items:s,onSelectCard:i=()=>{},onSelectOption:n=()=>{},onShare:a=()=>{},onBookmark:l=()=>{},isLoading:f=!1,getImage:u=()=>{},isSeparated:c=!0},h)=>{const _=p.useMemo(()=>s==null?void 0:s.map((e,d)=>t.jsx(z,{title:e==null?void 0:e.title,titleSlug:e==null?void 0:e.titleSlug,options:e==null?void 0:e.options,publishedAt:e==null?void 0:e.publishedAt,timeToReadText:g,timeToRead:e==null?void 0:e.timeToRead,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,isSponsored:e==null?void 0:e.isSponsored,isBookmarked:e==null?void 0:e.isBookmarked,onSelectCard:()=>i==null?void 0:i(e),onSelectOption:w=>n==null?void 0:n(w),onShare:()=>a==null?void 0:a(e),onBookmark:()=>l==null?void 0:l(e),imageUrl:u(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null},`blog-card-item__${d+1}`)),[s]);return t.jsx(P,{className:c?"separated":"",children:t.jsx(q.SuspenseBlogLarge,{isLoading:f,limit:5,keyPrefix:"blog-section",children:_})})});module.exports=L;
+`,z=p.memo(C),L=p.forwardRef(({timeToReadText:g="{0} min read",items:s,onSelectCard:i=()=>{},onSelectOption:a=()=>{},onShare:n=()=>{},onBookmark:l=()=>{},isLoading:f=!1,getImage:u=()=>{},isSeparated:c=!0},h)=>{const _=p.useMemo(()=>s==null?void 0:s.map((e,d)=>t.jsx(z,{title:e==null?void 0:e.title,titleSlug:e==null?void 0:e.titleSlug,options:e==null?void 0:e.options,publishedAt:e==null?void 0:e.publishedAt,timeToReadText:g,timeToRead:e==null?void 0:e.timeToRead,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,isSponsored:e==null?void 0:e.isSponsored,isBookmarked:e==null?void 0:e.isBookmarked,onSelectCard:()=>i==null?void 0:i(e),onSelectOption:w=>a==null?void 0:a(w),onShare:()=>n==null?void 0:n(e),onBookmark:()=>l==null?void 0:l(e),imageUrl:u(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null},`blog-card-item__${d+1}`)),[s]);return t.jsx(P,{className:c?"separated":"",children:t.jsx(q.SuspenseBlogLarge,{isLoading:f,limit:5,keyPrefix:"blog-section",children:_})})});module.exports=L;