@lanaco/lnc-react-ui 4.0.32 → 4.0.34

package/dist/BlogsSectionDetailed.js

@@ -0,0 +1,224 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { n as u } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as v } from "./consts-C1uHV4xc.js";
+import { u as N } from "./useDetectMobile-BC6EGaBc.js";
+import { m as f, t as C, k as h } from "./utils-CqvISfv9.js";
+import { B as O, R as S } from "./style-BGQ1B_dp.js";
+import $ from "./Button.js";
+const D = u.div`
+  display: grid;
+  grid-template-columns: ${(o) => `repeat(${o.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${v + "px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`, T = u.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-95008);
+  overflow: hidden;
+  max-height: 21.5625rem;
+  min-height: 21.5625rem;
+  cursor: pointer;
+  &:hover {
+    & .text-wr-title {
+      color: var(--primary-500, #f59e0b);
+      transition: var(--transition);
+    }
+  }
+
+  & img {
+    max-height: 11.0625rem;
+    min-height: 11.0625rem;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  & .skeleton-img {
+    width: 100%;
+    max-height: 11.0625rem;
+    min-height: 11.0625rem;
+    background-color: ${f("-90deg")};
+  }
+
+  & .tags-wr {
+    margin-top: auto;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0 1rem 1rem 1rem;
+  }
+
+  @media (max-width: ${v + "px"}) {
+  }
+`, B = u.div`
+  padding: 1rem 1rem 0 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  color: var(--gray-950, #14161a);
+  border-top: 1px solid var(--gray-95008);
+
+  & .text-wr-title {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  & .info-wr-skeleton {
+    background-color: ${f("-90deg")};
+    height: 1rem;
+    width: 100%;
+  }
+
+  & .skeleton-title {
+    background-color: ${f("-90deg")};
+    height: 1.5rem;
+    width: 70%;
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    flex: 1;
+    color: var(--gray-700, #4e555f);
+    ${C(2)}
+  }
+
+  & .info-wr {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    justify-content: space-between;
+    color: var(--gray-600, #676e79);
+    font-size: 0.75rem;
+    font-weight: 400;
+
+    & .mng {
+      font-size: 0.875rem;
+      color: var(--gray-300);
+    }
+  }
+
+  & .info-wr-1 {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  & .info-wr-2 {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+`, b = w((o, k) => {
+  const {
+    title: s,
+    image: c,
+    text: g,
+    numberOfLikes: i,
+    numberOfComments: p,
+    readDuration: l,
+    datePublished: d,
+    tags: m,
+    onCardClick: e,
+    timeToReadText: a = "read"
+  } = o;
+  return (
+    // <BlogCardDetailedSkeleton />
+    /* @__PURE__ */ t(T, { className: "blog-card", onClick: e, children: [
+      /* @__PURE__ */ r("img", { src: c }),
+      /* @__PURE__ */ t(B, { children: [
+        /* @__PURE__ */ t("div", { className: "info-wr", children: [
+          /* @__PURE__ */ t("div", { className: "info-wr-1", children: [
+            /* @__PURE__ */ r("span", { children: d }),
+            /* @__PURE__ */ r("span", { className: "small-dot", children: "●" }),
+            l && a ? `${l} ${a}` : "N/A"
+          ] }),
+          /* @__PURE__ */ t("div", { className: "info-wr-2", children: [
+            /* @__PURE__ */ t("span", { className: "info-wr-1", children: [
+              /* @__PURE__ */ r("i", { className: "mng mng-lnc-thumbs-up--filled" }),
+              /* @__PURE__ */ r("span", { children: i })
+            ] }),
+            /* @__PURE__ */ t("span", { className: "info-wr-1", children: [
+              /* @__PURE__ */ r("i", { className: "mng mng-lnc-messages-filled" }),
+              /* @__PURE__ */ r("span", { children: p })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "text-wr-title", children: s }),
+        /* @__PURE__ */ r("div", { className: "text-wr", children: g })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "tags-wr", children: m == null ? void 0 : m.map((n, y) => /* @__PURE__ */ r(O, { color: n == null ? void 0 : n.color, children: n == null ? void 0 : n.name }, y)) })
+    ] })
+  );
+}), E = w((o, k) => {
+  const {
+    icon: s,
+    title: c,
+    onButtonAction: g,
+    items: i,
+    buttonText: p,
+    limit: l = 3,
+    onSelectCard: d = () => {
+    }
+  } = o, m = N();
+  return /* @__PURE__ */ t(S, { children: [
+    /* @__PURE__ */ t("div", { className: "regular-title", children: [
+      /* @__PURE__ */ t("div", { className: "regular-title-text", children: [
+        h(s) && /* @__PURE__ */ r("i", { className: s }),
+        /* @__PURE__ */ r("span", { children: c })
+      ] }),
+      h(onSectionClick) && /* @__PURE__ */ r(
+        $,
+        {
+          type: "button",
+          btnType: "tinted",
+          color: "gray",
+          onClick: () => g(buttonLink),
+          borderRadius: "curved",
+          children: p
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(D, { limit: l, children: m === !0 ? i == null ? void 0 : i.map((e, a) => /* @__PURE__ */ r(
+      b,
+      {
+        title: e == null ? void 0 : e.title,
+        image: e == null ? void 0 : e.image,
+        text: e == null ? void 0 : e.text,
+        titleSlug: e == null ? void 0 : e.titleSlug,
+        numberOfLikes: e == null ? void 0 : e.numberOfLikes,
+        numberOfComments: e == null ? void 0 : e.numberOfComments,
+        datePublished: e == null ? void 0 : e.date,
+        readDuration: e == null ? void 0 : e.readDuration,
+        tags: e == null ? void 0 : e.tags,
+        onCardClick: () => d(e == null ? void 0 : e.uuid)
+      },
+      a
+    )) : i == null ? void 0 : i.slice(0, l).map((e, a) => /* @__PURE__ */ r(
+      b,
+      {
+        title: e == null ? void 0 : e.title,
+        image: e == null ? void 0 : e.image,
+        text: e == null ? void 0 : e.text,
+        titleSlug: e == null ? void 0 : e.titleSlug,
+        tags: e == null ? void 0 : e.tags,
+        numberOfLikes: e == null ? void 0 : e.numberOfLikes,
+        numberOfComments: e == null ? void 0 : e.numberOfComments,
+        datePublished: e == null ? void 0 : e.date,
+        readDuration: e == null ? void 0 : e.readDuration,
+        onCardClick: () => d(e == null ? void 0 : e.uuid)
+      },
+      a
+    )) })
+  ] });
+});
+export {
+  E as default
+};

package/dist/BlogsSectionLarge.cjs

@@ -0,0 +1,101 @@
+"use strict";const t=require("react/jsx-runtime"),d=require("react"),s=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),c=require("./consts-CtNoHdBj.cjs"),h=require("./useDetectMobile-D6d5LpdL.cjs"),l=require("./utils-C0YSTwcn.cjs"),g=require("./Button.cjs"),f=s.newStyled.div`
+  display: grid;
+  grid-template-columns: ${i=>`repeat(${i.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`,p=s.newStyled.div`
+  display: flex;
+  width: 100%;
+  gap: 1.25rem;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-95008);
+  overflow: hidden;
+  max-height: 11.25rem;
+  min-height: 11.25rem;
+
+  & img {
+    max-height: 11.25rem;
+    min-height: 11.25rem;
+    min-width: 11.25rem;
+    max-width: 11.25rem;
+    object-fit: cover;
+    width: 100%;
+    border-radius: 0.75rem 0 0 0.75rem;
+  }
+
+  & .skeleton-img {
+    width: 100%;
+    max-height: 11.25rem;
+    min-height: 12.25rem;
+    min-width: 11.25rem;
+    max-width: 11.25rem;
+    background-color: ${l.linearGradientAnimation("-90deg")};
+    border-radius: 0.75rem 0 0 0.75rem;
+  }
+
+  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+    padding: 1rem;
+    column-gap: 1.5rem;
+    row-gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    max-height: 13.25rem;
+    min-height: 13.25rem;
+    & .action {
+      grid-column: 1 / 3;
+    }
+
+    & img,
+    .skeleton-img {
+      max-height: 7.75rem;
+      min-height: 7.75rem;
+      min-width: 7.75rem;
+      max-width: 7.75rem;
+      border-radius: 0.75rem;
+    }
+
+    & button {
+      width: 100%;
+      margin-top: auto;
+    }
+  }
+`,w=s.newStyled.div`
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  color: var(--gray-950, #14161a);
+
+  & .text-wr-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    color: var(--gray-700, #4e555f);
+    ${l.truncateTextInRows(3)}
+  }
+
+  & button {
+    width: fit-content;
+    margin-top: auto;
+  }
+
+  & .skeleton-title {
+    height: 1.75rem;
+    width: 80%;
+    background-color: ${l.linearGradientAnimation("-90deg")};
+  }
+
+  @media (max-width: ${c.MOBILE_SIZE_PX+"px"}) {
+    padding: 0;
+  }
+`;d.forwardRef(({},i)=>t.jsxs(p,{className:"blog-card",children:[t.jsx("div",{className:"skeleton-img"}),t.jsx(w,{children:t.jsx("div",{className:"skeleton-title"})})]}));const u=d.forwardRef((i,b)=>{const{title:r,image:n,text:m,onCardClick:a,buttonText:e}=i,o=h.useDetectMobile();return t.jsxs(p,{className:"blog-card",onClick:a,children:[t.jsx("img",{src:n}),t.jsxs(w,{children:[t.jsx("div",{className:"text-wr-title",children:r}),t.jsx("div",{className:"text-wr",children:m}),o!==!0&&t.jsx(g,{type:"button",btnType:"outline",size:"medium",color:"gray",onClick:a,children:e})]}),o===!0&&t.jsx(g,{className:"action",type:"button",btnType:"outline",size:"medium",color:"gray",onClick:a,children:e})]})}),y=d.forwardRef((i,b)=>{const{items:r,onSelectCard:n=()=>{},limit:m=2}=i,a=h.useDetectMobile();return t.jsx(f,{limit:m,children:a===!0?r==null?void 0:r.map((e,o)=>t.jsx(u,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>n(e)},o)):r==null?void 0:r.slice(0,m).map((e,o)=>t.jsx(u,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,buttonText:e==null?void 0:e.buttonText,onCardClick:()=>n(e)},o))})});module.exports=y;

package/dist/BlogsSectionLarge.js

@@ -0,0 +1,177 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { n as g } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { M as c } from "./consts-C1uHV4xc.js";
+import { u as h } from "./useDetectMobile-BC6EGaBc.js";
+import { m as u, t as k } from "./utils-CqvISfv9.js";
+import s from "./Button.js";
+const y = g.div`
+  display: grid;
+  grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${c + "px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`, b = g.div`
+  display: flex;
+  width: 100%;
+  gap: 1.25rem;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-95008);
+  overflow: hidden;
+  max-height: 11.25rem;
+  min-height: 11.25rem;
+
+  & img {
+    max-height: 11.25rem;
+    min-height: 11.25rem;
+    min-width: 11.25rem;
+    max-width: 11.25rem;
+    object-fit: cover;
+    width: 100%;
+    border-radius: 0.75rem 0 0 0.75rem;
+  }
+
+  & .skeleton-img {
+    width: 100%;
+    max-height: 11.25rem;
+    min-height: 12.25rem;
+    min-width: 11.25rem;
+    max-width: 11.25rem;
+    background-color: ${u("-90deg")};
+    border-radius: 0.75rem 0 0 0.75rem;
+  }
+
+  @media (max-width: ${c + "px"}) {
+    padding: 1rem;
+    column-gap: 1.5rem;
+    row-gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    max-height: 13.25rem;
+    min-height: 13.25rem;
+    & .action {
+      grid-column: 1 / 3;
+    }
+
+    & img,
+    .skeleton-img {
+      max-height: 7.75rem;
+      min-height: 7.75rem;
+      min-width: 7.75rem;
+      max-width: 7.75rem;
+      border-radius: 0.75rem;
+    }
+
+    & button {
+      width: 100%;
+      margin-top: auto;
+    }
+  }
+`, w = g.div`
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  color: var(--gray-950, #14161a);
+
+  & .text-wr-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    color: var(--gray-700, #4e555f);
+    ${k(3)}
+  }
+
+  & button {
+    width: fit-content;
+    margin-top: auto;
+  }
+
+  & .skeleton-title {
+    height: 1.75rem;
+    width: 80%;
+    background-color: ${u("-90deg")};
+  }
+
+  @media (max-width: ${c + "px"}) {
+    padding: 0;
+  }
+`;
+d(({}, i) => /* @__PURE__ */ l(b, { className: "blog-card", children: [
+  /* @__PURE__ */ t("div", { className: "skeleton-img" }),
+  /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
+] }));
+const p = d((i, f) => {
+  const { title: r, image: a, text: n, onCardClick: m, buttonText: e } = i, o = h();
+  return (
+    // <BlogCardLargeSkeleton />
+    /* @__PURE__ */ l(b, { className: "blog-card", onClick: m, children: [
+      /* @__PURE__ */ t("img", { src: a }),
+      /* @__PURE__ */ l(w, { children: [
+        /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
+        /* @__PURE__ */ t("div", { className: "text-wr", children: n }),
+        o !== !0 && /* @__PURE__ */ t(
+          s,
+          {
+            type: "button",
+            btnType: "outline",
+            size: "medium",
+            color: "gray",
+            onClick: m,
+            children: e
+          }
+        )
+      ] }),
+      o === !0 && /* @__PURE__ */ t(
+        s,
+        {
+          className: "action",
+          type: "button",
+          btnType: "outline",
+          size: "medium",
+          color: "gray",
+          onClick: m,
+          children: e
+        }
+      )
+    ] })
+  );
+}), z = d((i, f) => {
+  const { items: r, onSelectCard: a = () => {
+  }, limit: n = 2 } = i, m = h();
+  return /* @__PURE__ */ t(y, { limit: n, children: m === !0 ? r == null ? void 0 : r.map((e, o) => /* @__PURE__ */ t(
+    p,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      text: e == null ? void 0 : e.text,
+      titleSlug: e == null ? void 0 : e.titleSlug,
+      buttonText: e == null ? void 0 : e.buttonText,
+      onCardClick: () => a(e)
+    },
+    o
+  )) : r == null ? void 0 : r.slice(0, n).map((e, o) => /* @__PURE__ */ t(
+    p,
+    {
+      title: e == null ? void 0 : e.title,
+      image: e == null ? void 0 : e.image,
+      text: e == null ? void 0 : e.text,
+      titleSlug: e == null ? void 0 : e.titleSlug,
+      buttonText: e == null ? void 0 : e.buttonText,
+      onCardClick: () => a(e)
+    },
+    o
+  )) });
+});
+export {
+  z as default
+};

package/dist/BlogsSectionSimple.cjs

@@ -0,0 +1,71 @@
+"use strict";const t=require("react/jsx-runtime"),m=require("react"),g=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),h=require("./consts-CtNoHdBj.cjs"),y=require("./useDetectMobile-D6d5LpdL.cjs"),l=require("./utils-C0YSTwcn.cjs"),S=require("./style-BEUISPP7.cjs"),k=require("./Button.cjs"),x=require("./Link.cjs"),N=g.newStyled.div`
+  display: grid;
+  grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`,f=g.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  background-color: var(--white);
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-95008);
+  overflow: hidden;
+  max-height: 21.5625rem;
+  min-height: 21.5625rem;
+  cursor: pointer;
+
+  &:hover {
+    & .text-wr-title {
+      color: var(--primary-500, #f59e0b);
+      transition: var(--transition);
+    }
+  }
+
+  & img {
+    max-height: 12.5625rem;
+    min-height: 12.5625rem;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  & .skeleton-img {
+    width: 100%;
+    max-height: 12.5625rem;
+    min-height: 12.5625rem;
+    background-color: ${l.linearGradientAnimation("-90deg")};
+  }
+
+  & .action {
+    padding: 0 1rem 1rem 1rem;
+    margin-top: auto;
+  }
+
+  @media (max-width: ${h.MOBILE_SIZE_PX+"px"}) {
+  }
+`,w=g.newStyled.div`
+  padding: 1rem 1rem 0 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  color: var(--gray-950, #14161a);
+  border-top: 1px solid var(--gray-95008);
+
+  & .text-wr-title {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    flex: 1;
+    color: var(--gray-700, #4e555f);
+    ${l.truncateTextInRows(3)}
+  }
+`;m.forwardRef(({},r)=>t.jsxs(f,{className:"product-card",children:[t.jsx("div",{className:"skeleton-img"}),t.jsx("div",{className:"card-title"}),t.jsx(w,{})]}));const p=m.forwardRef((r,j)=>{const{title:a,image:s,text:c,onCardClick:o,readMoreText:n="Read more"}=r;return t.jsxs(f,{className:"blog-card",onClick:o,children:[t.jsx("img",{src:s}),t.jsxs(w,{children:[t.jsx("div",{className:"text-wr-title",children:a}),t.jsx("div",{className:"text-wr",children:c})]}),t.jsx(x,{className:"action",color:"gray",onClick:o,children:n})]})}),C=m.forwardRef((r,j)=>{const{icon:a,title:s,onButtonAction:c=()=>{},onSelectCard:o=()=>{},buttonLink:n,items:i,buttonText:b,limit:u=3}=r,v=y.useDetectMobile();return t.jsxs(S.RegulatTitleSectionWrapper,{children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[l.isDefinedNotEmptyString(a)&&t.jsx("i",{className:a}),t.jsx("span",{children:s})]}),l.isDefinedNotEmptyString(n)&&t.jsx(k,{type:"button",btnType:"tinted",color:"gray",onClick:()=>c(n),borderRadius:"curved",children:b})]}),t.jsx(N,{limit:u,children:v===!0?i==null?void 0:i.map((e,d)=>t.jsx(p,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,onCardClick:()=>o(e==null?void 0:e.uuid)},d)):i==null?void 0:i.slice(0,u).map((e,d)=>t.jsx(p,{title:e==null?void 0:e.title,image:e==null?void 0:e.image,text:e==null?void 0:e.text,titleSlug:e==null?void 0:e.titleSlug,onCardClick:()=>o(e==null?void 0:e.uuid)},d))})]})});module.exports=C;