@lanaco/lnc-react-ui 4.0.31 → 4.0.33

package/dist/Accordion.cjs

@@ -1,4 +1,4 @@
-"use strict";const g=require("react/jsx-runtime"),t=require("react"),o=require("./index-BPVoEhTF.cjs"),x=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),l=require("./utils-CE6bljYe.cjs"),R=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),S=require("./useUpdateEffect-BtMgpgIV.cjs"),N=x.newStyled.div`
+"use strict";const g=require("react/jsx-runtime"),t=require("react"),o=require("./index-BPVoEhTF.cjs"),x=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),l=require("./utils-UJt-R-G3.cjs"),R=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),S=require("./useUpdateEffect-BtMgpgIV.cjs"),N=x.newStyled.div`
   color: ${s=>!s.disabled&&l.getColorRgbaValue(s.theme,"Accordion","primary","enabled","text")};
   background-color: transparent;
   ${s=>l.getComponentTypographyCss(s.theme,"Accordion",s.size,"enabled")};

package/dist/Accordion.js

@@ -2,7 +2,7 @@ import { jsxs as N } from "react/jsx-runtime";
 import { forwardRef as O, useState as S, Children as i, isValidElement as c, cloneElement as f } from "react";
 import { P as s } from "./index-S5Cd7WrG.js";
 import { n as x } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { a as D, g as R, h as T } from "./utils-DtEdJZWa.js";
+import { a as D, g as R, h as T } from "./utils-xpQsPsCa.js";
 import { u as I } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 import { u as P } from "./useUpdateEffect-CuYWz7EA.js";
 const M = x.div`

package/dist/AccordionSummary.cjs

@@ -1,4 +1,4 @@
-"use strict";const o=require("react/jsx-runtime"),f=require("react"),s=require("./index-BPVoEhTF.cjs"),x=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),g=require("./Icon.cjs"),C=require("./utils-CE6bljYe.cjs"),P=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),h={small:"0.6rem 1rem",medium:"0.8rem 1.25rem",large:"1rem 1.5rem"},R=x.newStyled.div`
+"use strict";const o=require("react/jsx-runtime"),f=require("react"),s=require("./index-BPVoEhTF.cjs"),x=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),g=require("./Icon.cjs"),C=require("./utils-UJt-R-G3.cjs"),P=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),h={small:"0.6rem 1rem",medium:"0.8rem 1.25rem",large:"1rem 1.5rem"},R=x.newStyled.div`
   display: flex;
   justify-content: space-between;
   cursor: pointer;

package/dist/AccordionSummary.js

@@ -3,7 +3,7 @@ import { forwardRef as C } from "react";
 import { P as o } from "./index-S5Cd7WrG.js";
 import { n as g } from "./emotion-styled.browser.esm-BiK8DcgW.js";
 import h from "./Icon.js";
-import { a as x } from "./utils-DtEdJZWa.js";
+import { a as x } from "./utils-xpQsPsCa.js";
 import { u as A } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 const N = {
   small: "0.6rem 1rem",

package/dist/ActionsToolbar.cjs

@@ -1,4 +1,4 @@
-"use strict";const o=require("react/jsx-runtime"),B=require("react"),e=require("./index-BPVoEhTF.cjs"),V=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),Y=require("./DropdownMenu.cjs"),i=require("./DropdownItem.cjs"),M=require("./Separator.cjs"),y=require("./Button.cjs"),b=require("./utils-CE6bljYe.cjs"),Z=require("./ThemeProvider.cjs"),F=V.newStyled.div`
+"use strict";const o=require("react/jsx-runtime"),B=require("react"),e=require("./index-BPVoEhTF.cjs"),V=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),Y=require("./DropdownMenu.cjs"),i=require("./DropdownItem.cjs"),M=require("./Separator.cjs"),y=require("./Button.cjs"),b=require("./utils-UJt-R-G3.cjs"),Z=require("./ThemeProvider.cjs"),F=V.newStyled.div`
   display: flex;
   align-items: center;
   border-radius: 8px;

package/dist/ActionsToolbar.js

@@ -6,7 +6,7 @@ import Z from "./DropdownMenu.js";
 import i from "./DropdownItem.js";
 import q from "./Separator.js";
 import b from "./Button.js";
-import { a as m } from "./utils-DtEdJZWa.js";
+import { a as m } from "./utils-xpQsPsCa.js";
 import { useTheme as F } from "./ThemeProvider.js";
 const G = V.div`
   display: flex;

package/dist/Alert.cjs

