@lanaco/lnc-react-ui 4.0.61 → 4.0.63

package/dist/BlogCardsSponsoredSection.js

@@ -0,0 +1,334 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { forwardRef as v, memo as z, useMemo as S } from "react";
+import { t as j, p as I, q as $, s as b, k as C } from "./utils-DCs-SbIv.js";
+import u from "./Icon.js";
+import R from "./Chip.js";
+import { P as L } from "./index-BLxkXrqU.js";
+import { s as y } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { S as P } from "./suspense-large-CQpNiB26.js";
+import U from "./Button.js";
+import { M } from "./consts-C1uHV4xc.js";
+const T = y.div`
+  display: flex;
+  padding: 1rem;
+  align-items: center;
+  gap: 1.25rem;
+  border-radius: 1.25rem;
+  align-items: stretch;
+  border: ${(t) => t != null && t.isSponsored ? "2px solid var(--yellow-500, #f59e0b)" : "1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08))"};
+  background: var(--white, #fff);
+  min-height: 10.5rem;
+  position: relative;
+  width: 100%;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  & .wrapper__sponsored {
+    position: absolute;
+    top: -0.5rem;
+    right: -0.5rem;
+    background: var(--yellow-500, #f59e0b);
+    height: 2rem;
+    width: 2rem;
+    border-radius: 999px;
+
+    & span {
+      margin-top: 2px;
+    }
+
+    & i {
+      color: var(--white, #fff);
+    }
+  }
+
+  & .wrapper__image {
+    width: 100%;
+    object-fit: cover;
+    height: auto;
+    max-height: 9rem;
+    border-radius: 0.75rem;
+  }
+
+  & .wrapper__content {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    & .wrapper__subcontent {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+
+      & .wrapper__title {
+        color: var(--gray-950, #14161a);
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.5rem;
+        letter-spacing: 0.1px;
+        ${j(3)}
+      }
+
+      & .wrapper__tags {
+        display: flex;
+        gap: 0.25rem;
+
+        & .wrapper__tag {
+          font-size: 0.75rem;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 1rem;
+          letter-spacing: 0.5px;
+          padding: 0.125rem 0.5rem;
+          justify-content: center;
+          align-items: center;
+          gap: 0.25rem;
+          height: 1.25rem;
+          border: 1px solid;
+        }
+      }
+    }
+
+    & .wrapper__info {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      & .info__text {
+        display: flex;
+        gap: 0.5rem;
+        color: var(--gray-600, #676e79);
+        font-size: 0.75rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 1rem;
+        letter-spacing: 0.4px;
+      }
+    }
+  }
+
+  @media (max-width: 400px) {
+    flex-direction: column;
+
+    & .wrapper__content {
+      gap: 1rem;
+
+      & .wrapper__info {
+        gap: 0.5rem;
+        flex-direction: column;
+      }
+    }
+  }
+`, E = v(
+  ({
+    title: t,
+    imageUrl: d,
+    options: l,
+    publishedAt: c,
+    timeToReadText: g = "{0} min read",
+    timeToRead: f = 0,
+    numberOfLikes: s = 0,
+    numberOfComments: n = 0,
+    isSponsored: m = !1,
+    onSelectCard: o = () => {
+    },
+    onSelectOption: _ = () => {
+    }
+  }, w) => /* @__PURE__ */ a(T, { isSponsored: m, onClick: o, children: [
+    m && /* @__PURE__ */ r("div", { className: "wrapper__sponsored", children: /* @__PURE__ */ r(u, { icon: " mng-lnc-paw", sizeInUnits: "1.5rem" }) }),
+    /* @__PURE__ */ r(L, { src: d, className: "wrapper__image" }),
+    /* @__PURE__ */ a("div", { className: "wrapper__content", children: [
+      /* @__PURE__ */ a("div", { className: "wrapper__subcontent", children: [
+        /* @__PURE__ */ r("div", { className: "wrapper__title", children: t }),
+        /* @__PURE__ */ r("div", { className: "wrapper__tags", children: l && (l == null ? void 0 : l.map((i, h) => /* @__PURE__ */ r(
+          R,
+          {
+            label: i == null ? void 0 : i.name,
+            color: i == null ? void 0 : i.color,
+            className: "wrapper__tag",
+            onClick: (p) => {
+              p == null || p.stopPropagation(), _(i == null ? void 0 : i.code);
+            }
+          },
+          `blog-card-sponsored-option__${h + 1}`
+        ))) })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "wrapper__info", children: [
+        /* @__PURE__ */ r("div", { className: "info__text", children: `${I(
+          c
+        )} • ${$(g, f)}` }),
+        /* @__PURE__ */ a("div", { className: "info__text", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ r(u, { icon: " mng-lnc-thumbs-up", sizeInUnits: "1rem" }),
+            b(s)
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ r(u, { icon: " mng-lnc-messages", sizeInUnits: "1rem" }),
+            b(n)
+          ] })
+        ] })
+      ] })
+    ] })
+  ] })
+), W = y.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+
+  & .wrapper__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+
+    & .wrapper__title {
+      display: flex;
+      justify-content: space-between;
+
+      & .title__text {
+        color: var(--gray-950, #14161a);
+        text-align: center;
+        font-size: 1.5rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 2rem;
+        letter-spacing: -0.47px;
+
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        & i {
+          font-size: 1.5rem;
+          color: var(--primary-500, #f59e0b);
+        }
+      }
+
+      & .title__action {
+        color: var(--gray-950, #14161a);
+        background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
+
+        &:hover {
+          background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
+        }
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+
+    & .wrapper__subtitle {
+      color: var(---gray-600, #676e79);
+      font-size: 0.875rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.25rem;
+      letter-spacing: 0.25px;
+    }
+  }
+
+  & .wrapper__cards {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1.25rem;
+    justify-items: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  @media (max-width: ${M + "px"}) {
+    & .wrapper__heading {
+      & .wrapper__title {
+        & .title__action {
+          display: none;
+        }
+      }
+    }
+
+    & .wrapper__cards {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+      gap: 1rem;
+    }
+  }
+`, B = z(E), Q = v(
+  ({
+    title: t,
+    subtitle: d,
+    icon: l,
+    buttonText: c,
+    buttonLink: g,
+    timeToReadText: f = "{0} min read",
+    items: s,
+    onButtonAction: n = () => {
+    },
+    onSelectCard: m = () => {
+    },
+    onSelectOption: o = () => {
+    },
+    isLoading: _ = !1,
+    getImage: w = () => {
+    }
+  }, i) => {
+    const h = S(() => {
+      var p;
+      return (p = s == null ? void 0 : s.slice(0, 4)) == null ? void 0 : p.map((e, N) => /* @__PURE__ */ r(
+        B,
+        {
+          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: f,
+          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,
+          onSelectCard: () => m == null ? void 0 : m(e == null ? void 0 : e.uuid, e == null ? void 0 : e.titleSlug),
+          onSelectOption: (k) => o == null ? void 0 : o(k),
+          imageUrl: w(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null
+        },
+        `blog-card-sponsored__${N + 1}`
+      ));
+    }, [s]);
+    return /* @__PURE__ */ a(W, { children: [
+      /* @__PURE__ */ a("div", { className: "wrapper__heading", children: [
+        /* @__PURE__ */ a("div", { className: "wrapper__title", children: [
+          t && /* @__PURE__ */ a("div", { className: "title__text", children: [
+            C(l) && /* @__PURE__ */ r("i", { className: l }),
+            /* @__PURE__ */ r("span", { children: t })
+          ] }),
+          n && /* @__PURE__ */ r(
+            U,
+            {
+              text: c,
+              borderRadius: "curved",
+              btnType: "tinted",
+              className: "title__action",
+              onClick: () => n == null ? void 0 : n(g)
+            }
+          )
+        ] }),
+        d && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: d })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "wrapper__cards", children: /* @__PURE__ */ r(
+        P,
+        {
+          isLoading: _,
+          limit: 4,
+          keyPrefix: "blog-section",
+          children: h
+        }
+      ) })
+    ] });
+  }
+);
+export {
+  Q as default
+};

package/dist/BlogCategoryCardsSection.cjs

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),a=require("react"),u=require("./suspense-categories-card-simple-HXlnt5ki.cjs"),l=require("./style-OPSfrtFm.cjs"),m=a.memo(u.CategorySimpleCard),p=a.forwardRef(({items:r,onSelectCard:i=()=>{},isLoading:n=!1,limit:t=4,isHighlight:c=!1},C)=>{const d=a.useMemo(()=>{var o;return(o=r==null?void 0:r.slice(0,4))==null?void 0:o.map((e,g)=>s.jsx(m,{uuid:e==null?void 0:e.uuid,image:e==null?void 0:e.image,name:e==null?void 0:e.name,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid)},g))},[r]);return s.jsx(l.Wrapper,{className:c?"highlight":"",children:s.jsx("div",{className:"wrapper__grid",children:s.jsx(u.SuspenseSimpleCategoryCard,{isLoading:n,limit:t,keyPrefix:"blog-section",children:d})})})});module.exports=p;
+"use strict";const s=require("react/jsx-runtime"),a=require("react"),u=require("./suspense-categories-card-simple-o7JK0fA4.cjs"),l=require("./style-OPSfrtFm.cjs"),m=a.memo(u.CategorySimpleCard),p=a.forwardRef(({items:r,onSelectCard:i=()=>{},isLoading:n=!1,limit:t=4,isHighlight:c=!1},C)=>{const d=a.useMemo(()=>{var o;return(o=r==null?void 0:r.slice(0,4))==null?void 0:o.map((e,g)=>s.jsx(m,{uuid:e==null?void 0:e.uuid,image:e==null?void 0:e.image,name:e==null?void 0:e.name,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid)},g))},[r]);return s.jsx(l.Wrapper,{className:c?"highlight":"",children:s.jsx("div",{className:"wrapper__grid",children:s.jsx(u.SuspenseSimpleCategoryCard,{isLoading:n,limit:t,keyPrefix:"blog-section",children:d})})})});module.exports=p;

package/dist/BlogCategoryCardsSection.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { memo as l, forwardRef as f, useMemo as t } from "react";
-import { C as u, S as n } from "./suspense-categories-card-simple-BEaaS-oz.js";
+import { C as u, S as n } from "./suspense-categories-card-simple-Tiure3NX.js";
 import { W as c } from "./style-DOKM5cZi.js";
 const C = l(u), M = f(
   ({

package/dist/BlogListSection.cjs

@@ -0,0 +1,142 @@
+"use strict";const r=require("react/jsx-runtime"),o=require("react"),b=require("./Icon.cjs"),w=require("./IconButton.cjs"),v=require("./Chip.cjs"),c=require("./utils-BXPz9bck.cjs"),N=require("./index-CAqPGuiA.cjs"),y=require("./emotion-styled.browser.esm-BtEseadx.cjs"),R=require("./suspense-large-v60EOiID.cjs"),q=y.styled.div`
+  display: flex;
+  padding: 1rem;
+  align-items: center;
+  gap: 1.25rem;
+  border-radius: 1.25rem;
+  align-items: stretch;
+  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
+  background: var(--white, #fff);
+  min-height: 10.5rem;
+  position: relative;
+  width: 100%;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  & .wrapper__image {
+    width: 100%;
+    object-fit: cover;
+    height: auto;
+    max-height: 9rem;
+    border-radius: 0.75rem;
+  }
+
+  & .wrapper__content {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    & .wrapper__subcontent {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+
+      & .wrapper__title {
+        color: var(--gray-950, #14161a);
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1.5rem;
+        letter-spacing: 0.1px;
+        ${c.truncateTextInRows(3)}
+      }
+
+      & .wrapper__tags {
+        display: flex;
+        gap: 0.25rem;
+
+        & .wrapper__tag {
+          font-size: 0.75rem;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 1rem;
+          letter-spacing: 0.5px;
+          padding: 0.125rem 0.5rem;
+          justify-content: center;
+          align-items: center;
+          gap: 0.25rem;
+          height: 1.25rem;
+          border: 1px solid;
+        }
+      }
+    }
+
+    & .wrapper__info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+
+      & .info__content {
+        display: flex;
+        align-items: center;
+
+        &:first-of-type {
+          flex-grow: 1;
+          gap: 1rem;
+        }
+
+        & .info__text {
+          display: flex;
+          gap: 0.5rem;
+          color: var(--gray-600, #676e79);
+          font-size: 0.75rem;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 1rem;
+          letter-spacing: 0.4px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 400px) {
+    flex-direction: column;
+
+    & .wrapper__content {
+      gap: 1rem;
+
+      & .wrapper__info {
+        gap: 0.5rem;
+        flex-direction: column;
+        width: 100%;
+
+        & .info__content {
+          align-items: flex-start;
+          width: 100%;
+
+          &:first-of-type {
+            flex-direction: column;
+          }
+        }
+      }
+    }
+  }
+`,I=o.forwardRef(({title:d,imageUrl:s,options:i,publishedAt:a,timeToReadText:n="{0} min read",timeToRead:l=0,numberOfLikes:m=0,numberOfComments:p=0,onSelectCard:g=()=>{},onSelectOption:_=()=>{},onBookmark:u=()=>{},onShare:e=()=>{}},h)=>r.jsxs(q,{onClick:g,children:[r.jsx(N.ProductImageWrapper,{src:s,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsxs("div",{className:"wrapper__subcontent",children:[r.jsx("div",{className:"wrapper__title",children:d}),r.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.map((t,j)=>r.jsx(v,{label:t==null?void 0:t.name,color:t==null?void 0:t.color,className:"wrapper__tag",onClick:f=>{f==null||f.stopPropagation(),_(t==null?void 0:t.code)}},`blog-card-sponsored-option__${j+1}`)))})]}),r.jsxs("div",{className:"wrapper__info",children:[r.jsxs("div",{className:"info__content",children:[r.jsx("div",{className:"info__text",children:`${c.formatLocaleDateString(a)} • ${c.formatString(n,l)}`}),r.jsxs("div",{className:"info__text",children:[r.jsxs("div",{children:[r.jsx(b,{icon:" mng-lnc-thumbs-up",sizeInUnits:"1rem"}),c.getRoundedNumber(m)]}),r.jsxs("div",{children:[r.jsx(b,{icon:" mng-lnc-messages",sizeInUnits:"1rem"}),c.getRoundedNumber(p)]})]})]}),r.jsxs("div",{className:"info__content",children:[r.jsx(w,{icon:" mng-lnc-bookmark",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:t=>{t==null||t.stopPropagation(),u()}}),r.jsx(w,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:t=>{t==null||t.stopPropagation(),e()}})]})]})]})]})),z=y.styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.5rem;
+
+  &.separated {
+    & > div {
+      position: relative;
+    }
+
+    & > div:not(:last-of-type)::after {
+      content: "";
+      display: block;
+      height: 1px;
+      width: 100%;
+      background: var(--gray-200, #dddfe4);
+      position: absolute;
+      left: 0;
+      bottom: -0.75rem;
+    }
+  }
+`,k=o.memo(I),C=o.forwardRef(({timeToReadText:d="{0} min read",items:s,onSelectCard:i=()=>{},onSelectOption:a=()=>{},onShare:n=()=>{},onBookmark:l=()=>{},isLoading:m=!1,getImage:p=()=>{},isSeparated:g=!0},_)=>{const u=o.useMemo(()=>s==null?void 0:s.map((e,h)=>r.jsx(k,{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:d,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,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid,e==null?void 0:e.titleSlug),onSelectOption:t=>a==null?void 0:a(t),onShare:()=>n==null?void 0:n(e==null?void 0:e.uuid),onBookmark:()=>l==null?void 0:l(e==null?void 0:e.uuid),imageUrl:p(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null},`blog-card-item__${h+1}`)),[s]);return r.jsx(z,{className:g?"separated":"",children:r.jsx(R.SuspenseBlogLarge,{isLoading:m,limit:5,keyPrefix:"blog-section",children:u})})});module.exports=C;