@lanaco/lnc-react-ui 4.0.219 → 4.0.221

package/dist/BlogListSection.cjs

@@ -1,8 +1,8 @@
-"use strict";const e=require("react/jsx-runtime"),a=require("react"),P=require("./Icon.cjs"),R=require("./IconButton.cjs"),d=require("./utils-CITgSxXe.cjs"),N=require("./index-DsINTjQk.cjs"),q=require("./style-DC05rdyx.cjs"),v=require("./emotion-styled.browser.esm-BtEseadx.cjs"),W=require("./breakpoints-CcVm-gVm.cjs"),t=require("./style-BAcV7F53.cjs"),B=v.styled.a`
+"use strict";const e=require("react/jsx-runtime"),a=require("react"),W=require("./Icon.cjs"),f=require("./IconButton.cjs"),c=require("./utils-CITgSxXe.cjs"),G=require("./index-DsINTjQk.cjs"),I=require("./style-DC05rdyx.cjs"),R=require("./emotion-styled.browser.esm-BtEseadx.cjs"),$=require("./breakpoints-CcVm-gVm.cjs"),n=require("./style-BAcV7F53.cjs"),T=R.styled.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
-  padding: 1rem;
+  padding: 1rem 0 1rem 1rem;
   align-items: center;
   gap: 1.25rem;
   border-radius: 1.25rem;
@@ -13,6 +13,21 @@
   position: relative;
   width: 100%;
 
+  & .image-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .image-container .action {
+    position: absolute;
+    top: -0.5rem;
+    right: -0.5rem;
+
+    & .mobile-only {
+      display: none;
+    }
+  }
+
   & .mobile-only {
     display: none;
   }
@@ -52,7 +67,7 @@
         font-weight: 600;
         line-height: 1.5rem;
         letter-spacing: 0.1px;
-        ${d.truncateTextInRows(3)}
+        ${c.truncateTextInRows(3)}
       }
 
       & .wrapper__tags {
@@ -67,10 +82,17 @@
       justify-content: space-between;
       align-items: center;
       width: 100%;
+      & .action {
+        align-self: flex-start;
+        & > button {
+          min-height: 1rem;
+        }
+      }
 
       & .info__content {
         display: flex;
         align-items: center;
+        padding-right: 1rem;
 
         &:first-of-type {
           flex-grow: 1;
@@ -95,7 +117,7 @@
     }
   }
 
-  @media ${W.down("S")} {
+  @media ${$.down("S")} {
     flex-direction: column;
     padding: 0;
     background: transparent;
@@ -146,7 +168,7 @@
       }
     }
   }
-`,G=a.forwardRef(({blogUuid:i,title:l,imageUrl:c,options:o,publishedAt:h,timeToReadText:u="{0} min read",timeToRead:j=0,numberOfLikes:w=0,numberOfComments:f=0,isBookmarked:p=!1,onSelectCard:k=()=>{},onBookmark:_=()=>{},onShare:g=()=>{},bookmarkComponent:r=e.jsx(e.Fragment,{}),metadata:s,titleSlug:m,LinkComponent:S},b)=>{const $=S||"a",x=()=>d.isDefined(r)?a.cloneElement(r,{key:`bookmark_blog__${i}__${p}`,isBookmarked:p,blogUuid:i,onBookmark:(y,C)=>_(y,C),ref:b,componentName:"ExploreBlogSectionCard"}):e.jsx(e.Fragment,{}),L=a.useRef();return e.jsxs(B,{ref:L,name:s==null?void 0:s.name,"data-accessor":s==null?void 0:s.accessor,onClick:n=>k(n,L),className:"blog-card-item",as:$,...S?{to:`/blog/${m}`}:{href:`/blog/${m}`},children:[e.jsx(N.ProductImageWrapper,{src:c,className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__content",children:[e.jsxs("div",{className:"wrapper__subcontent",children:[e.jsx("div",{className:"wrapper__title",children:l}),e.jsxs("div",{className:"wrapper__tags-action",children:[e.jsx("div",{className:"wrapper__tags",children:o&&(o==null?void 0:o.map((n,y)=>e.jsx(q.BlogTag,{color:n==null?void 0:n.color,children:n==null?void 0:n.name},`blog-card-sponsored-option__${y+1}`)))}),e.jsxs("div",{className:"info__content mobile-only",onClick:n=>{n.stopPropagation(),n.preventDefault()},children:[e.jsx(x,{}),e.jsx(R,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:()=>{g()}})]})]})]}),e.jsxs("div",{className:"wrapper__info",children:[e.jsxs("div",{className:"info__content",children:[e.jsx("div",{className:"info__text",children:`${d.formatLocaleDateString(h)} • ${d.formatString(u,j)}`}),e.jsxs("div",{className:"info__text",children:[e.jsxs("div",{children:[e.jsx(P,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),d.getRoundedNumber(w)]}),e.jsxs("div",{children:[e.jsx(P,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),d.getRoundedNumber(f)]})]})]}),e.jsxs("div",{className:"info__content desktop-only",onClick:n=>{n==null||n.preventDefault(),n==null||n.stopPropagation()},children:[e.jsx(x,{}),e.jsx(R,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:()=>{g()}})]})]})]})]})}),I=v.styled.div`
+`,z=a.forwardRef(({blogUuid:i,title:l,imageUrl:m,options:o,publishedAt:h,timeToReadText:k="{0} min read",timeToRead:_=0,numberOfLikes:b=0,numberOfComments:S=0,isBookmarked:g=!1,onSelectCard:y=()=>{},onBookmark:v=()=>{},onShare:u=()=>{},bookmarkComponent:d=e.jsx(e.Fragment,{}),metadata:s,titleSlug:j,LinkComponent:r,hasShare:w=!0,hasDelete:p=!1,onDelete:x=()=>{}},P)=>{const q=r||"a",C=()=>c.isDefined(d)?a.cloneElement(d,{key:`bookmark_blog__${i}__${g}`,isBookmarked:g,blogUuid:i,onBookmark:(L,B)=>v(L,B),ref:P,componentName:"ExploreBlogSectionCard"}):e.jsx(e.Fragment,{}),N=a.useRef();return e.jsxs(T,{ref:N,name:s==null?void 0:s.name,"data-accessor":s==null?void 0:s.accessor,onClick:t=>y(t,N),className:"blog-card-item",as:q,...r?{to:`/blog/${j}`}:{href:`/blog/${j}`},children:[e.jsxs("div",{className:"image-container",children:[p&&e.jsx("div",{className:"action mobile-only",onClick:t=>{t==null||t.preventDefault(),t==null||t.stopPropagation()},children:e.jsx(f,{icon:" mng-lnc-close",borderRadius:"curved",type:"button",btnType:"filled",color:"neutral",size:"medium",onClick:()=>{x()}})}),e.jsx(G.ProductImageWrapper,{src:m,className:"wrapper__image"})]}),e.jsxs("div",{className:"wrapper__content",children:[e.jsxs("div",{className:"wrapper__subcontent",children:[e.jsxs("div",{className:"wrapper__info",children:[e.jsx("div",{className:"wrapper__title",children:l}),p&&e.jsx("div",{className:"action desktop-only",onClick:t=>{t==null||t.preventDefault(),t==null||t.stopPropagation()},children:e.jsx(f,{icon:" mng-lnc-close",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:()=>{x()}})})]}),e.jsxs("div",{className:"wrapper__tags-action",children:[e.jsx("div",{className:"wrapper__tags",children:o&&(o==null?void 0:o.map((t,L)=>e.jsx(I.BlogTag,{color:t==null?void 0:t.color,children:t==null?void 0:t.name},`blog-card-sponsored-option__${L+1}`)))}),e.jsxs("div",{className:"info__content mobile-only",onClick:t=>{t.stopPropagation(),t.preventDefault()},children:[e.jsx(C,{}),w&&e.jsx(f,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:()=>{u()}})]})]})]}),e.jsxs("div",{className:"wrapper__info",children:[e.jsxs("div",{className:"info__content",children:[e.jsx("div",{className:"info__text",children:`${c.formatLocaleDateString(h)} • ${c.formatString(k,_)}`}),e.jsxs("div",{className:"info__text",children:[e.jsxs("div",{children:[e.jsx(W,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),c.getRoundedNumber(b)]}),e.jsxs("div",{children:[e.jsx(W,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),c.getRoundedNumber(S)]})]})]}),e.jsxs("div",{className:"info__content desktop-only",onClick:t=>{t==null||t.preventDefault(),t==null||t.stopPropagation()},children:[e.jsx(C,{}),w&&e.jsx(f,{icon:" mng-lnc-share",borderRadius:"curved",btnType:"basic",color:"neutral",onClick:()=>{u()}})]})]})]})]})}),F=R.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -170,10 +192,10 @@
       bottom: -1.25rem;
     }
   }
-`,z=v.styled(t.SkeletonColumnWrapper)`
-  @media ${W.down("S")} {
+`,O=R.styled(n.SkeletonColumnWrapper)`
+  @media ${$.down("S")} {
     & > div {
       flex-direction: column;
     }
   }
-`,T=({keyPrefix:i})=>e.jsxs(z,{children:[e.jsxs(t.SkeletonRowWrapper,{children:[e.jsx(t.SkeletonSquarePlaceholder,{height:"9.5rem",width:"17.75rem"}),e.jsxs(t.SkeletonColumnWrapper,{noGradient:!0,children:[e.jsx(t.SkeletonLinePlaceholder,{height:"1.5rem"}),e.jsxs(t.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]},`${i}-1`),e.jsxs(t.SkeletonRowWrapper,{children:[e.jsx(t.SkeletonSquarePlaceholder,{height:"9.5rem",width:"17.75rem"}),e.jsxs(t.SkeletonColumnWrapper,{noGradient:!0,children:[e.jsx(t.SkeletonLinePlaceholder,{height:"1.5rem"}),e.jsxs(t.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]},`${i}-2`),e.jsxs(t.SkeletonRowWrapper,{children:[e.jsx(t.SkeletonSquarePlaceholder,{height:"9.5rem",width:"17.75rem"}),e.jsxs(t.SkeletonColumnWrapper,{noGradient:!0,children:[e.jsx(t.SkeletonLinePlaceholder,{height:"1.5rem"}),e.jsxs(t.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]},`${i}-3`),e.jsxs(t.SkeletonRowWrapper,{children:[e.jsx(t.SkeletonSquarePlaceholder,{height:"9.5rem",width:"17.75rem"}),e.jsxs(t.SkeletonColumnWrapper,{noGradient:!0,children:[e.jsx(t.SkeletonLinePlaceholder,{height:"1.5rem"}),e.jsxs(t.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]},`${i}-4`),e.jsxs(t.SkeletonRowWrapper,{children:[e.jsx(t.SkeletonSquarePlaceholder,{height:"9.5rem",width:"17.75rem"}),e.jsxs(t.SkeletonColumnWrapper,{noGradient:!0,children:[e.jsx(t.SkeletonLinePlaceholder,{height:"1.5rem"}),e.jsxs(t.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(t.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]},`${i}-5`)]}),D=({keyPrefix:i,isLoading:l=!1,fallbackComponent:c=e.jsx(e.Fragment,{}),children:o})=>e.jsx(a.Suspense,{fallbackComponent:c,children:l===!0?e.jsx(T,{keyPrefix:i}):o}),F=a.memo(G),O=a.forwardRef(({timeToReadText:i="{0} min read",items:l,isLoading:c=!1,onSelectCard:o=()=>{},onShare:h=()=>{},onBookmark:u=()=>{},getImage:j=()=>{},isSeparated:w=!0,bookmarkComponent:f=e.jsx(e.Fragment,{}),componentName:p,LinkComponent:k},_)=>{const g=a.useMemo(()=>l==null?void 0:l.map((r,s)=>{var m;return e.jsx(F,{blogUuid:r==null?void 0:r.uuid,title:r==null?void 0:r.title,titleSlug:r==null?void 0:r.titleSlug,options:r==null?void 0:r.options,publishedAt:r==null?void 0:r.publishedAt,timeToReadText:i,timeToRead:r==null?void 0:r.timeToRead,numberOfLikes:r==null?void 0:r.numberOfLikes,numberOfComments:r==null?void 0:r.numberOfComments,isSponsored:r==null?void 0:r.isSponsored,isBookmarked:r==null?void 0:r.isBookmarked,onSelectCard:(S,b)=>o==null?void 0:o(r,b),onShare:()=>h==null?void 0:h(r),onBookmark:u,imageUrl:j(r==null?void 0:r.imageUrl,r==null?void 0:r.uuid)||null,bookmarkComponent:f,metadata:{name:p,accessor:r==null?void 0:r.accessor},LinkComponent:k},`blog-card-item__${s+1}__${(m=r==null?void 0:r.isBookmarked)==null?void 0:m.toString()}`)}),[l]);return e.jsx(D,{isLoading:c,keyPrefix:"blog-list-skeleton",children:e.jsx(I,{ref:_,className:w?"separated":"",children:g})})});module.exports=O;
+`,U=({keyPrefix:i})=>e.jsxs(O,{children:[e.jsxs(n.SkeletonRowWrapper,{children:[e.jsx(n.SkeletonSquarePlaceholder,{height:"9.5rem",width:"17.75rem"}),e.jsxs(n.SkeletonColumnWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem"}),e.jsxs(n.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]},`${i}-1`),e.jsxs(n.SkeletonRowWrapper,{children:[e.jsx(n.SkeletonSquarePlaceholder,{height:"9.5rem",width:"17.75rem"}),e.jsxs(n.SkeletonColumnWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem"}),e.jsxs(n.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]},`${i}-2`),e.jsxs(n.SkeletonRowWrapper,{children:[e.jsx(n.SkeletonSquarePlaceholder,{height:"9.5rem",width:"17.75rem"}),e.jsxs(n.SkeletonColumnWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem"}),e.jsxs(n.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]},`${i}-3`),e.jsxs(n.SkeletonRowWrapper,{children:[e.jsx(n.SkeletonSquarePlaceholder,{height:"9.5rem",width:"17.75rem"}),e.jsxs(n.SkeletonColumnWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem"}),e.jsxs(n.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]},`${i}-4`),e.jsxs(n.SkeletonRowWrapper,{children:[e.jsx(n.SkeletonSquarePlaceholder,{height:"9.5rem",width:"17.75rem"}),e.jsxs(n.SkeletonColumnWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{height:"1.5rem"}),e.jsxs(n.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"}),e.jsx(n.SkeletonLinePlaceholder,{width:"5rem",height:"1.25rem"})]})]})]},`${i}-5`)]}),A=({keyPrefix:i,isLoading:l=!1,fallbackComponent:m=e.jsx(e.Fragment,{}),children:o})=>e.jsx(a.Suspense,{fallbackComponent:m,children:l===!0?e.jsx(U,{keyPrefix:i}):o}),E=a.memo(z),M=a.forwardRef(({timeToReadText:i="{0} min read",items:l,isLoading:m=!1,onSelectCard:o=()=>{},onShare:h=()=>{},onBookmark:k=()=>{},getImage:_=()=>{},isSeparated:b=!0,bookmarkComponent:S=e.jsx(e.Fragment,{}),componentName:g,LinkComponent:y,hasShare:v=!0,hasDelete:u=!1,onDelete:d=()=>{}},s)=>{const j=a.useMemo(()=>l==null?void 0:l.map((r,w)=>{var p;return e.jsx(E,{blogUuid:r==null?void 0:r.uuid,title:r==null?void 0:r.title,titleSlug:r==null?void 0:r.titleSlug,options:r==null?void 0:r.options,publishedAt:r==null?void 0:r.publishedAt,timeToReadText:i,timeToRead:r==null?void 0:r.timeToRead,numberOfLikes:r==null?void 0:r.numberOfLikes,numberOfComments:r==null?void 0:r.numberOfComments,isSponsored:r==null?void 0:r.isSponsored,isBookmarked:r==null?void 0:r.isBookmarked,onSelectCard:(x,P)=>o==null?void 0:o(r,P),hasShare:v,hasDelete:u,onDelete:()=>d==null?void 0:d(r),onShare:()=>h==null?void 0:h(r),onBookmark:k,imageUrl:_(r==null?void 0:r.imageUrl,r==null?void 0:r.uuid)||null,bookmarkComponent:S,metadata:{name:g,accessor:r==null?void 0:r.accessor},LinkComponent:y},`blog-card-item__${w+1}__${(p=r==null?void 0:r.isBookmarked)==null?void 0:p.toString()}`)}),[l]);return e.jsx(A,{isLoading:m,keyPrefix:"blog-list-skeleton",children:e.jsx(F,{ref:s,className:b?"separated":"",children:j})})});module.exports=M;

package/dist/BlogListSection.js

@@ -1,18 +1,18 @@
-import { jsxs as t, jsx as e, Fragment as w } from "react/jsx-runtime";
-import { forwardRef as L, useRef as O, cloneElement as U, Suspense as P, memo as q, useMemo as A } from "react";
-import j from "./Icon.js";
-import I from "./IconButton.js";
-import { n as E, q as M, s as F, v as z, m as H } from "./utils-B2fsQ6PS.js";
-import { P as J } from "./index-BvMY2TbK.js";
-import { B as K } from "./style-BUyFad_y.js";
-import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { d as T } from "./breakpoints-ff0SIcV3.js";
-import { b as s, S as l, c as g, a as i } from "./style-BwQ4djFC.js";
-const Q = S.a`
+import { jsxs as t, jsx as e, Fragment as y } from "react/jsx-runtime";
+import { forwardRef as W, useRef as A, cloneElement as E, Suspense as M, memo as D, useMemo as F } from "react";
+import L from "./Icon.js";
+import v from "./IconButton.js";
+import { n as H, q as J, s as K, v as P, m as Q } from "./utils-B2fsQ6PS.js";
+import { P as V } from "./index-BvMY2TbK.js";
+import { B as X } from "./style-BUyFad_y.js";
+import { s as T } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { d as O } from "./breakpoints-ff0SIcV3.js";
+import { b as c, S as l, c as f, a as n } from "./style-BwQ4djFC.js";
+const Y = T.a`
   text-decoration: none;
   color: var(--gray-950);
   display: flex;
-  padding: 1rem;
+  padding: 1rem 0 1rem 1rem;
   align-items: center;
   gap: 1.25rem;
   border-radius: 1.25rem;
@@ -23,6 +23,21 @@ const Q = S.a`
   position: relative;
   width: 100%;
 
+  & .image-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .image-container .action {
+    position: absolute;
+    top: -0.5rem;
+    right: -0.5rem;
+
+    & .mobile-only {
+      display: none;
+    }
+  }
+
   & .mobile-only {
     display: none;
   }
@@ -62,7 +77,7 @@ const Q = S.a`
         font-weight: 600;
         line-height: 1.5rem;
         letter-spacing: 0.1px;
-        ${E(3)}
+        ${H(3)}
       }
 
       & .wrapper__tags {
@@ -77,10 +92,17 @@ const Q = S.a`
       justify-content: space-between;
       align-items: center;
       width: 100%;
+      & .action {
+        align-self: flex-start;
+        & > button {
+          min-height: 1rem;
+        }
+      }
 
       & .info__content {
         display: flex;
         align-items: center;
+        padding-right: 1rem;
 
         &:first-of-type {
           flex-grow: 1;
@@ -105,7 +127,7 @@ const Q = S.a`
     }
   }
 
-  @media ${T("S")} {
+  @media ${O("S")} {
     flex-direction: column;
     padding: 0;
     background: transparent;
@@ -156,79 +178,131 @@ const Q = S.a`
       }
     }
   }
-`, V = L(
+`, Z = W(
   ({
     blogUuid: o,
     title: m,
-    imageUrl: c,
+    imageUrl: h,
     options: a,
-    publishedAt: h,
-    timeToReadText: _ = "{0} min read",
-    timeToRead: b = 0,
-    numberOfLikes: v = 0,
-    numberOfComments: y = 0,
-    isBookmarked: f = !1,
-    onSelectCard: k = () => {
+    publishedAt: p,
+    timeToReadText: k = "{0} min read",
+    timeToRead: N = 0,
+    numberOfLikes: $ = 0,
+    numberOfComments: C = 0,
+    isBookmarked: u = !1,
+    onSelectCard: B = () => {
     },
-    onBookmark: $ = () => {
+    onBookmark: R = () => {
     },
-    onShare: u = () => {
+    onShare: w = () => {
     },
-    bookmarkComponent: r = /* @__PURE__ */ e(w, {}),
+    bookmarkComponent: s = /* @__PURE__ */ e(y, {}),
     metadata: d,
-    titleSlug: p,
-    LinkComponent: N
-  }, B) => {
-    const W = N || "a", G = () => H(r) ? U(r, {
-      key: `bookmark_blog__${o}__${f}`,
-      isBookmarked: f,
+    titleSlug: _,
+    LinkComponent: r,
+    hasShare: b = !0,
+    hasDelete: g = !1,
+    onDelete: S = () => {
+    }
+  }, G) => {
+    const U = r || "a", z = () => Q(s) ? E(s, {
+      key: `bookmark_blog__${o}__${u}`,
+      isBookmarked: u,
       blogUuid: o,
-      onBookmark: (C, D) => $(C, D),
-      ref: B,
+      onBookmark: (j, q) => R(j, q),
+      ref: G,
       componentName: "ExploreBlogSectionCard"
-    }) : /* @__PURE__ */ e(w, {}), R = O();
+    }) : /* @__PURE__ */ e(y, {}), I = A();
     return /* @__PURE__ */ t(
-      Q,
+      Y,
       {
-        ref: R,
+        ref: I,
         name: d == null ? void 0 : d.name,
         "data-accessor": d == null ? void 0 : d.accessor,
-        onClick: (n) => k(n, R),
+        onClick: (i) => B(i, I),
         className: "blog-card-item",
-        as: W,
-        ...N ? { to: `/blog/${p}` } : { href: `/blog/${p}` },
+        as: U,
+        ...r ? { to: `/blog/${_}` } : { href: `/blog/${_}` },
         children: [
-          /* @__PURE__ */ e(J, { src: c, className: "wrapper__image" }),
+          /* @__PURE__ */ t("div", { className: "image-container", children: [
+            g && /* @__PURE__ */ e(
+              "div",
+              {
+                className: "action mobile-only",
+                onClick: (i) => {
+                  i == null || i.preventDefault(), i == null || i.stopPropagation();
+                },
+                children: /* @__PURE__ */ e(
+                  v,
+                  {
+                    icon: " mng-lnc-close",
+                    borderRadius: "curved",
+                    type: "button",
+                    btnType: "filled",
+                    color: "neutral",
+                    size: "medium",
+                    onClick: () => {
+                      S();
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e(V, { src: h, className: "wrapper__image" })
+          ] }),
           /* @__PURE__ */ t("div", { className: "wrapper__content", children: [
             /* @__PURE__ */ t("div", { className: "wrapper__subcontent", children: [
-              /* @__PURE__ */ e("div", { className: "wrapper__title", children: m }),
+              /* @__PURE__ */ t("div", { className: "wrapper__info", children: [
+                /* @__PURE__ */ e("div", { className: "wrapper__title", children: m }),
+                g && /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "action desktop-only",
+                    onClick: (i) => {
+                      i == null || i.preventDefault(), i == null || i.stopPropagation();
+                    },
+                    children: /* @__PURE__ */ e(
+                      v,
+                      {
+                        icon: " mng-lnc-close",
+                        borderRadius: "curved",
+                        btnType: "basic",
+                        color: "neutral",
+                        onClick: () => {
+                          S();
+                        }
+                      }
+                    )
+                  }
+                )
+              ] }),
               /* @__PURE__ */ t("div", { className: "wrapper__tags-action", children: [
-                /* @__PURE__ */ e("div", { className: "wrapper__tags", children: a && (a == null ? void 0 : a.map((n, C) => /* @__PURE__ */ e(
-                  K,
+                /* @__PURE__ */ e("div", { className: "wrapper__tags", children: a && (a == null ? void 0 : a.map((i, j) => /* @__PURE__ */ e(
+                  X,
                   {
-                    color: n == null ? void 0 : n.color,
-                    children: n == null ? void 0 : n.name
+                    color: i == null ? void 0 : i.color,
+                    children: i == null ? void 0 : i.name
                   },
-                  `blog-card-sponsored-option__${C + 1}`
+                  `blog-card-sponsored-option__${j + 1}`
                 ))) }),
                 /* @__PURE__ */ t(
                   "div",
                   {
                     className: "info__content mobile-only",
-                    onClick: (n) => {
-                      n.stopPropagation(), n.preventDefault();
+                    onClick: (i) => {
+                      i.stopPropagation(), i.preventDefault();
                     },
                     children: [
-                      /* @__PURE__ */ e(G, {}),
-                      /* @__PURE__ */ e(
-                        I,
+                      /* @__PURE__ */ e(z, {}),
+                      b && /* @__PURE__ */ e(
+                        v,
                         {
                           icon: " mng-lnc-share",
                           borderRadius: "curved",
                           btnType: "basic",
                           color: "neutral",
                           onClick: () => {
-                            u();
+                            w();
                           }
                         }
                       )
@@ -239,17 +313,17 @@ const Q = S.a`
             ] }),
             /* @__PURE__ */ t("div", { className: "wrapper__info", children: [
               /* @__PURE__ */ t("div", { className: "info__content", children: [
-                /* @__PURE__ */ e("div", { className: "info__text", children: `${M(
-                  h
-                )} • ${F(_, b)}` }),
+                /* @__PURE__ */ e("div", { className: "info__text", children: `${J(
+                  p
+                )} • ${K(k, N)}` }),
                 /* @__PURE__ */ t("div", { className: "info__text", children: [
                   /* @__PURE__ */ t("div", { children: [
-                    /* @__PURE__ */ e(j, { icon: " mng-lnc-thumbs-up--filled", sizeInUnits: "1rem" }),
-                    z(v)
+                    /* @__PURE__ */ e(L, { icon: " mng-lnc-thumbs-up--filled", sizeInUnits: "1rem" }),
+                    P($)
                   ] }),
                   /* @__PURE__ */ t("div", { children: [
-                    /* @__PURE__ */ e(j, { icon: " mng-lnc-messages-filled", sizeInUnits: "1rem" }),
-                    z(y)
+                    /* @__PURE__ */ e(L, { icon: " mng-lnc-messages-filled", sizeInUnits: "1rem" }),
+                    P(C)
                   ] })
                 ] })
               ] }),
@@ -257,20 +331,20 @@ const Q = S.a`
                 "div",
                 {
                   className: "info__content desktop-only",
-                  onClick: (n) => {
-                    n == null || n.preventDefault(), n == null || n.stopPropagation();
+                  onClick: (i) => {
+                    i == null || i.preventDefault(), i == null || i.stopPropagation();
                   },
                   children: [
-                    /* @__PURE__ */ e(G, {}),
-                    /* @__PURE__ */ e(
-                      I,
+                    /* @__PURE__ */ e(z, {}),
+                    b && /* @__PURE__ */ e(
+                      v,
                       {
                         icon: " mng-lnc-share",
                         borderRadius: "curved",
                         btnType: "basic",
                         color: "neutral",
                         onClick: () => {
-                          u();
+                          w();
                         }
                       }
                     )
@@ -283,7 +357,7 @@ const Q = S.a`
       }
     );
   }
-), X = S.div`
+), x = T.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -307,100 +381,104 @@ const Q = S.a`
       bottom: -1.25rem;
     }
   }
-`, Y = S(s)`
-  @media ${T("S")} {
+`, ee = T(c)`
+  @media ${O("S")} {
     & > div {
       flex-direction: column;
     }
   }
-`, Z = ({ keyPrefix: o }) => /* @__PURE__ */ t(Y, { children: [
+`, re = ({ keyPrefix: o }) => /* @__PURE__ */ t(ee, { children: [
   /* @__PURE__ */ t(l, { children: [
-    /* @__PURE__ */ e(g, { height: "9.5rem", width: "17.75rem" }),
-    /* @__PURE__ */ t(s, { noGradient: !0, children: [
-      /* @__PURE__ */ e(i, { height: "1.5rem" }),
+    /* @__PURE__ */ e(f, { height: "9.5rem", width: "17.75rem" }),
+    /* @__PURE__ */ t(c, { noGradient: !0, children: [
+      /* @__PURE__ */ e(n, { height: "1.5rem" }),
       /* @__PURE__ */ t(l, { noGradient: !0, children: [
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" })
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] }, `${o}-1`),
   /* @__PURE__ */ t(l, { children: [
-    /* @__PURE__ */ e(g, { height: "9.5rem", width: "17.75rem" }),
-    /* @__PURE__ */ t(s, { noGradient: !0, children: [
-      /* @__PURE__ */ e(i, { height: "1.5rem" }),
+    /* @__PURE__ */ e(f, { height: "9.5rem", width: "17.75rem" }),
+    /* @__PURE__ */ t(c, { noGradient: !0, children: [
+      /* @__PURE__ */ e(n, { height: "1.5rem" }),
       /* @__PURE__ */ t(l, { noGradient: !0, children: [
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" })
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] }, `${o}-2`),
   /* @__PURE__ */ t(l, { children: [
-    /* @__PURE__ */ e(g, { height: "9.5rem", width: "17.75rem" }),
-    /* @__PURE__ */ t(s, { noGradient: !0, children: [
-      /* @__PURE__ */ e(i, { height: "1.5rem" }),
+    /* @__PURE__ */ e(f, { height: "9.5rem", width: "17.75rem" }),
+    /* @__PURE__ */ t(c, { noGradient: !0, children: [
+      /* @__PURE__ */ e(n, { height: "1.5rem" }),
       /* @__PURE__ */ t(l, { noGradient: !0, children: [
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" })
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] }, `${o}-3`),
   /* @__PURE__ */ t(l, { children: [
-    /* @__PURE__ */ e(g, { height: "9.5rem", width: "17.75rem" }),
-    /* @__PURE__ */ t(s, { noGradient: !0, children: [
-      /* @__PURE__ */ e(i, { height: "1.5rem" }),
+    /* @__PURE__ */ e(f, { height: "9.5rem", width: "17.75rem" }),
+    /* @__PURE__ */ t(c, { noGradient: !0, children: [
+      /* @__PURE__ */ e(n, { height: "1.5rem" }),
       /* @__PURE__ */ t(l, { noGradient: !0, children: [
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" })
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] }, `${o}-4`),
   /* @__PURE__ */ t(l, { children: [
-    /* @__PURE__ */ e(g, { height: "9.5rem", width: "17.75rem" }),
-    /* @__PURE__ */ t(s, { noGradient: !0, children: [
-      /* @__PURE__ */ e(i, { height: "1.5rem" }),
+    /* @__PURE__ */ e(f, { height: "9.5rem", width: "17.75rem" }),
+    /* @__PURE__ */ t(c, { noGradient: !0, children: [
+      /* @__PURE__ */ e(n, { height: "1.5rem" }),
       /* @__PURE__ */ t(l, { noGradient: !0, children: [
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
-        /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" })
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
+        /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" })
       ] })
     ] })
   ] }, `${o}-5`)
-] }), x = ({
+] }), ie = ({
   keyPrefix: o,
   isLoading: m = !1,
-  fallbackComponent: c = /* @__PURE__ */ e(w, {}),
+  fallbackComponent: h = /* @__PURE__ */ e(y, {}),
   children: a
-}) => /* @__PURE__ */ e(P, { fallbackComponent: c, children: m === !0 ? /* @__PURE__ */ e(Z, { keyPrefix: o }) : a }), ee = q(V), ce = L(
+}) => /* @__PURE__ */ e(M, { fallbackComponent: h, children: m === !0 ? /* @__PURE__ */ e(re, { keyPrefix: o }) : a }), te = D(Z), ge = W(
   ({
     timeToReadText: o = "{0} min read",
     items: m,
-    isLoading: c = !1,
+    isLoading: h = !1,
     onSelectCard: a = () => {
     },
-    onShare: h = () => {
+    onShare: p = () => {
     },
-    onBookmark: _ = () => {
+    onBookmark: k = () => {
     },
-    getImage: b = () => {
+    getImage: N = () => {
     },
-    isSeparated: v = !0,
-    bookmarkComponent: y = /* @__PURE__ */ e(w, {}),
-    componentName: f,
-    LinkComponent: k
-  }, $) => {
-    const u = A(() => m == null ? void 0 : m.map((r, d) => {
-      var p;
+    isSeparated: $ = !0,
+    bookmarkComponent: C = /* @__PURE__ */ e(y, {}),
+    componentName: u,
+    LinkComponent: B,
+    hasShare: R = !0,
+    hasDelete: w = !1,
+    onDelete: s = () => {
+    }
+  }, d) => {
+    const _ = F(() => m == null ? void 0 : m.map((r, b) => {
+      var g;
       return /* @__PURE__ */ e(
-        ee,
+        te,
         {
           blogUuid: r == null ? void 0 : r.uuid,
           title: r == null ? void 0 : r.title,
@@ -413,20 +491,23 @@ const Q = S.a`
           numberOfComments: r == null ? void 0 : r.numberOfComments,
           isSponsored: r == null ? void 0 : r.isSponsored,
           isBookmarked: r == null ? void 0 : r.isBookmarked,
-          onSelectCard: (N, B) => a == null ? void 0 : a(r, B),
-          onShare: () => h == null ? void 0 : h(r),
-          onBookmark: _,
-          imageUrl: b(r == null ? void 0 : r.imageUrl, r == null ? void 0 : r.uuid) || null,
-          bookmarkComponent: y,
-          metadata: { name: f, accessor: r == null ? void 0 : r.accessor },
-          LinkComponent: k
+          onSelectCard: (S, G) => a == null ? void 0 : a(r, G),
+          hasShare: R,
+          hasDelete: w,
+          onDelete: () => s == null ? void 0 : s(r),
+          onShare: () => p == null ? void 0 : p(r),
+          onBookmark: k,
+          imageUrl: N(r == null ? void 0 : r.imageUrl, r == null ? void 0 : r.uuid) || null,
+          bookmarkComponent: C,
+          metadata: { name: u, accessor: r == null ? void 0 : r.accessor },
+          LinkComponent: B
         },
-        `blog-card-item__${d + 1}__${(p = r == null ? void 0 : r.isBookmarked) == null ? void 0 : p.toString()}`
+        `blog-card-item__${b + 1}__${(g = r == null ? void 0 : r.isBookmarked) == null ? void 0 : g.toString()}`
       );
     }), [m]);
-    return /* @__PURE__ */ e(x, { isLoading: c, keyPrefix: "blog-list-skeleton", children: /* @__PURE__ */ e(X, { ref: $, className: v ? "separated" : "", children: u }) });
+    return /* @__PURE__ */ e(ie, { isLoading: h, keyPrefix: "blog-list-skeleton", children: /* @__PURE__ */ e(x, { ref: d, className: $ ? "separated" : "", children: _ }) });
   }
 );
 export {
-  ce as default
+  ge as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.219",
+  "version": "4.0.221",
   "description": "React component library",
   "type": "module",
   "keywords": [