@lanaco/lnc-react-ui 4.0.112 → 4.0.114

package/dist/BlogCardsSponsoredSection.js

@@ -1,21 +1,21 @@
 import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { forwardRef as v, memo as z, useMemo as j } from "react";
-import { p as I, s as S, v as $, w as b, k as C } from "./utils-BbgAIA9N.js";
+import { forwardRef as v, memo as j, useMemo as I } from "react";
+import { p as y, s as S, v as C, w as b, k as R } from "./utils-BbgAIA9N.js";
 import w from "./Icon.js";
-import R from "./Chip.js";
-import { P as L } from "./index-YGcWbzeb.js";
-import { s as y } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { S as P } from "./suspense-large-BM9s_kZP.js";
-import U from "./Button.js";
-import { M } from "./consts-BuFChS64.js";
-const T = y.div`
+import L from "./Chip.js";
+import { P } from "./index-YGcWbzeb.js";
+import { s as N } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as z } from "./consts-BuFChS64.js";
+import { S as U } from "./suspense-large-BM9s_kZP.js";
+import M from "./Button.js";
+const T = N.div`
   display: flex;
   padding: 1rem;
   align-items: center;
   gap: 1.25rem;
   border-radius: 1.25rem;
   align-items: stretch;
-  border: ${(l) => l != null && l.isSponsored ? "2px solid var(--yellow-500, #f59e0b)" : "1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08))"};
+  border: ${(s) => s != null && s.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;
@@ -71,7 +71,7 @@ const T = y.div`
         font-weight: 600;
         line-height: 1.5rem;
         letter-spacing: 0.1px;
-        ${I(3)}
+        ${y(3)}
       }
 
       & .wrapper__tags {
@@ -112,41 +112,53 @@ const T = y.div`
     }
   }
 
-  @media (max-width: 400px) {
+  @media (max-width: ${z + "px"}) {
     flex-direction: column;
+    padding: 0;
+
+    & .wrapper__image {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
     & .wrapper__content {
       gap: 1rem;
+      padding: 0 1rem 1rem 1rem;
+
+      & .wrapper__subcontent {
+        order: 1;
+      }
 
       & .wrapper__info {
         gap: 0.5rem;
-        flex-direction: column;
+        justify-content: space-between;
+        order: 0;
       }
     }
   }
 `, E = v(
   ({
-    title: l,
+    title: s,
     imageUrl: d,
-    options: s,
+    options: l,
     publishedAt: c,
     timeToReadText: g = "{0} min read",
     timeToRead: f = 0,
     numberOfLikes: n = 0,
     numberOfComments: m = 0,
-    isSponsored: p = !1,
-    onSelectCard: o = () => {
+    isSponsored: o = !1,
+    onSelectCard: p = () => {
     },
     onSelectOption: _ = () => {
     }
-  }, u) => /* @__PURE__ */ a(T, { isSponsored: p, onClick: o, children: [
-    p && /* @__PURE__ */ r("div", { className: "wrapper__sponsored", children: /* @__PURE__ */ r(w, { icon: " mng-lnc-paw", sizeInUnits: "1.5rem" }) }),
-    /* @__PURE__ */ r(L, { src: d, className: "wrapper__image" }),
+  }, u) => /* @__PURE__ */ a(T, { isSponsored: o, onClick: p, children: [
+    o && /* @__PURE__ */ r("div", { className: "wrapper__sponsored", children: /* @__PURE__ */ r(w, { icon: " mng-lnc-paw", sizeInUnits: "1.5rem" }) }),
+    /* @__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: l }),
-        /* @__PURE__ */ r("div", { className: "wrapper__tags", children: s && (s == null ? void 0 : s.map((i, h) => /* @__PURE__ */ r(
-          R,
+        /* @__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(
+          L,
           {
             label: i == null ? void 0 : i.name,
             color: i == null ? void 0 : i.color,
@@ -161,7 +173,7 @@ const T = y.div`
       /* @__PURE__ */ a("div", { className: "wrapper__info", children: [
         /* @__PURE__ */ r("div", { className: "info__text", children: `${S(
           c
-        )} • ${$(g, f)}` }),
+        )} • ${C(g, f)}` }),
         /* @__PURE__ */ a("div", { className: "info__text", children: [
           /* @__PURE__ */ a("div", { children: [
             /* @__PURE__ */ r(w, { icon: " mng-lnc-thumbs-up", sizeInUnits: "1rem" }),
@@ -175,7 +187,7 @@ const T = y.div`
       ] })
     ] })
   ] })