@@ -1,4 +1,4 @@
-"use strict";const o=require("react/jsx-runtime"),c=require("react"),r=require("./index-BPVoEhTF.cjs"),x=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),T=require("./ThemeProvider.cjs"),t=require("./utils-CE6bljYe.cjs"),s=require("./Icon.cjs"),P=x.newStyled.div`
+"use strict";const o=require("react/jsx-runtime"),c=require("react"),r=require("./index-BPVoEhTF.cjs"),x=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),T=require("./ThemeProvider.cjs"),t=require("./utils-UJt-R-G3.cjs"),s=require("./Icon.cjs"),P=x.newStyled.div`
   min-height: 3rem;
   ${e=>t.getComponentTypographyCss(e.theme,"Alert",e.size,"enabled")};
   line-height: 1.25rem;

package/dist/Alert.js

@@ -3,7 +3,7 @@ import { forwardRef as y, cloneElement as x } from "react";
 import { P as r } from "./index-S5Cd7WrG.js";
 import { n as w } from "./emotion-styled.browser.esm-BiK8DcgW.js";
 import { useTheme as N } from "./ThemeProvider.js";
-import { g as A, b as $, a as o, c as m } from "./utils-DtEdJZWa.js";
+import { g as A, b as $, a as o, c as m } from "./utils-xpQsPsCa.js";
 import s from "./Icon.js";
 const T = w.div`
   min-height: 3rem;

package/dist/Avatar.cjs

@@ -1,4 +1,4 @@
-"use strict";const n=require("react/jsx-runtime"),T=require("react"),i=require("./index-BPVoEhTF.cjs"),P=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),s=require("./utils-CE6bljYe.cjs"),I=require("./Icon.cjs"),f=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),w=P.newStyled.div`
+"use strict";const n=require("react/jsx-runtime"),T=require("react"),i=require("./index-BPVoEhTF.cjs"),P=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),s=require("./utils-UJt-R-G3.cjs"),I=require("./Icon.cjs"),f=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),w=P.newStyled.div`
   border-radius: ${e=>s.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};
   color: white;
   display: inline-flex;

package/dist/Avatar.js

@@ -2,7 +2,7 @@ import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as I } from "react";
 import { P as i } from "./index-S5Cd7WrG.js";
 import { n as U } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { b as y, d as t, h as $, a as v } from "./utils-DtEdJZWa.js";
+import { b as y, d as t, h as $, a as v } from "./utils-xpQsPsCa.js";
 import w from "./Icon.js";
 import { u as R } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 const x = U.div`

package/dist/Badge.cjs

@@ -1,4 +1,4 @@
-"use strict";const h=require("react/jsx-runtime"),p=require("react"),r=require("./index-BPVoEhTF.cjs"),f=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),s=require("./utils-CE6bljYe.cjs"),z=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),t=e=>e=="large"?"2rem":e=="medium"?"1.75rem":"1.5rem",R=f.newStyled.div`
+"use strict";const h=require("react/jsx-runtime"),p=require("react"),r=require("./index-BPVoEhTF.cjs"),f=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),s=require("./utils-UJt-R-G3.cjs"),z=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),t=e=>e=="large"?"2rem":e=="medium"?"1.75rem":"1.5rem",R=f.newStyled.div`
   ${e=>s.getComponentTypographyCss(e.theme,"Badge",e.size,"enabled")};
   background-color: ${e=>s.getColorRgbaValue(e.theme,"Badge",e.color,"enabled","background","backgroundOpacity")};
   color: ${e=>s.getColorRgbaValue(e.theme,"Badge",e.color,"enabled","text")};

package/dist/Badge.js

@@ -2,7 +2,7 @@ import { jsx as h } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
 import { P as r } from "./index-S5Cd7WrG.js";
 import { n as b } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { g as p, a as o, b as z } from "./utils-DtEdJZWa.js";
+import { g as p, a as o, b as z } from "./utils-xpQsPsCa.js";
 import { u as $ } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
 const a = (e) => e == "large" ? "2rem" : e == "medium" ? "1.75rem" : "1.5rem", B = b.div`
   ${(e) => p(e.theme, "Badge", e.size, "enabled")};

package/dist/BannerSectionWithList.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("react/jsx-runtime"),o=require("react"),s=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),c=require("./consts-dNz9tpt4.cjs"),u=require("./Button.cjs"),t=require("./utils-CE6bljYe.cjs"),h=s.newStyled.div`
+"use strict";const e=require("react/jsx-runtime"),o=require("react"),s=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),c=require("./consts-dNz9tpt4.cjs"),u=require("./Button.cjs"),t=require("./utils-UJt-R-G3.cjs"),h=s.newStyled.div`
   padding-bottom: 1.38rem;
   text-align: center;
   display: flex;

package/dist/BannerSectionWithList.js

@@ -3,7 +3,7 @@ import { forwardRef as h, Fragment as x } from "react";
 import { n as o } from "./emotion-styled.browser.esm-BiK8DcgW.js";
 import { M as a } from "./consts-DNVz1x1I.js";
 import g from "./Button.js";
-import { l as t } from "./utils-DtEdJZWa.js";
+import { l as t } from "./utils-xpQsPsCa.js";
 const u = o.div`
   padding-bottom: 1.38rem;
   text-align: center;

