@lanaco/lnc-react-ui 4.0.125 → 4.0.127

package/dist/BlogExploreSection.js

@@ -0,0 +1,642 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { forwardRef as I } from "react";
+import { P as e } from "./index-CblbdqjE.js";
+import { s as J } from "./utils-BPdU4_1q.js";
+import K from "./TextInput.js";
+import N from "./Icon.js";
+import Q from "./Link.js";
+import L from "./DropdownMenu.js";
+import $ from "./DropdownItem.js";
+import { F as W } from "./tag-CtleOqEC.js";
+import Y from "./BlogProductCardsSection.js";
+import { s as A } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import z from "./BlogListSection.js";
+import { M as B } from "./consts-BuFChS64.js";
+const O = A.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 = I(
+  ({
+    perPageOptions: o = [
+      { code: 10, name: "Show 10 items" },
+      { code: 25, name: "Show 25 items" },
+      { code: 50, name: "Show 50 items" }
+    ],
+    perPage: f,
+    handlePerPage: u = () => {
+    },
+    page: c = 1,
+    handlePage: l = () => {
+    },
+    totalPage: t
+  }, m) => {
+    var _, s;
+    const h = () => {
+      c > 1 && (l == null || l(c - 1));
+    }, g = () => {
+      c < t && (l == null || l(c + 1));
+    }, v = () => {
+      const r = [];
+      if (t <= 7)
+        for (let a = 1; a <= t; a++)
+          r.push(a);
+      else
+        c <= 3 ? r.push(1, 2, 3, "...", t) : c >= t - 2 ? r.push(1, "...", t - 2, t - 1, t) : r.push(1, 2, 3, "...", t);
+      return r == null ? void 0 : r.map((a, p) => a === "..." ? /* @__PURE__ */ n(
+        "div",
+        {
+          className: "pagination__page ellipsis",
+          children: a
+        },
+        `pagination-ellipsis__${p}`
+      ) : /* @__PURE__ */ n(
+        "div",
+        {
+          onClick: () => l(a),
+          className: `pagination__page ${c === a ? "active" : ""}`,
+          children: a
+        },
+        `pagination-page__${p}`
+      ));
+    };
+    return /* @__PURE__ */ d(O, { className: "pagination", children: [
+      /* @__PURE__ */ n(
+        L,
+        {
+          color: "neutral",
+          control: ((_ = o == null ? void 0 : o.find((r) => (r == null ? void 0 : r.code) === f)) == null ? void 0 : _.name) || ((s = o[0]) == null ? void 0 : s.name),
+          placement: "bottom",
+          zIndex: 1001,
+          className: "pagination__per-page",
+          children: o == null ? void 0 : o.map((r, a) => /* @__PURE__ */ n(
+            $,
+            {
+              active: (r == null ? void 0 : r.code) === (f == null ? void 0 : f.code),
+              className: "sort-by__item",
+              onClick: () => u(r),
+              children: r == null ? void 0 : r.name
+            },
+            `blog-epxlore-section-per-page-option__${a + 1}`
+          ))
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: "pagination__pages", children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `pagination__page ${c === 1 ? "disabled" : ""}`,
+            onClick: h,
+            children: /* @__PURE__ */ n(N, { icon: " mng-lnc-chevron--left" })
+          }
+        ),
+        v(),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `pagination__page ${c === t ? "disabled" : ""}`,
+            onClick: g,
+            children: /* @__PURE__ */ n(N, { icon: " mng-lnc-chevron--right" })
+          }
+        )
+      ] })
+    ] });
+  }
+), ee = A.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;
+
+    & .section__tags {
+      flex-wrap: wrap;
+    }
+
+    & .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;
+
+      & .section__tags {
+        flex-wrap: nowrap;
+      }
+
+      & .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 = I(
+  ({
+    mainTitle: o,
+    sideTitle: f,
+    tags: u,
+    selectedTag: c,
+    handleSelectTag: l = () => {
+    },
+    blogs: t,
+    miniBlogs: m,
+    products: h,
+    blogsLoading: g = !1,
+    productsLoading: v = !1,
+    sortingOptions: _,
+    sortBy: s,
+    handleSortBy: r = () => {
+    },
+    allTagText: a = "All",
+    searchPlaceholderText: p = "Search blogs",
+    timeToReadText: k = "{0} min read",
+    getBlogImageUrl: x = () => {
+    },
+    handleSelectBlog: y = () => {
+    },
+    handleSelectBlogTag: S = () => {
+    },
+    handleShareBlog: C = () => {
+    },
+    handleBookmarkBlog: T = () => {
+    },
+    showAllButtonLink: j,
+    showAllButtonText: M = "Show all products",
+    viewAllButtonText: D = "View all (11)",
+    viewAllButtonLink: te,
+    handleViewAll: E = () => {
+    },
+    handleShowAll: F = () => {
+    },
+    handleSelectProduct: U = () => {
+    },
+    getProductImageUrl: q = () => {
+    },
+    page: H,
+    handlePage: R = () => {
+    },
+    perPage: V,
+    handlePerPage: X = () => {
+    },
+    totalPage: w,
+    perPageOptions: Z,
+    handleSearch: G = () => {
+    }
+  }, re) => /* @__PURE__ */ d(ee, { children: [
+    /* @__PURE__ */ d("div", { className: "landing__main-content", children: [
+      o && /* @__PURE__ */ n("div", { className: "main-content__title", children: o }),
+      u && /* @__PURE__ */ n(
+        W,
+        {
+          tags: u,
+          allTagText: a,
+          selectedTag: c,
+          onSelectTag: l
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: "main-content__actions", children: [
+        /* @__PURE__ */ n(
+          K,
+          {
+            className: "main-content__search",
+            placeholder: p,
+            debounceTime: 200,
+            prefix: /* @__PURE__ */ n(
+              N,
+              {
+                icon: " mng-lnc-search",
+                sizeInUnits: "1.25rem",
+                className: "main-content__search-prefix"
+              }
+            ),
+            color: "neutral",
+            onChange: G
+          }
+        ),
+        /* @__PURE__ */ n(
+          L,
+          {
+            color: "neutral",
+            control: s == null ? void 0 : s.name,
+            zIndex: 1001,
+            className: "main-content__sort-by",
+            children: _ == null ? void 0 : _.map((i, b) => /* @__PURE__ */ n(
+              $,
+              {
+                active: (i == null ? void 0 : i.code) === (s == null ? void 0 : s.code),
+                className: "sort-by__item",
+                onClick: () => r(i),
+                children: i == null ? void 0 : i.name
+              },
+              `blog-epxlore-section-sorting-option__${b + 1}`
+            ))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ d("div", { className: "main-content__items", children: [
+        t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ n(
+          z,
+          {
+            timeToReadText: k,
+            items: t == null ? void 0 : t.slice(0, 5),
+            isLoading: g,
+            getImage: x,
+            onSelectCard: y,
+            onSelectOption: S,
+            onShare: C,
+            onBookmark: T
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: "main-content__divider" }),
+        h && (h == null ? void 0 : h.length) > 0 && /* @__PURE__ */ n(
+          Y,
+          {
+            buttonText: M,
+            buttonLink: j,
+            onButtonAction: F,
+            onSelectCard: U,
+            items: h,
+            isLoading: v,
+            getImage: q,
+            isHighlight: !0
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: "main-content__divider" }),
+        t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ n(
+          z,
+          {
+            timeToReadText: k,
+            items: t == null ? void 0 : t.slice(5),
+            isLoading: g,
+            getImage: x,
+            onSelectCard: y,
+            onSelectOption: S,
+            onShare: C,
+            onBookmark: T
+          }
+        )
+      ] }),
+      w && w > 1 && /* @__PURE__ */ n(
+        P,
+        {
+          perPageOptions: Z,
+          perPage: V,
+          handlePerPage: X,
+          page: H,
+          handlePage: R,
+          totalPage: w
+        }
+      )
+    ] }),
+    /* @__PURE__ */ d("div", { className: "landing__side-content", children: [
+      f && /* @__PURE__ */ n("div", { className: "side-content__title", children: f }),
+      /* @__PURE__ */ n("div", { className: "side-content__items", children: m && (m == null ? void 0 : m.length) > 0 && (m == null ? void 0 : m.map((i, b) => /* @__PURE__ */ d(
+        "div",
+        {
+          className: "side-content__item",
+          onClick: () => y(i),
+          children: [
+            /* @__PURE__ */ n(
+              "img",
+              {
+                src: x(i == null ? void 0 : i.imageUrl, i == null ? void 0 : i.uuid) || null,
+                alt: `Mini blog ${b + 1}`,
+                className: "item__image"
+              }
+            ),
+            /* @__PURE__ */ d("div", { className: "item__content", children: [
+              /* @__PURE__ */ n("div", { className: "item__title", children: i == null ? void 0 : i.title }),
+              /* @__PURE__ */ n("div", { className: "item__description", children: J(i == null ? void 0 : i.publishedAt) })
+            ] })
+          ]
+        }
+      ))) }),
+      /* @__PURE__ */ n(Q, { onClick: E, className: "side-content__link", children: D })
+    ] })
+  ] })
+);
+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,
+  totalPage: e.number,
+  perPageOptions: e.array,
+  handleSearch: e.func
+};
+export {
+  ne as default
+};

package/dist/BlogListSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),p=require("react"),y=require("./Icon.cjs"),m=require("./IconButton.cjs"),k=require("./Chip.cjs"),o=require("./utils-CZynEOC_.cjs"),N=require("./index-BvSNRLNa.cjs"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),R=require("./consts-goSZX3xP.cjs"),q=require("./suspense-large-CtcwWswP.cjs"),I=j.styled.div`
+"use strict";const t=require("react/jsx-runtime"),p=require("react"),y=require("./Icon.cjs"),m=require("./IconButton.cjs"),k=require("./Chip.cjs"),o=require("./utils-DmMdPm9O.cjs"),N=require("./index-DiIeF_76.cjs"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),R=require("./consts-goSZX3xP.cjs"),q=require("./suspense-large-PHdzP1Ln.cjs"),I=j.styled.div`
   display: flex;
   padding: 1rem;
   align-items: center;
@@ -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;