-), W = y.div`
+), W = N.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -193,7 +205,8 @@ const T = y.div`
 
       & .title__text {
         color: var(--gray-950, #14161a);
-        text-align: center;
+        ${y(2)}
+
         font-size: 1.5rem;
         font-style: normal;
         font-weight: 600;
@@ -244,12 +257,10 @@ const T = y.div`
     width: 100%;
   }
 
-  @media (max-width: ${M + "px"}) {
-    & .wrapper__heading {
-      & .wrapper__title {
-        & .title__action {
-          display: none;
-        }
+  @media (max-width: ${z + "px"}) {
+    & .wrapper__title {
+      & .title__text {
+        font-size: 1.375rem;
       }
     }
 
@@ -258,28 +269,28 @@ const T = y.div`
       gap: 1rem;
     }
   }
-`, B = z(E), Q = v(
+`, B = j(E), Q = v(
   ({
-    title: l,
+    title: s,
     subtitle: d,
-    icon: s,
+    icon: l,
     buttonText: c,
     buttonLink: g,
     timeToReadText: f = "{0} min read",
     items: n,
     onButtonAction: m = () => {
     },
-    onSelectCard: p = () => {
+    onSelectCard: o = () => {
     },
-    onSelectOption: o = () => {
+    onSelectOption: p = () => {
     },
     isLoading: _ = !1,
     getImage: u = () => {
     }
   }, i) => {
-    const h = j(() => {
+    const h = I(() => {
       var t;
-      return (t = n == null ? void 0 : n.slice(0, 4)) == null ? void 0 : t.map((e, N) => /* @__PURE__ */ r(
+      return (t = n == null ? void 0 : n.slice(0, 4)) == null ? void 0 : t.map((e, k) => /* @__PURE__ */ r(
         B,
         {
           title: e == null ? void 0 : e.title,
@@ -291,27 +302,28 @@ const T = y.div`
           numberOfLikes: e == null ? void 0 : e.numberOfLikes,
           numberOfComments: e == null ? void 0 : e.numberOfComments,
           isSponsored: e == null ? void 0 : e.isSponsored,
-          onSelectCard: () => p == null ? void 0 : p(e),
-          onSelectOption: (k) => o == null ? void 0 : o(k),
+          onSelectCard: () => o == null ? void 0 : o(e),
+          onSelectOption: ($) => p == null ? void 0 : p($),
           imageUrl: u(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null
         },
-        `blog-card-sponsored__${N + 1}`
+        `blog-card-sponsored__${k + 1}`
       ));
     }, [n]);
     return /* @__PURE__ */ a(W, { children: [
       /* @__PURE__ */ a("div", { className: "wrapper__heading", children: [
         /* @__PURE__ */ a("div", { className: "wrapper__title", children: [
-          l && /* @__PURE__ */ a("div", { className: "title__text", children: [
-            C(s) && /* @__PURE__ */ r("i", { className: s }),
-            /* @__PURE__ */ r("span", { children: l })
+          s && /* @__PURE__ */ a("div", { className: "title__text", children: [
+            R(l) && /* @__PURE__ */ r("i", { className: l }),
+            /* @__PURE__ */ r("span", { children: s })
           ] }),
           m && /* @__PURE__ */ r(
-            U,
+            M,
             {
               text: c,
               borderRadius: "curved",
               btnType: "tinted",
               className: "title__action",
+              color: "neutral",
               onClick: (t) => {
                 var e;
                 (e = t == null ? void 0 : t.target) == null || e.blur(), m == null || m(g);
@@ -322,7 +334,7 @@ const T = y.div`
         d && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: d })
       ] }),
       /* @__PURE__ */ r("div", { className: "wrapper__cards", children: /* @__PURE__ */ r(
-        P,
+        U,
         {
           isLoading: _,
           limit: 4,

package/dist/BlogListSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),c=require("react"),w=require("./Icon.cjs"),y=require("./IconButton.cjs"),N=require("./Chip.cjs"),o=require("./utils-CZynEOC_.cjs"),k=require("./index-BvSNRLNa.cjs"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),R=require("./suspense-large-CtcwWswP.cjs"),q=j.styled.div`
+"use strict";const t=require("react/jsx-runtime"),p=require("react"),y=require("./Icon.cjs"),m=require("./IconButton.cjs"),k=require("./Chip.cjs"),o=require("./utils-CZynEOC_.cjs"),N=require("./index-BvSNRLNa.cjs"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),R=require("./consts-goSZX3xP.cjs"),q=require("./suspense-large-CtcwWswP.cjs"),I=j.styled.div`
   display: flex;
   padding: 1rem;
   align-items: center;
@@ -11,6 +11,10 @@
   position: relative;
   width: 100%;
 
+  & .mobile-only {
+    display: none;
+  }
+
   &:hover {
     cursor: pointer;
   }
@@ -75,6 +79,7 @@
       & .info__content {
         display: flex;
         align-items: center;
+        justify-content: space-between;
 
         &:first-of-type {
           flex-grow: 1;
@@ -95,29 +100,52 @@
     }
   }
 
-  @media (max-width: 400px) {
+  @media (max-width: ${R.MOBILE_SIZE_PX+"px"}) {
     flex-direction: column;
+    padding: 0;
+    background: transparent;
+    border: none;
+
+    & .desktop-only {
+      display: none !important;
+    }
+
+    & .mobile-only {
+      display: block;
+    }
+
+    & .wrapper__subcontent {
+      order: 1;
+    }
+
+    & .wrapper__tags-action {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    & .wrapper__tags {
+      flex: 1;
+    }
 
     & .wrapper__content {
       gap: 1rem;
 
       & .wrapper__info {
         gap: 0.5rem;
-        flex-direction: column;
+        justify-content: space-between;
         width: 100%;
+        order: 0;
 
         & .info__content {
           align-items: flex-start;
           width: 100%;
-
-          &:first-of-type {
-            flex-direction: column;
-          }
         }
       }
     }
   }
-`,I=c.forwardRef(({title:d,imageUrl:s,options:i,publishedAt:a,timeToReadText:n="{0} min read",timeToRead:l=0,numberOfLikes:m=0,numberOfComments:p=0,isBookmarked:g=!1,onSelectCard:h=()=>{},onSelectOption:f=()=>{},onBookmark:e=()=>{},onShare:u=()=>{}},b)=>r.jsxs(q,{onClick:h,children:[r.jsx(k.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,v)=>r.jsx(N,{label:t==null?void 0:t.name,color:t==null?void 0:t.color,className:"wrapper__tag",onClick:_=>{_==null||_.stopPropagation(),f(t==null?void 0:t.code)}},`blog-card-sponsored-option__${v+1}`)))})]}),r.jsxs("div",{className:"wrapper__info",children:[r.jsxs("div",{className:"info__content",children:[r.jsx("div",{className:"info__text",children:`${o.formatLocaleDateString(a)} • ${o.formatString(n,l)}`}),r.jsxs("div",{className:"info__text",children:[r.jsxs("div",{children:[r.jsx(w,{icon:" mng-lnc-thumbs-up",sizeInUnits:"1rem"}),o.getRoundedNumber(m)]}),r.jsxs("div",{children:[r.jsx(w,{icon:" mng-lnc-messages",sizeInUnits:"1rem"}),o.getRoundedNumber(p)]})]})]}),r.jsxs("div",{className:"info__content",children:[r.jsx(y,{icon:g?" mng-lnc-bookmark--filled":" mng-lnc-bookmark",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:t=>{t==null||t.stopPropagation(),e()}}),r.jsx(y,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:t=>{t==null||t.stopPropagation(),u()}})]})]})]})]})),z=j.styled.div`
+`,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`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -139,4 +167,4 @@
       bottom: -0.75rem;
     }
   }
-`,C=c.memo(I),L=c.forwardRef(({timeToReadText:d="{0} min read",items:s,onSelectCard:i=()=>{},onSelectOption:a=()=>{},onShare:n=()=>{},onBookmark:l=()=>{},isLoading:m=!1,getImage:p=()=>{},isSeparated:g=!0},h)=>{const f=c.useMemo(()=>s==null?void 0:s.map((e,u)=>r.jsx(C,{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,isBookmarked:e==null?void 0:e.isBookmarked,onSelectCard:()=>i==null?void 0:i(e),onSelectOption:b=>a==null?void 0:a(b),onShare:()=>n==null?void 0:n(e),onBookmark:()=>l==null?void 0:l(e),imageUrl:p(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null},`blog-card-item__${u+1}`)),[s]);return r.jsx(z,{className:g?"separated":"",children:r.jsx(R.SuspenseBlogLarge,{isLoading:m,limit:5,keyPrefix:"blog-section",children:f})})});module.exports=L;
+`,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;

package/dist/BlogListSection.js

@@ -1,13 +1,14 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { forwardRef as y, memo as z, useMemo as I } from "react";
-import b from "./Icon.js";
-import w from "./IconButton.js";
-import R from "./Chip.js";
-import { p as j, s as C, v as P, w as v } from "./utils-BbgAIA9N.js";
-import { P as $ } from "./index-YGcWbzeb.js";
-import { s as N } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { S as B } from "./suspense-large-BM9s_kZP.js";
-const L = N.div`
+import { forwardRef as v, memo as j, useMemo as I } 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 { 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";
+import { S as L } from "./suspense-large-BM9s_kZP.js";
+const B = k.div`
   display: flex;
   padding: 1rem;
   align-items: center;
@@ -20,6 +21,10 @@ const L = N.div`
   position: relative;
   width: 100%;
 
+  & .mobile-only {
+    display: none;
+  }
+
   &:hover {
     cursor: pointer;
   }
@@ -52,7 +57,7 @@ const L = N.div`
         font-weight: 600;
         line-height: 1.5rem;
         letter-spacing: 0.1px;
-        ${j(3)}
+        ${R(3)}
       }
 
       & .wrapper__tags {
@@ -84,6 +89,7 @@ const L = N.div`
       & .info__content {
         display: flex;
         align-items: center;
+        justify-content: space-between;
 
         &:first-of-type {
           flex-grow: 1;
@@ -104,86 +110,137 @@ const L = N.div`
     }
   }
 
-  @media (max-width: 400px) {
+  @media (max-width: ${$ + "px"}) {
     flex-direction: column;
+    padding: 0;
+    background: transparent;
+    border: none;
+
+    & .desktop-only {
+      display: none !important;
+    }
+
+    & .mobile-only {
+      display: block;
+    }
+
+    & .wrapper__subcontent {
+      order: 1;
+    }
+
+    & .wrapper__tags-action {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    & .wrapper__tags {
+      flex: 1;
+    }
 
     & .wrapper__content {
       gap: 1rem;
 
       & .wrapper__info {
         gap: 0.5rem;
-        flex-direction: column;
+        justify-content: space-between;
         width: 100%;
+        order: 0;
 
         & .info__content {
           align-items: flex-start;
           width: 100%;
-
-          &:first-of-type {
-            flex-direction: column;
-          }
         }
       }
     }
   }
-`, T = y(
+`, M = v(
   ({
-    title: m,
+    title: p,
     imageUrl: n,
     options: a,
     publishedAt: l,
-    timeToReadText: s = "{0} min read",
-    timeToRead: o = 0,
-    numberOfLikes: c = 0,
-    numberOfComments: d = 0,
-    isBookmarked: p = !1,
-    onSelectCard: _ = () => {
+    timeToReadText: o = "{0} min read",
+    timeToRead: s = 0,
+    numberOfLikes: g = 0,
+    numberOfComments: f = 0,
+    isBookmarked: c = !1,
+    onSelectCard: b = () => {
     },
-    onSelectOption: f = () => {
+    onSelectOption: _ = () => {
     },
     onBookmark: e = () => {
     },
-    onShare: g = () => {
+    onShare: m = () => {
     }
-  }, h) => /* @__PURE__ */ i(L, { onClick: _, children: [
-    /* @__PURE__ */ t($, { src: n, className: "wrapper__image" }),
+  }, h) => /* @__PURE__ */ i(B, { onClick: b, children: [
+    /* @__PURE__ */ t(T, { src: n, className: "wrapper__image" }),
     /* @__PURE__ */ i("div", { className: "wrapper__content", children: [
       /* @__PURE__ */ i("div", { className: "wrapper__subcontent", children: [
-        /* @__PURE__ */ t("div", { className: "wrapper__title", children: m }),
-        /* @__PURE__ */ t("div", { className: "wrapper__tags", children: a && (a == null ? void 0 : a.map((r, k) => /* @__PURE__ */ t(
-          R,
-          {
-            label: r == null ? void 0 : r.name,
-            color: r == null ? void 0 : r.color,
-            className: "wrapper__tag",
-            onClick: (u) => {
-              u == null || u.stopPropagation(), f(r == null ? void 0 : r.code);
-            }
-          },
-          `blog-card-sponsored-option__${k + 1}`
-        ))) })
+        /* @__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,
+            {
+              label: r == null ? void 0 : r.name,
+              color: r == null ? void 0 : r.color,
+              className: "wrapper__tag",
+              onClick: (u) => {
+                u == null || u.stopPropagation(), _(r == null ? void 0 : r.code);
+              }
+            },
+            `blog-card-sponsored-option__${N + 1}`
+          ))) }),
+          /* @__PURE__ */ i("div", { className: "info__content mobile-only", children: [
+            /* @__PURE__ */ t(
+              d,
+              {
+                icon: c ? " mng-lnc-bookmark--filled" : " mng-lnc-bookmark",
+                borderRadius: "curved",
+                btnType: "basic",
+                color: "neutral",
+                onClick: (r) => {
+                  r == null || r.stopPropagation(), e();
+                }
+              }
+            ),
+            /* @__PURE__ */ t(
+              d,
+              {
+                icon: " mng-lnc-share",
+                borderRadius: "curved",
+                btnType: "basic",
+                color: "neutral",
+                onClick: (r) => {
+                  r == null || r.stopPropagation(), m();
+                }
+              }
+            )
+          ] })
+        ] })
       ] }),
       /* @__PURE__ */ i("div", { className: "wrapper__info", children: [
         /* @__PURE__ */ i("div", { className: "info__content", children: [
           /* @__PURE__ */ t("div", { className: "info__text", children: `${C(
             l
-          )} • ${P(s, o)}` }),
+          )} • ${z(o, s)}` }),
           /* @__PURE__ */ i("div", { className: "info__text", children: [
             /* @__PURE__ */ i("div", { children: [
-              /* @__PURE__ */ t(b, { icon: " mng-lnc-thumbs-up", sizeInUnits: "1rem" }),
-              v(c)
+              /* @__PURE__ */ t(w, { icon: " mng-lnc-thumbs-up", sizeInUnits: "1rem" }),
+              y(g)
             ] }),
             /* @__PURE__ */ i("div", { children: [
-              /* @__PURE__ */ t(b, { icon: " mng-lnc-messages", sizeInUnits: "1rem" }),
-              v(d)
+              /* @__PURE__ */ t(w, { icon: " mng-lnc-messages", sizeInUnits: "1rem" }),
+              y(f)
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ i("div", { className: "info__content", children: [
+        /* @__PURE__ */ i("div", { className: "info__content desktop-only", children: [
           /* @__PURE__ */ t(
-            w,
+            d,
             {
-              icon: p ? " mng-lnc-bookmark--filled" : " mng-lnc-bookmark",
+              icon: c ? " mng-lnc-bookmark--filled" : " mng-lnc-bookmark",
               borderRadius: "curved",
               btnType: "basic",
               color: "neutral",
@@ -193,14 +250,14 @@ const L = N.div`
             }
           ),
           /* @__PURE__ */ t(
-            w,
+            d,
             {
               icon: " mng-lnc-share",
               borderRadius: "curved",
               btnType: "basic",
               color: "neutral",
               onClick: (r) => {
-                r == null || r.stopPropagation(), g();
+                r == null || r.stopPropagation(), m();
               }
             }
           )
@@ -208,7 +265,7 @@ const L = N.div`
       ] })
     ] })
   ] })
-), U = N.div`
+), U = k.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -230,31 +287,31 @@ const L = N.div`
       bottom: -0.75rem;
     }
   }
-`, W = z(T), J = y(
+`, W = j(M), J = v(
   ({
-    timeToReadText: m = "{0} min read",
+    timeToReadText: p = "{0} min read",
     items: n,
     onSelectCard: a = () => {
     },
     onSelectOption: l = () => {
     },
-    onShare: s = () => {
+    onShare: o = () => {
     },
-    onBookmark: o = () => {
+    onBookmark: s = () => {
     },
-    isLoading: c = !1,
-    getImage: d = () => {
+    isLoading: g = !1,
+    getImage: f = () => {
     },
-    isSeparated: p = !0
-  }, _) => {
-    const f = I(() => n == null ? void 0 : n.map((e, g) => /* @__PURE__ */ t(
+    isSeparated: c = !0
+  }, b) => {
+    const _ = I(() => n == null ? void 0 : n.map((e, m) => /* @__PURE__ */ t(
       W,
       {
         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: m,
+        timeToReadText: p,
         timeToRead: e == null ? void 0 : e.timeToRead,
         numberOfLikes: e == null ? void 0 : e.numberOfLikes,
         numberOfComments: e == null ? void 0 : e.numberOfComments,
@@ -262,19 +319,19 @@ const L = N.div`
         isBookmarked: e == null ? void 0 : e.isBookmarked,
         onSelectCard: () => a == null ? void 0 : a(e),
         onSelectOption: (h) => l == null ? void 0 : l(h),
-        onShare: () => s == null ? void 0 : s(e),
-        onBookmark: () => o == null ? void 0 : o(e),
-        imageUrl: d(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null
+        onShare: () => o == null ? void 0 : o(e),
+        onBookmark: () => s == null ? void 0 : s(e),
+        imageUrl: f(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null
       },
-      `blog-card-item__${g + 1}`
+      `blog-card-item__${m + 1}`
     )), [n]);
-    return /* @__PURE__ */ t(U, { className: p ? "separated" : "", children: /* @__PURE__ */ t(
-      B,
+    return /* @__PURE__ */ t(U, { className: c ? "separated" : "", children: /* @__PURE__ */ t(
+      L,
       {
-        isLoading: c,
+        isLoading: g,
         limit: 5,
         keyPrefix: "blog-section",
-        children: f
+        children: _
       }
     ) });
   }