package/dist/BlogsSectionDetailed.cjs

@@ -0,0 +1,111 @@
+"use strict";const t=require("react/jsx-runtime"),f=require("react"),p=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),b=require("./consts-dNz9tpt4.cjs"),v=require("./useDetectMobile-rBe0FiP2.cjs"),a=require("./utils-UJt-R-G3.cjs"),w=require("./style-CeMnBJ6v.cjs"),k=require("./Button.cjs"),N=p.newStyled.div`
+  display: grid;
+  grid-template-columns: ${s=>`repeat(${s.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
+
+  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+`,C=p.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: 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: ${a.linearGradientAnimation("-90deg")};
+  }
+
+  & .tags-wr {
+    margin-top: auto;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0 1rem 1rem 1rem;
+  }
+
+  @media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
+  }
+`,S=p.newStyled.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: ${a.linearGradientAnimation("-90deg")};
+    height: 1rem;
+    width: 100%;
+  }
+
+  & .skeleton-title {
+    background-color: ${a.linearGradientAnimation("-90deg")};
+    height: 1.5rem;
+    width: 70%;
+  }
+
+  & .text-wr {
+    font-weight: 400;
+    font-size: 0.875rem;
+    flex: 1;
+    color: var(--gray-700, #4e555f);
+    ${a.truncateTextInRows(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;
+  }
+`,h=f.forwardRef((s,j)=>{const{title:d,image:c,text:g,numberOfLikes:r,numberOfComments:u,readDuration:l,datePublished:m,tags:o,onCardClick:e,timeToReadText:i="read"}=s;return t.jsxs(C,{className:"blog-card",onClick:e,children:[t.jsx("img",{src:c}),t.jsxs(S,{children:[t.jsxs("div",{className:"info-wr",children:[t.jsxs("div",{className:"info-wr-1",children:[t.jsx("span",{children:m}),t.jsx("span",{className:"small-dot",children:"●"}),l&&i?`${l} ${i}`:"N/A"]}),t.jsxs("div",{className:"info-wr-2",children:[t.jsxs("span",{className:"info-wr-1",children:[t.jsx("i",{className:"mng mng-lnc-thumbs-up--filled"}),t.jsx("span",{children:r})]}),t.jsxs("span",{className:"info-wr-1",children:[t.jsx("i",{className:"mng mng-lnc-messages-filled"}),t.jsx("span",{children:u})]})]})]}),t.jsx("div",{className:"text-wr-title",children:d}),t.jsx("div",{className:"text-wr",children:g})]}),t.jsx("div",{className:"tags-wr",children:o==null?void 0:o.map((n,y)=>t.jsx(w.BlogTag,{color:n==null?void 0:n.color,children:n==null?void 0:n.name},y))})]})}),O=f.forwardRef((s,j)=>{const{icon:d,title:c,onButtonAction:g,items:r,buttonText:u,limit:l=3,onSelectCard:m=()=>{}}=s,o=v.useDetectMobile();return t.jsxs(w.RegulatTitleSectionWrapper,{children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[a.isDefinedNotEmptyString(d)&&t.jsx("i",{className:d}),t.jsx("span",{children:c})]}),a.isDefinedNotEmptyString(onSectionClick)&&t.jsx(k,{type:"button",btnType:"tinted",color:"gray",onClick:()=>g(buttonLink),borderRadius:"curved",children:u})]}),t.jsx(N,{limit:l,children:o===!0?r==null?void 0:r.map((e,i)=>t.jsx(h,{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:()=>m(e==null?void 0:e.uuid)},i)):r==null?void 0:r.slice(0,l).map((e,i)=>t.jsx(h,{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:()=>m(e==null?void 0:e.uuid)},i))})]})});module.exports=O;

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-DNVz1x1I.js";
+import { u as N } from "./useDetectMobile-BookNOsk.js";
+import { m as f, t as C, k as h } from "./utils-xpQsPsCa.js";
+import { B as O, R as S } from "./style-D6sNCRwG.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-dNz9tpt4.cjs"),h=require("./useDetectMobile-rBe0FiP2.cjs"),l=require("./utils-UJt-R-G3.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;