@lanaco/lnc-react-ui 4.0.121 → 4.0.123

package/dist/BannerSectionWithListImage.js

@@ -1,8 +1,8 @@
 import { jsxs as o, jsx as i } from "react/jsx-runtime";
-import { forwardRef as v, Fragment as $ } from "react";
+import { forwardRef as y, Fragment as v } from "react";
 import { s as n } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as m } from "./consts-BuFChS64.js";
-import y from "./Button.js";
+import { M as a } from "./consts-BuFChS64.js";
+import $ from "./Button.js";
 const H = n.div`
   display: flex;
   border-radius: 0.75rem;
@@ -26,8 +26,12 @@ const H = n.div`
 
 `}
 
-  @media (max-width: ${m + "px"}) {
+  @media (max-width: ${a + "px"}) {
     flex-direction: column;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+
     & img {
       max-width: 100%;
       min-width: 100%;
@@ -43,8 +47,8 @@ const H = n.div`
   flex: 1;
   flex-direction: column;
 
-  @media (max-width: ${m + "px"}) {
-    padding: 1.25rem;
+  @media (max-width: ${a + "px"}) {
+    padding: 0 0 1.25rem 0;
   }
 `, k = n.div`
   display: flex;
@@ -52,20 +56,27 @@ const H = n.div`
   gap: 0.25rem;
 
   & .header-title {
-    font-size: 1.5rem;
+    color: var(--gray-950, #14161a);
+    font-size: 1.75rem;
+    font-style: normal;
     font-weight: 600;
+    line-height: 2.25rem;
+    letter-spacing: -0.5904px;
   }
 
   & .header-subtitle {
-    color: var(--gray-600, #676e79);
+    color: var(--gray-950, #14161a);
     font-size: 1rem;
+    font-style: normal;
     font-weight: 500;
+    line-height: 1.5rem;
+    letter-spacing: -0.0112rem;
   }
 
-  @media (max-width: ${m + "px"}) {
+  @media (max-width: ${a + "px"}) {
     flex-direction: column;
   }
-`, B = n.div`
+`, z = n.div`
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -73,68 +84,74 @@ const H = n.div`
   font-weight: 500;
 
   & .list-item {
+    color: var(--gray-950, #14161a);
     display: flex;
     align-items: center;
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.25rem;
+    letter-spacing: -0.0056rem;
 
     & .mng {
       font-size: 1.25rem;
-      color: var(--info-600);
+      color: var(--info-600, #6d28d9);
     }
   }
 
-  @media (max-width: ${m + "px"}) {
+  @media (max-width: ${a + "px"}) {
   }
-`, N = v((e, d) => {
+`, N = y((e, l) => {
   const {
-    title: l,
+    title: d,
     subtitle: s,
-    buttonText: c,
-    list: a,
-    imageUrl: g,
+    buttonText: g,
+    list: m,
+    imageUrl: c,
     imageHeight: h,
-    imageWidth: x,
-    imageHeightMobile: p,
+    imageWidth: p,
+    imageHeightMobile: x,
     hasBorder: f = !0,
-    backgroundColor: u = "transparent",
-    onButtonAction: b = () => {
+    backgroundColor: b = "transparent",
+    onButtonAction: u = () => {
     },
     buttonLink: w
   } = e;
   return /* @__PURE__ */ o(
     H,
     {
-      ref: d,
+      ref: l,
       imgH: h,
-      imgW: x,
-      imgHMob: p,
+      imgW: p,
+      imgHMob: x,
       hasBorder: f,
-      bgColor: u,
+      bgColor: b,
       children: [
         /* @__PURE__ */ o(W, { children: [
           /* @__PURE__ */ o(k, { children: [
-            /* @__PURE__ */ i("div", { className: "header-title", children: l }),
+            /* @__PURE__ */ i("div", { className: "header-title", children: d }),
             /* @__PURE__ */ i("div", { className: "header-subitle", children: s })
           ] }),
-          /* @__PURE__ */ i(B, { children: a == null ? void 0 : a.map((t, r) => /* @__PURE__ */ i($, { children: /* @__PURE__ */ o("div", { className: "list-item", children: [
+          /* @__PURE__ */ i(z, { children: m == null ? void 0 : m.map((r, t) => /* @__PURE__ */ i(v, { children: /* @__PURE__ */ o("div", { className: "list-item", children: [
             /* @__PURE__ */ i("i", { className: "mng mng-lnc-checkmark--filled" }),
-            /* @__PURE__ */ i("span", { children: t })
-          ] }) }, r)) }),
+            /* @__PURE__ */ i("span", { children: r })
+          ] }) }, t)) }),
           /* @__PURE__ */ i(
-            y,
+            $,
             {
               size: "medium",
               color: "neutral",
               type: "button",
               btnType: "outline",
-              onClick: (t) => {
-                var r;
-                (r = t == null ? void 0 : t.target) == null || r.blur(), b(w);
+              onClick: (r) => {
+                var t;
+                (t = r == null ? void 0 : r.target) == null || t.blur(), u(w);
               },
-              children: c
+              children: g
             }
           )
         ] }),
-        /* @__PURE__ */ i("img", { src: g })
+        /* @__PURE__ */ i("img", { src: c })
       ]
     }
   );

package/dist/BlogCardsSponsoredSection.cjs

@@ -1,11 +1,11 @@
-"use strict";const r=require("react/jsx-runtime"),p=require("react"),n=require("./utils-CZynEOC_.cjs"),w=require("./Icon.cjs"),N=require("./Chip.cjs"),z=require("./index-BvSNRLNa.cjs"),y=require("./emotion-styled.browser.esm-BtEseadx.cjs"),j=require("./consts-goSZX3xP.cjs"),I=require("./suspense-large-CtcwWswP.cjs"),R=require("./Button.cjs"),k=y.styled.div`
+"use strict";const r=require("react/jsx-runtime"),p=require("react"),n=require("./utils-CZynEOC_.cjs"),w=require("./Icon.cjs"),N=require("./Chip.cjs"),z=require("./index-BvSNRLNa.cjs"),y=require("./emotion-styled.browser.esm-BtEseadx.cjs"),v=require("./consts-goSZX3xP.cjs"),I=require("./suspense-large-CtcwWswP.cjs"),R=require("./Button.cjs"),k=y.styled.div`
   display: flex;
   padding: 1rem;
   align-items: center;
   gap: 1.25rem;
   border-radius: 1.25rem;
   align-items: stretch;
-  border: ${s=>s!=null&&s.isSponsored?"2px solid var(--yellow-500, #f59e0b)":"1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08))"};
+  border: ${i=>i!=null&&i.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;
@@ -37,6 +37,7 @@
     width: 100%;
     object-fit: cover;
     height: auto;
+    max-width: 12.5rem;
     max-height: 9rem;
     border-radius: 0.75rem;
   }
@@ -61,7 +62,7 @@
         font-weight: 600;
         line-height: 1.5rem;
         letter-spacing: 0.1px;
-        ${n.truncateTextInRows(3)}
+        ${n.truncateTextInRows(2)}
       }
 
       & .wrapper__tags {
@@ -98,17 +99,22 @@
         font-weight: 400;
         line-height: 1rem;
         letter-spacing: 0.4px;
+
+        & i {
+          color: var(--gray-300, #bcc4cf);
+        }
       }
     }
   }
 
-  @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
     padding: 0;
 
     & .wrapper__image {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
+      max-width: 100%;
     }
 
     & .wrapper__content {
@@ -126,7 +132,7 @@
       }
     }
   }
-`,q=p.forwardRef(({title:s,imageUrl:c,options:i,publishedAt:g,timeToReadText:_="{0} min read",timeToRead:f=0,numberOfLikes:l=0,numberOfComments:d=0,isSponsored:o=!1,onSelectCard:m=()=>{},onSelectOption:u=()=>{}},b)=>r.jsxs(k,{isSponsored:o,onClick:m,children:[o&&r.jsx("div",{className:"wrapper__sponsored",children:r.jsx(w,{icon:" mng-lnc-paw",sizeInUnits:"1.5rem"})}),r.jsx(z.ProductImageWrapper,{src:c,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsxs("div",{className:"wrapper__subcontent",children:[r.jsx("div",{className:"wrapper__title",children:s}),r.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.map((a,h)=>r.jsx(N,{label:a==null?void 0:a.name,color:a==null?void 0:a.color,className:"wrapper__tag",onClick:t=>{t==null||t.stopPropagation(),u(a==null?void 0:a.code)}},`blog-card-sponsored-option__${h+1}`)))})]}),r.jsxs("div",{className:"wrapper__info",children:[r.jsx("div",{className:"info__text",children:`${n.formatLocaleDateString(g)} • ${n.formatString(_,f)}`}),r.jsxs("div",{className:"info__text",children:[r.jsxs("div",{children:[r.jsx(w,{icon:" mng-lnc-thumbs-up",sizeInUnits:"1rem"}),n.getRoundedNumber(l)]}),r.jsxs("div",{children:[r.jsx(w,{icon:" mng-lnc-messages",sizeInUnits:"1rem"}),n.getRoundedNumber(d)]})]})]})]})]})),$=y.styled.div`
+`,q=p.forwardRef(({title:i,imageUrl:c,options:s,publishedAt:g,timeToReadText:_="{0} min read",timeToRead:f=0,numberOfLikes:l=0,numberOfComments:d=0,isSponsored:o=!1,onSelectCard:m=()=>{},onSelectOption:u=()=>{}},b)=>r.jsxs(k,{isSponsored:o,onClick:m,children:[o&&r.jsx("div",{className:"wrapper__sponsored",children:r.jsx(w,{icon:" mng-lnc-paw",sizeInUnits:"1.5rem"})}),r.jsx(z.ProductImageWrapper,{src:c,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsxs("div",{className:"wrapper__subcontent",children:[r.jsx("div",{className:"wrapper__title",children:i}),r.jsx("div",{className:"wrapper__tags",children:s&&(s==null?void 0:s.map((a,h)=>r.jsx(N,{label:a==null?void 0:a.name,color:a==null?void 0:a.color,className:"wrapper__tag",onClick:t=>{t==null||t.stopPropagation(),u(a==null?void 0:a.code)}},`blog-card-sponsored-option__${h+1}`)))})]}),r.jsxs("div",{className:"wrapper__info",children:[r.jsx("div",{className:"info__text",children:`${n.formatLocaleDateString(g)} • ${n.formatString(_,f)}`}),r.jsxs("div",{className:"info__text",children:[r.jsxs("div",{children:[r.jsx(w,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),n.getRoundedNumber(l)]}),r.jsxs("div",{children:[r.jsx(w,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),n.getRoundedNumber(d)]})]})]})]})]})),$=y.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -196,7 +202,7 @@
     width: 100%;
   }
 
-  @media (max-width: ${j.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__title {
       & .title__text {
         font-size: 1.375rem;
@@ -208,4 +214,4 @@
       gap: 1rem;
     }
   }
-`,S=p.memo(q),L=p.forwardRef(({title:s,subtitle:c,icon:i,buttonText:g,buttonLink:_,timeToReadText:f="{0} min read",items:l,onButtonAction:d=()=>{},onSelectCard:o=()=>{},onSelectOption:m=()=>{},isLoading:u=!1,getImage:b=()=>{}},a)=>{const h=p.useMemo(()=>{var t;return(t=l==null?void 0:l.slice(0,4))==null?void 0:t.map((e,v)=>r.jsx(S,{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:()=>o==null?void 0:o(e),onSelectOption:x=>m==null?void 0:m(x),imageUrl:b(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null},`blog-card-sponsored__${v+1}`))},[l]);return r.jsxs($,{children:[r.jsxs("div",{className:"wrapper__heading",children:[r.jsxs("div",{className:"wrapper__title",children:[s&&r.jsxs("div",{className:"title__text",children:[n.isDefinedNotEmptyString(i)&&r.jsx("i",{className:i}),r.jsx("span",{children:s})]}),d&&r.jsx(R,{text:g,borderRadius:"curved",btnType:"tinted",className:"title__action",color:"neutral",onClick:t=>{var e;(e=t==null?void 0:t.target)==null||e.blur(),d==null||d(_)}})]}),c&&r.jsx("div",{className:"wrapper__subtitle",children:c})]}),r.jsx("div",{className:"wrapper__cards",children:r.jsx(I.SuspenseBlogLarge,{isLoading:u,limit:4,keyPrefix:"blog-section",children:h})})]})});module.exports=L;
+`,S=p.memo(q),L=p.forwardRef(({title:i,subtitle:c,icon:s,buttonText:g,buttonLink:_,timeToReadText:f="{0} min read",items:l,onButtonAction:d=()=>{},onSelectCard:o=()=>{},onSelectOption:m=()=>{},isLoading:u=!1,getImage:b=()=>{}},a)=>{const h=p.useMemo(()=>{var t;return(t=l==null?void 0:l.slice(0,4))==null?void 0:t.map((e,j)=>r.jsx(S,{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:()=>o==null?void 0:o(e),onSelectOption:x=>m==null?void 0:m(x),imageUrl:b(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null},`blog-card-sponsored__${j+1}`))},[l]);return r.jsxs($,{children:[r.jsxs("div",{className:"wrapper__heading",children:[r.jsxs("div",{className:"wrapper__title",children:[i&&r.jsxs("div",{className:"title__text",children:[n.isDefinedNotEmptyString(s)&&r.jsx("i",{className:s}),r.jsx("span",{children:i})]}),d&&r.jsx(R,{text:g,borderRadius:"curved",btnType:"tinted",className:"title__action",color:"neutral",onClick:t=>{var e;(e=t==null?void 0:t.target)==null||e.blur(),d==null||d(_)}})]}),c&&r.jsx("div",{className:"wrapper__subtitle",children:c})]}),r.jsx("div",{className:"wrapper__cards",children:r.jsx(I.SuspenseBlogLarge,{isLoading:u,limit:4,keyPrefix:"blog-section",children:h})})]})});module.exports=L;

package/dist/BlogCardsSponsoredSection.js

@@ -15,7 +15,7 @@ const T = N.div`
   gap: 1.25rem;
   border-radius: 1.25rem;
   align-items: stretch;
-  border: ${(s) => s != null && s.isSponsored ? "2px solid var(--yellow-500, #f59e0b)" : "1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08))"};
+  border: ${(l) => l != null && l.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;
@@ -47,6 +47,7 @@ const T = N.div`
     width: 100%;
     object-fit: cover;
     height: auto;
+    max-width: 12.5rem;
     max-height: 9rem;
     border-radius: 0.75rem;
   }
@@ -71,7 +72,7 @@ const T = N.div`
         font-weight: 600;
         line-height: 1.5rem;
         letter-spacing: 0.1px;
-        ${y(3)}
+        ${y(2)}
       }
 
       & .wrapper__tags {
@@ -108,6 +109,10 @@ const T = N.div`
         font-weight: 400;
         line-height: 1rem;
         letter-spacing: 0.4px;
+
+        & i {
+          color: var(--gray-300, #bcc4cf);
+        }
       }
     }
   }
@@ -119,6 +124,7 @@ const T = N.div`
     & .wrapper__image {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
+      max-width: 100%;
     }
 
     & .wrapper__content {
@@ -138,9 +144,9 @@ const T = N.div`
   }
 `, E = v(
   ({
-    title: s,
+    title: l,
     imageUrl: d,
-    options: l,
+    options: s,
     publishedAt: c,
     timeToReadText: g = "{0} min read",
     timeToRead: f = 0,
@@ -156,8 +162,8 @@ const T = N.div`
     /* @__PURE__ */ r(P, { 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: s }),
-        /* @__PURE__ */ r("div", { className: "wrapper__tags", children: l && (l == null ? void 0 : l.map((i, h) => /* @__PURE__ */ r(
+        /* @__PURE__ */ r("div", { className: "wrapper__title", children: l }),
+        /* @__PURE__ */ r("div", { className: "wrapper__tags", children: s && (s == null ? void 0 : s.map((i, h) => /* @__PURE__ */ r(
           L,
           {
             label: i == null ? void 0 : i.name,
@@ -176,11 +182,11 @@ const T = N.div`
         )} • ${C(g, f)}` }),
         /* @__PURE__ */ a("div", { className: "info__text", children: [
           /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ r(w, { icon: " mng-lnc-thumbs-up", sizeInUnits: "1rem" }),
+            /* @__PURE__ */ r(w, { icon: " mng-lnc-thumbs-up--filled", sizeInUnits: "1rem" }),
             b(n)
           ] }),
           /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ r(w, { icon: " mng-lnc-messages", sizeInUnits: "1rem" }),
+            /* @__PURE__ */ r(w, { icon: " mng-lnc-messages-filled", sizeInUnits: "1rem" }),
             b(m)
           ] })
         ] })
@@ -271,9 +277,9 @@ const T = N.div`
   }
 `, B = j(E), Q = v(
   ({
-    title: s,
+    title: l,
     subtitle: d,
-    icon: l,
+    icon: s,
     buttonText: c,
     buttonLink: g,
     timeToReadText: f = "{0} min read",
@@ -312,9 +318,9 @@ const T = N.div`
     return /* @__PURE__ */ a(W, { children: [
       /* @__PURE__ */ a("div", { className: "wrapper__heading", children: [
         /* @__PURE__ */ a("div", { className: "wrapper__title", children: [
-          s && /* @__PURE__ */ a("div", { className: "title__text", children: [
-            R(l) && /* @__PURE__ */ r("i", { className: l }),
-            /* @__PURE__ */ r("span", { children: s })
+          l && /* @__PURE__ */ a("div", { className: "title__text", children: [
+            R(s) && /* @__PURE__ */ r("i", { className: s }),
+            /* @__PURE__ */ r("span", { children: l })
           ] }),
           m && /* @__PURE__ */ r(
             M,

package/dist/BlogListSection.cjs

@@ -24,6 +24,7 @@
     object-fit: cover;
     height: auto;
     max-height: 9rem;
+    max-width: 17.75rem;
     border-radius: 0.75rem;
   }
 
@@ -79,7 +80,6 @@
       & .info__content {
         display: flex;
         align-items: center;
-        justify-content: space-between;
 
         &:first-of-type {
           flex-grow: 1;
@@ -95,6 +95,10 @@
           font-weight: 400;
           line-height: 1rem;
           letter-spacing: 0.4px;
+
+          & i {
+            color: var(--gray-300, #bcc4cf);
+          }
         }
       }
     }
@@ -106,6 +110,10 @@
     background: transparent;
     border: none;
 
+    & .wrapper__image {
+      max-width: 100%;
+    }
+
     & .desktop-only {
       display: none !important;
     }
@@ -145,7 +153,7 @@
       }
     }
   }
-`,C=p.forwardRef(({title:g,imageUrl:i,options:s,publishedAt:n,timeToReadText:a="{0} min read",timeToRead:l=0,numberOfLikes:u=0,numberOfComments:f=0,isBookmarked:c=!1,onSelectCard:h=()=>{},onSelectOption:_=()=>{},onBookmark:e=()=>{},onShare:d=()=>{}},w)=>t.jsxs(I,{onClick:h,children:[t.jsx(N.ProductImageWrapper,{src:i,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:s&&(s==null?void 0:s.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",sizeInUnits:"1rem"}),o.getRoundedNumber(u)]}),t.jsxs("div",{children:[t.jsx(y,{icon:" mng-lnc-messages",sizeInUnits:"1rem"}),o.getRoundedNumber(f)]})]})]}),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: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`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -167,4 +175,4 @@
       bottom: -0.75rem;
     }
   }
-`,z=p.memo(C),L=p.forwardRef(({timeToReadText:g="{0} min read",items:i,onSelectCard:s=()=>{},onSelectOption:n=()=>{},onShare:a=()=>{},onBookmark:l=()=>{},isLoading:u=!1,getImage:f=()=>{},isSeparated:c=!0},h)=>{const _=p.useMemo(()=>i==null?void 0:i.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:()=>s==null?void 0:s(e),onSelectOption:w=>n==null?void 0:n(w),onShare:()=>a==null?void 0:a(e),onBookmark:()=>l==null?void 0:l(e),imageUrl:f(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null},`blog-card-item__${d+1}`)),[i]);return t.jsx(P,{className:c?"separated":"",children:t.jsx(q.SuspenseBlogLarge,{isLoading:u,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: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;

package/dist/BlogListSection.js

@@ -1,9 +1,9 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { forwardRef as v, memo as j, useMemo as I } from "react";
+import { forwardRef as v, memo as I, useMemo as P } from "react";
 import w from "./Icon.js";
 import d from "./IconButton.js";
-import P from "./Chip.js";
-import { p as R, s as C, v as z, w as y } from "./utils-BbgAIA9N.js";
+import R from "./Chip.js";
+import { p as j, s as C, v as z, w as y } from "./utils-BbgAIA9N.js";
 import { P as T } from "./index-YGcWbzeb.js";
 import { s as k } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as $ } from "./consts-BuFChS64.js";
@@ -34,6 +34,7 @@ const B = k.div`
     object-fit: cover;
     height: auto;
     max-height: 9rem;
+    max-width: 17.75rem;
     border-radius: 0.75rem;
   }
 
@@ -57,7 +58,7 @@ const B = k.div`
         font-weight: 600;
         line-height: 1.5rem;
         letter-spacing: 0.1px;
-        ${R(3)}
+        ${j(3)}
       }
 
       & .wrapper__tags {
@@ -89,7 +90,6 @@ const B = k.div`
       & .info__content {
         display: flex;
         align-items: center;
-        justify-content: space-between;
 
         &:first-of-type {
           flex-grow: 1;
@@ -105,6 +105,10 @@ const B = k.div`
           font-weight: 400;
           line-height: 1rem;
           letter-spacing: 0.4px;
+
+          & i {
+            color: var(--gray-300, #bcc4cf);
+          }
         }
       }
     }
@@ -116,6 +120,10 @@ const B = k.div`
     background: transparent;
     border: none;
 
+    & .wrapper__image {
+      max-width: 100%;
+    }
+
     & .desktop-only {
       display: none !important;
     }
@@ -181,7 +189,7 @@ const B = k.div`
         /* @__PURE__ */ t("div", { className: "wrapper__title", children: p }),
         /* @__PURE__ */ i("div", { className: "wrapper__tags-action", children: [
           /* @__PURE__ */ t("div", { className: "wrapper__tags", children: a && (a == null ? void 0 : a.map((r, N) => /* @__PURE__ */ t(
-            P,
+            R,
             {
               label: r == null ? void 0 : r.name,
               color: r == null ? void 0 : r.color,
@@ -227,11 +235,11 @@ const B = k.div`
           )} • ${z(o, s)}` }),
           /* @__PURE__ */ i("div", { className: "info__text", children: [
             /* @__PURE__ */ i("div", { children: [
-              /* @__PURE__ */ t(w, { icon: " mng-lnc-thumbs-up", sizeInUnits: "1rem" }),
+              /* @__PURE__ */ t(w, { icon: " mng-lnc-thumbs-up--filled", sizeInUnits: "1rem" }),
               y(g)
             ] }),
             /* @__PURE__ */ i("div", { children: [
-              /* @__PURE__ */ t(w, { icon: " mng-lnc-messages", sizeInUnits: "1rem" }),
+              /* @__PURE__ */ t(w, { icon: " mng-lnc-messages-filled", sizeInUnits: "1rem" }),
               y(f)
             ] })
           ] })
@@ -287,7 +295,7 @@ const B = k.div`
       bottom: -0.75rem;
     }
   }
-`, W = j(M), J = v(
+`, W = I(M), J = v(
   ({
     timeToReadText: p = "{0} min read",
     items: n,
@@ -304,7 +312,7 @@ const B = k.div`
     },
     isSeparated: c = !0
   }, b) => {
-    const _ = I(() => n == null ? void 0 : n.map((e, m) => /* @__PURE__ */ t(
+    const _ = P(() => n == null ? void 0 : n.map((e, m) => /* @__PURE__ */ t(
       W,
       {
         title: e == null ? void 0 : e.title,

package/dist/BlogsSectionSimple.cjs

@@ -1,12 +1,12 @@
-"use strict";const r=require("react/jsx-runtime"),c=require("react"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),S=require("./consts-goSZX3xP.cjs"),N=require("./useDetectMobile-zkbzoOGV.cjs"),u=require("./utils-CZynEOC_.cjs"),q=require("./style-JqDQj4jh.cjs"),x=require("./Button.cjs"),R=require("./Link.cjs"),M=require("./index-BvSNRLNa.cjs"),B=p.styled.div`
+"use strict";const r=require("react/jsx-runtime"),c=require("react"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),y=require("./consts-goSZX3xP.cjs"),N=require("./useDetectMobile-zkbzoOGV.cjs"),u=require("./utils-CZynEOC_.cjs"),q=require("./style-JqDQj4jh.cjs"),x=require("./Button.cjs"),R=require("./Link.cjs"),M=require("./index-BvSNRLNa.cjs"),B=p.styled.div`
   display: grid;
   grid-template-columns: ${t=>`repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,b=p.styled.div`
+`,S=p.styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -21,7 +21,6 @@
   cursor: pointer;
 
   &:hover {
-    
   }
 
   & img {
@@ -41,11 +40,21 @@
   & .action {
     padding: 0 1rem 1rem 1rem;
     margin-top: auto;
+    color: var(--gray-950, #14161a);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.25rem;
+    letter-spacing: -0.0056rem;
+
+    &:hover {
+      color: var(--gray-700, #4e555f);
+    }
   }
 
-  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
   }
-`,w=p.styled.div`
+`,b=p.styled.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -65,4 +74,4 @@
     color: var(--gray-700, #4e555f);
     ${u.truncateTextInRows(3)}
   }
-`,$=c.forwardRef((t,l)=>{const{title:i,imageUrl:n,text:o,onCardClick:d,readMoreText:m="Read more"}=t;return r.jsxs(b,{ref:l,className:"blog-card",onClick:d,children:[r.jsx(M.ProductImageWrapper,{src:n}),r.jsxs(w,{children:[r.jsx("div",{className:"text-wr-title",children:i}),r.jsx("div",{className:"text-wr",children:o})]}),r.jsx(R,{className:"action",color:"gray",onClick:d,children:m})]})}),I=c.forwardRef(({},t)=>r.jsxs(b,{className:"product-card",children:[r.jsx("div",{className:"skeleton-img"}),r.jsx("div",{className:"card-title"}),r.jsx(w,{})]})),P=({limit:t=3,isLoading:l=!1,keyPrefix:i})=>r.jsx(r.Fragment,{children:Array.from({length:t},(n,o)=>r.jsx(I,{isLoading:l},`${i}-skeleton-product-card-${o}`))}),T=({children:t,fallbackComponent:l=r.jsx(r.Fragment,{}),isLoading:i=!1,limit:n,keyPrefix:o})=>r.jsx(c.Suspense,{fallbackComponent:l,children:i===!0?r.jsx(P,{isLoading:i,limit:n,keyPrefix:o}):t}),j=c.memo($),_=c.forwardRef((t,l)=>{const{icon:i,title:n,onButtonAction:o=()=>{},onSelectCard:d=()=>{},buttonLink:m,items:s,buttonText:y,limit:g=3,isLoading:v=!1,getImage:h=()=>{},readMoreText:f="Read more"}=t,k=N.useDetectMobile(),C=c.useMemo(()=>r.jsx(r.Fragment,{children:k===!0?s==null?void 0:s.map((e,a)=>r.jsx(j,{title:e==null?void 0:e.title,imageUrl:h(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,readMoreText:f,onCardClick:()=>d(e==null?void 0:e.titleSlug)},a)):s==null?void 0:s.slice(0,g).map((e,a)=>r.jsx(j,{title:e==null?void 0:e.title,imageUrl:h(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,readMoreText:f,onCardClick:()=>d(e==null?void 0:e.titleSlug)},a))}),[s]);return r.jsxs(q.RegulatTitleSectionWrapper,{ref:l,children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[u.isDefinedNotEmptyString(i)&&r.jsx("i",{className:i}),r.jsx("span",{children:n})]}),u.isDefinedNotEmptyString(m)&&r.jsx(x,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var a;(a=e==null?void 0:e.target)==null||a.blur(),o(m)},borderRadius:"curved",className:"button-link",children:y})]}),r.jsx(B,{limit:g,children:r.jsx(T,{isLoading:v,limit:g,keyPrefix:"explore-landing",children:C})})]})});module.exports=_;
+`,$=c.forwardRef((t,o)=>{const{title:i,imageUrl:s,text:l,onCardClick:d,readMoreText:m="Read more"}=t;return r.jsxs(S,{ref:o,className:"blog-card",onClick:d,children:[r.jsx(M.ProductImageWrapper,{src:s}),r.jsxs(b,{children:[r.jsx("div",{className:"text-wr-title",children:i}),r.jsx("div",{className:"text-wr",children:l})]}),r.jsx(R,{className:"action",color:"gray",onClick:d,children:m})]})}),I=c.forwardRef(({},t)=>r.jsxs(S,{className:"product-card",children:[r.jsx("div",{className:"skeleton-img"}),r.jsx("div",{className:"card-title"}),r.jsx(b,{})]})),P=({limit:t=3,isLoading:o=!1,keyPrefix:i})=>r.jsx(r.Fragment,{children:Array.from({length:t},(s,l)=>r.jsx(I,{isLoading:o},`${i}-skeleton-product-card-${l}`))}),T=({children:t,fallbackComponent:o=r.jsx(r.Fragment,{}),isLoading:i=!1,limit:s,keyPrefix:l})=>r.jsx(c.Suspense,{fallbackComponent:o,children:i===!0?r.jsx(P,{isLoading:i,limit:s,keyPrefix:l}):t}),j=c.memo($),_=c.forwardRef((t,o)=>{const{icon:i,title:s,onButtonAction:l=()=>{},onSelectCard:d=()=>{},buttonLink:m,items:n,buttonText:v,limit:g=3,isLoading:w=!1,getImage:h=()=>{},readMoreText:f="Read more"}=t,k=N.useDetectMobile(),C=c.useMemo(()=>r.jsx(r.Fragment,{children:k===!0?n==null?void 0:n.map((e,a)=>r.jsx(j,{title:e==null?void 0:e.title,imageUrl:h(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,readMoreText:f,onCardClick:()=>d(e==null?void 0:e.titleSlug)},a)):n==null?void 0:n.slice(0,g).map((e,a)=>r.jsx(j,{title:e==null?void 0:e.title,imageUrl:h(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,text:e==null?void 0:e.description,titleSlug:e==null?void 0:e.titleSlug,readMoreText:f,onCardClick:()=>d(e==null?void 0:e.titleSlug)},a))}),[n]);return r.jsxs(q.RegulatTitleSectionWrapper,{ref:o,children:[r.jsxs("div",{className:"regular-title",children:[r.jsxs("div",{className:"regular-title-text",children:[u.isDefinedNotEmptyString(i)&&r.jsx("i",{className:i}),r.jsx("span",{children:s})]}),u.isDefinedNotEmptyString(m)&&r.jsx(x,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var a;(a=e==null?void 0:e.target)==null||a.blur(),l(m)},borderRadius:"curved",className:"button-link",children:v})]}),r.jsx(B,{limit:g,children:r.jsx(T,{isLoading:w,limit:g,keyPrefix:"explore-landing",children:C})})]})});module.exports=_;