@lanaco/lnc-react-ui 4.0.219 → 4.0.220

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
- "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`
1
+ "use strict";const e=require("react/jsx-runtime"),a=require("react"),W=require("./Icon.cjs"),f=require("./IconButton.cjs"),d=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`
2
2
  text-decoration: none;
3
3
  color: var(--gray-950);
4
4
  display: flex;
5
- padding: 1rem;
5
+ padding: 1rem 0 1rem 1rem;
6
6
  align-items: center;
7
7
  gap: 1.25rem;
8
8
  border-radius: 1.25rem;
@@ -13,6 +13,21 @@
13
13
  position: relative;
14
14
  width: 100%;
15
15
 
16
+ & .image-container {
17
+ position: relative;
18
+ display: inline-block;
19
+ }
20
+
21
+ .image-container .action {
22
+ position: absolute;
23
+ top: -0.5rem;
24
+ right: -0.5rem;
25
+
26
+ & .mobile-only {
27
+ display: none;
28
+ }
29
+ }
30
+
16
31
  & .mobile-only {
17
32
  display: none;
18
33
  }
@@ -67,10 +82,17 @@
67
82
  justify-content: space-between;
68
83
  align-items: center;
69
84
  width: 100%;
85
+ & .action {
86
+ align-self: flex-start;
87
+ & > button {
88
+ min-height: 1rem;
89
+ }
90
+ }
70
91
 
71
92
  & .info__content {
72
93
  display: flex;
73
94
  align-items: center;
95
+ padding-right: 1rem;
74
96
 
75
97
  &:first-of-type {
76
98
  flex-grow: 1;
@@ -95,7 +117,7 @@
95
117
  }
96
118
  }
97
119
 
98
- @media ${W.down("S")} {
120
+ @media ${$.down("S")} {
99
121
  flex-direction: column;
100
122
  padding: 0;
101
123
  background: transparent;
@@ -146,7 +168,7 @@
146
168
  }
147
169
  }
148
170
  }
149
- `,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`
171
+ `,z=a.forwardRef(({blogUuid:i,title:l,imageUrl:c,options:o,publishedAt:m,timeToReadText:k="{0} min read",timeToRead:_=0,numberOfLikes:b=0,numberOfComments:S=0,isBookmarked:p=!1,onSelectCard:y=()=>{},onBookmark:v=()=>{},onShare:g=()=>{},bookmarkComponent:u=e.jsx(e.Fragment,{}),metadata:s,titleSlug:j,LinkComponent:r,hasShare:w=!0,hasDelete:h=!1,onDelete:x=()=>{}},P)=>{const q=r||"a",C=()=>d.isDefined(u)?a.cloneElement(u,{key:`bookmark_blog__${i}__${p}`,isBookmarked:p,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:[h&&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:"large",onClick:()=>{x()}})}),e.jsx(G.ProductImageWrapper,{src:c,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}),h&&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:()=>{g()}})]})]})]}),e.jsxs("div",{className:"wrapper__info",children:[e.jsxs("div",{className:"info__content",children:[e.jsx("div",{className:"info__text",children:`${d.formatLocaleDateString(m)} • ${d.formatString(k,_)}`}),e.jsxs("div",{className:"info__text",children:[e.jsxs("div",{children:[e.jsx(W,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),d.getRoundedNumber(b)]}),e.jsxs("div",{children:[e.jsx(W,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),d.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:()=>{g()}})]})]})]})]})}),D=R.styled.div`
150
172
  display: flex;
151
173
  flex-direction: column;
152
174
  align-items: flex-start;
@@ -170,10 +192,10 @@
170
192
  bottom: -1.25rem;
171
193
  }
172
194
  }
173
- `,z=v.styled(t.SkeletonColumnWrapper)`
174
- @media ${W.down("S")} {
195
+ `,F=R.styled(n.SkeletonColumnWrapper)`
196
+ @media ${$.down("S")} {
175
197
  & > div {
176
198
  flex-direction: column;
177
199
  }
178
200
  }
179
- `,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;
201
+ `,O=({keyPrefix:i})=>e.jsxs(F,{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`)]}),U=({keyPrefix:i,isLoading:l=!1,fallbackComponent:c=e.jsx(e.Fragment,{}),children:o})=>e.jsx(a.Suspense,{fallbackComponent:c,children:l===!0?e.jsx(O,{keyPrefix:i}):o}),A=a.memo(z),E=a.forwardRef(({timeToReadText:i="{0} min read",items:l,isLoading:c=!1,onSelectCard:o=()=>{},onShare:m=()=>{},onBookmark:k=()=>{},getImage:_=()=>{},isSeparated:b=!0,bookmarkComponent:S=e.jsx(e.Fragment,{}),componentName:p,LinkComponent:y,hasShare:v=!0,hasDelete:g=!1,onDelete:u=()=>{}},s)=>{const j=a.useMemo(()=>l==null?void 0:l.map((r,w)=>{var h;return e.jsx(A,{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:g,onDelete:u,onShare:()=>m==null?void 0:m(r),onBookmark:k,imageUrl:_(r==null?void 0:r.imageUrl,r==null?void 0:r.uuid)||null,bookmarkComponent:S,metadata:{name:p,accessor:r==null?void 0:r.accessor},LinkComponent:y},`blog-card-item__${w+1}__${(h=r==null?void 0:r.isBookmarked)==null?void 0:h.toString()}`)}),[l]);return e.jsx(U,{isLoading:c,keyPrefix:"blog-list-skeleton",children:e.jsx(D,{ref:s,className:b?"separated":"",children:j})})});module.exports=E;
@@ -1,18 +1,18 @@
1
- import { jsxs as t, jsx as e, Fragment as w } from "react/jsx-runtime";
2
- import { forwardRef as L, useRef as O, cloneElement as U, Suspense as P, memo as q, useMemo as A } from "react";
3
- import j from "./Icon.js";
4
- import I from "./IconButton.js";
5
- import { n as E, q as M, s as F, v as z, m as H } from "./utils-B2fsQ6PS.js";
6
- import { P as J } from "./index-BvMY2TbK.js";
7
- import { B as K } from "./style-BUyFad_y.js";
8
- import { s as S } from "./emotion-styled.browser.esm-BNN1dTl3.js";
9
- import { d as T } from "./breakpoints-ff0SIcV3.js";
10
- import { b as s, S as l, c as g, a as i } from "./style-BwQ4djFC.js";
11
- const Q = S.a`
1
+ import { jsxs as t, jsx as e, Fragment as y } from "react/jsx-runtime";
2
+ import { forwardRef as W, useRef as q, cloneElement as A, Suspense as E, memo as M, useMemo as F } from "react";
3
+ import L from "./Icon.js";
4
+ import v from "./IconButton.js";
5
+ import { n as H, q as J, s as K, v as P, m as Q } from "./utils-B2fsQ6PS.js";
6
+ import { P as V } from "./index-BvMY2TbK.js";
7
+ import { B as X } from "./style-BUyFad_y.js";
8
+ import { s as T } from "./emotion-styled.browser.esm-BNN1dTl3.js";
9
+ import { d as D } from "./breakpoints-ff0SIcV3.js";
10
+ import { b as m, S as l, c as g, a as n } from "./style-BwQ4djFC.js";
11
+ const Y = T.a`
12
12
  text-decoration: none;
13
13
  color: var(--gray-950);
14
14
  display: flex;
15
- padding: 1rem;
15
+ padding: 1rem 0 1rem 1rem;
16
16
  align-items: center;
17
17
  gap: 1.25rem;
18
18
  border-radius: 1.25rem;
@@ -23,6 +23,21 @@ const Q = S.a`
23
23
  position: relative;
24
24
  width: 100%;
25
25
 
26
+ & .image-container {
27
+ position: relative;
28
+ display: inline-block;
29
+ }
30
+
31
+ .image-container .action {
32
+ position: absolute;
33
+ top: -0.5rem;
34
+ right: -0.5rem;
35
+
36
+ & .mobile-only {
37
+ display: none;
38
+ }
39
+ }
40
+
26
41
  & .mobile-only {
27
42
  display: none;
28
43
  }
@@ -62,7 +77,7 @@ const Q = S.a`
62
77
  font-weight: 600;
63
78
  line-height: 1.5rem;
64
79
  letter-spacing: 0.1px;
65
- ${E(3)}
80
+ ${H(3)}
66
81
  }
67
82
 
68
83
  & .wrapper__tags {
@@ -77,10 +92,17 @@ const Q = S.a`
77
92
  justify-content: space-between;
78
93
  align-items: center;
79
94
  width: 100%;
95
+ & .action {
96
+ align-self: flex-start;
97
+ & > button {
98
+ min-height: 1rem;
99
+ }
100
+ }
80
101
 
81
102
  & .info__content {
82
103
  display: flex;
83
104
  align-items: center;
105
+ padding-right: 1rem;
84
106
 
85
107
  &:first-of-type {
86
108
  flex-grow: 1;
@@ -105,7 +127,7 @@ const Q = S.a`
105
127
  }
106
128
  }
107
129
 
108
- @media ${T("S")} {
130
+ @media ${D("S")} {
109
131
  flex-direction: column;
110
132
  padding: 0;
111
133
  background: transparent;
@@ -156,72 +178,124 @@ const Q = S.a`
156
178
  }
157
179
  }
158
180
  }
159
- `, V = L(
181
+ `, Z = W(
160
182
  ({
161
183
  blogUuid: o,
162
- title: m,
184
+ title: s,
163
185
  imageUrl: c,
164
186
  options: a,
165
187
  publishedAt: h,
166
- timeToReadText: _ = "{0} min read",
167
- timeToRead: b = 0,
168
- numberOfLikes: v = 0,
169
- numberOfComments: y = 0,
188
+ timeToReadText: k = "{0} min read",
189
+ timeToRead: N = 0,
190
+ numberOfLikes: $ = 0,
191
+ numberOfComments: C = 0,
170
192
  isBookmarked: f = !1,
171
- onSelectCard: k = () => {
193
+ onSelectCard: B = () => {
172
194
  },
173
- onBookmark: $ = () => {
195
+ onBookmark: R = () => {
174
196
  },
175
197
  onShare: u = () => {
176
198
  },
177
- bookmarkComponent: r = /* @__PURE__ */ e(w, {}),
199
+ bookmarkComponent: w = /* @__PURE__ */ e(y, {}),
178
200
  metadata: d,
179
- titleSlug: p,
180
- LinkComponent: N
181
- }, B) => {
182
- const W = N || "a", G = () => H(r) ? U(r, {
201
+ titleSlug: _,
202
+ LinkComponent: r,
203
+ hasShare: b = !0,
204
+ hasDelete: p = !1,
205
+ onDelete: S = () => {
206
+ }
207
+ }, G) => {
208
+ const O = r || "a", z = () => Q(w) ? A(w, {
183
209
  key: `bookmark_blog__${o}__${f}`,
184
210
  isBookmarked: f,
185
211
  blogUuid: o,
186
- onBookmark: (C, D) => $(C, D),
187
- ref: B,
212
+ onBookmark: (j, U) => R(j, U),
213
+ ref: G,
188
214
  componentName: "ExploreBlogSectionCard"
189
- }) : /* @__PURE__ */ e(w, {}), R = O();
215
+ }) : /* @__PURE__ */ e(y, {}), I = q();
190
216
  return /* @__PURE__ */ t(
191
- Q,
217
+ Y,
192
218
  {
193
- ref: R,
219
+ ref: I,
194
220
  name: d == null ? void 0 : d.name,
195
221
  "data-accessor": d == null ? void 0 : d.accessor,
196
- onClick: (n) => k(n, R),
222
+ onClick: (i) => B(i, I),
197
223
  className: "blog-card-item",
198
- as: W,
199
- ...N ? { to: `/blog/${p}` } : { href: `/blog/${p}` },
224
+ as: O,
225
+ ...r ? { to: `/blog/${_}` } : { href: `/blog/${_}` },
200
226
  children: [
201
- /* @__PURE__ */ e(J, { src: c, className: "wrapper__image" }),
227
+ /* @__PURE__ */ t("div", { className: "image-container", children: [
228
+ p && /* @__PURE__ */ e(
229
+ "div",
230
+ {
231
+ className: "action mobile-only",
232
+ onClick: (i) => {
233
+ i == null || i.preventDefault(), i == null || i.stopPropagation();
234
+ },
235
+ children: /* @__PURE__ */ e(
236
+ v,
237
+ {
238
+ icon: " mng-lnc-close",
239
+ borderRadius: "curved",
240
+ type: "button",
241
+ btnType: "filled",
242
+ color: "neutral",
243
+ size: "large",
244
+ onClick: () => {
245
+ S();
246
+ }
247
+ }
248
+ )
249
+ }
250
+ ),
251
+ /* @__PURE__ */ e(V, { src: c, className: "wrapper__image" })
252
+ ] }),
202
253
  /* @__PURE__ */ t("div", { className: "wrapper__content", children: [
203
254
  /* @__PURE__ */ t("div", { className: "wrapper__subcontent", children: [
204
- /* @__PURE__ */ e("div", { className: "wrapper__title", children: m }),
255
+ /* @__PURE__ */ t("div", { className: "wrapper__info", children: [
256
+ /* @__PURE__ */ e("div", { className: "wrapper__title", children: s }),
257
+ p && /* @__PURE__ */ e(
258
+ "div",
259
+ {
260
+ className: "action desktop-only",
261
+ onClick: (i) => {
262
+ i == null || i.preventDefault(), i == null || i.stopPropagation();
263
+ },
264
+ children: /* @__PURE__ */ e(
265
+ v,
266
+ {
267
+ icon: " mng-lnc-close",
268
+ borderRadius: "curved",
269
+ btnType: "basic",
270
+ color: "neutral",
271
+ onClick: () => {
272
+ S();
273
+ }
274
+ }
275
+ )
276
+ }
277
+ )
278
+ ] }),
205
279
  /* @__PURE__ */ t("div", { className: "wrapper__tags-action", children: [
206
- /* @__PURE__ */ e("div", { className: "wrapper__tags", children: a && (a == null ? void 0 : a.map((n, C) => /* @__PURE__ */ e(
207
- K,
280
+ /* @__PURE__ */ e("div", { className: "wrapper__tags", children: a && (a == null ? void 0 : a.map((i, j) => /* @__PURE__ */ e(
281
+ X,
208
282
  {
209
- color: n == null ? void 0 : n.color,
210
- children: n == null ? void 0 : n.name
283
+ color: i == null ? void 0 : i.color,
284
+ children: i == null ? void 0 : i.name
211
285
  },
212
- `blog-card-sponsored-option__${C + 1}`
286
+ `blog-card-sponsored-option__${j + 1}`
213
287
  ))) }),
214
288
  /* @__PURE__ */ t(
215
289
  "div",
216
290
  {
217
291
  className: "info__content mobile-only",
218
- onClick: (n) => {
219
- n.stopPropagation(), n.preventDefault();
292
+ onClick: (i) => {
293
+ i.stopPropagation(), i.preventDefault();
220
294
  },
221
295
  children: [
222
- /* @__PURE__ */ e(G, {}),
223
- /* @__PURE__ */ e(
224
- I,
296
+ /* @__PURE__ */ e(z, {}),
297
+ b && /* @__PURE__ */ e(
298
+ v,
225
299
  {
226
300
  icon: " mng-lnc-share",
227
301
  borderRadius: "curved",
@@ -239,17 +313,17 @@ const Q = S.a`
239
313
  ] }),
240
314
  /* @__PURE__ */ t("div", { className: "wrapper__info", children: [
241
315
  /* @__PURE__ */ t("div", { className: "info__content", children: [
242
- /* @__PURE__ */ e("div", { className: "info__text", children: `${M(
316
+ /* @__PURE__ */ e("div", { className: "info__text", children: `${J(
243
317
  h
244
- )} • ${F(_, b)}` }),
318
+ )} • ${K(k, N)}` }),
245
319
  /* @__PURE__ */ t("div", { className: "info__text", children: [
246
320
  /* @__PURE__ */ t("div", { children: [
247
- /* @__PURE__ */ e(j, { icon: " mng-lnc-thumbs-up--filled", sizeInUnits: "1rem" }),
248
- z(v)
321
+ /* @__PURE__ */ e(L, { icon: " mng-lnc-thumbs-up--filled", sizeInUnits: "1rem" }),
322
+ P($)
249
323
  ] }),
250
324
  /* @__PURE__ */ t("div", { children: [
251
- /* @__PURE__ */ e(j, { icon: " mng-lnc-messages-filled", sizeInUnits: "1rem" }),
252
- z(y)
325
+ /* @__PURE__ */ e(L, { icon: " mng-lnc-messages-filled", sizeInUnits: "1rem" }),
326
+ P(C)
253
327
  ] })
254
328
  ] })
255
329
  ] }),
@@ -257,13 +331,13 @@ const Q = S.a`
257
331
  "div",
258
332
  {
259
333
  className: "info__content desktop-only",
260
- onClick: (n) => {
261
- n == null || n.preventDefault(), n == null || n.stopPropagation();
334
+ onClick: (i) => {
335
+ i == null || i.preventDefault(), i == null || i.stopPropagation();
262
336
  },
263
337
  children: [
264
- /* @__PURE__ */ e(G, {}),
265
- /* @__PURE__ */ e(
266
- I,
338
+ /* @__PURE__ */ e(z, {}),
339
+ b && /* @__PURE__ */ e(
340
+ v,
267
341
  {
268
342
  icon: " mng-lnc-share",
269
343
  borderRadius: "curved",
@@ -283,7 +357,7 @@ const Q = S.a`
283
357
  }
284
358
  );
285
359
  }
286
- ), X = S.div`
360
+ ), x = T.div`
287
361
  display: flex;
288
362
  flex-direction: column;
289
363
  align-items: flex-start;
@@ -307,100 +381,104 @@ const Q = S.a`
307
381
  bottom: -1.25rem;
308
382
  }
309
383
  }
310
- `, Y = S(s)`
311
- @media ${T("S")} {
384
+ `, ee = T(m)`
385
+ @media ${D("S")} {
312
386
  & > div {
313
387
  flex-direction: column;
314
388
  }
315
389
  }
316
- `, Z = ({ keyPrefix: o }) => /* @__PURE__ */ t(Y, { children: [
390
+ `, re = ({ keyPrefix: o }) => /* @__PURE__ */ t(ee, { children: [
317
391
  /* @__PURE__ */ t(l, { children: [
318
392
  /* @__PURE__ */ e(g, { height: "9.5rem", width: "17.75rem" }),
319
- /* @__PURE__ */ t(s, { noGradient: !0, children: [
320
- /* @__PURE__ */ e(i, { height: "1.5rem" }),
393
+ /* @__PURE__ */ t(m, { noGradient: !0, children: [
394
+ /* @__PURE__ */ e(n, { height: "1.5rem" }),
321
395
  /* @__PURE__ */ t(l, { noGradient: !0, children: [
322
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
323
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
324
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
325
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" })
396
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
397
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
398
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
399
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" })
326
400
  ] })
327
401
  ] })
328
402
  ] }, `${o}-1`),
329
403
  /* @__PURE__ */ t(l, { children: [
330
404
  /* @__PURE__ */ e(g, { height: "9.5rem", width: "17.75rem" }),
331
- /* @__PURE__ */ t(s, { noGradient: !0, children: [
332
- /* @__PURE__ */ e(i, { height: "1.5rem" }),
405
+ /* @__PURE__ */ t(m, { noGradient: !0, children: [
406
+ /* @__PURE__ */ e(n, { height: "1.5rem" }),
333
407
  /* @__PURE__ */ t(l, { noGradient: !0, children: [
334
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
335
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
336
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
337
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" })
408
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
409
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
410
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
411
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" })
338
412
  ] })
339
413
  ] })
340
414
  ] }, `${o}-2`),
341
415
  /* @__PURE__ */ t(l, { children: [
342
416
  /* @__PURE__ */ e(g, { height: "9.5rem", width: "17.75rem" }),
343
- /* @__PURE__ */ t(s, { noGradient: !0, children: [
344
- /* @__PURE__ */ e(i, { height: "1.5rem" }),
417
+ /* @__PURE__ */ t(m, { noGradient: !0, children: [
418
+ /* @__PURE__ */ e(n, { height: "1.5rem" }),
345
419
  /* @__PURE__ */ t(l, { noGradient: !0, children: [
346
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
347
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
348
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
349
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" })
420
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
421
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
422
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
423
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" })
350
424
  ] })
351
425
  ] })
352
426
  ] }, `${o}-3`),
353
427
  /* @__PURE__ */ t(l, { children: [
354
428
  /* @__PURE__ */ e(g, { height: "9.5rem", width: "17.75rem" }),
355
- /* @__PURE__ */ t(s, { noGradient: !0, children: [
356
- /* @__PURE__ */ e(i, { height: "1.5rem" }),
429
+ /* @__PURE__ */ t(m, { noGradient: !0, children: [
430
+ /* @__PURE__ */ e(n, { height: "1.5rem" }),
357
431
  /* @__PURE__ */ t(l, { noGradient: !0, children: [
358
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
359
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
360
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
361
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" })
432
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
433
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
434
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
435
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" })
362
436
  ] })
363
437
  ] })
364
438
  ] }, `${o}-4`),
365
439
  /* @__PURE__ */ t(l, { children: [
366
440
  /* @__PURE__ */ e(g, { height: "9.5rem", width: "17.75rem" }),
367
- /* @__PURE__ */ t(s, { noGradient: !0, children: [
368
- /* @__PURE__ */ e(i, { height: "1.5rem" }),
441
+ /* @__PURE__ */ t(m, { noGradient: !0, children: [
442
+ /* @__PURE__ */ e(n, { height: "1.5rem" }),
369
443
  /* @__PURE__ */ t(l, { noGradient: !0, children: [
370
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
371
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
372
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" }),
373
- /* @__PURE__ */ e(i, { width: "5rem", height: "1.25rem" })
444
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
445
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
446
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" }),
447
+ /* @__PURE__ */ e(n, { width: "5rem", height: "1.25rem" })
374
448
  ] })
375
449
  ] })
376
450
  ] }, `${o}-5`)
377
- ] }), x = ({
451
+ ] }), ie = ({
378
452
  keyPrefix: o,
379
- isLoading: m = !1,
380
- fallbackComponent: c = /* @__PURE__ */ e(w, {}),
453
+ isLoading: s = !1,
454
+ fallbackComponent: c = /* @__PURE__ */ e(y, {}),
381
455
  children: a
382
- }) => /* @__PURE__ */ e(P, { fallbackComponent: c, children: m === !0 ? /* @__PURE__ */ e(Z, { keyPrefix: o }) : a }), ee = q(V), ce = L(
456
+ }) => /* @__PURE__ */ e(E, { fallbackComponent: c, children: s === !0 ? /* @__PURE__ */ e(re, { keyPrefix: o }) : a }), te = M(Z), ge = W(
383
457
  ({
384
458
  timeToReadText: o = "{0} min read",
385
- items: m,
459
+ items: s,
386
460
  isLoading: c = !1,
387
461
  onSelectCard: a = () => {
388
462
  },
389
463
  onShare: h = () => {
390
464
  },
391
- onBookmark: _ = () => {
465
+ onBookmark: k = () => {
392
466
  },
393
- getImage: b = () => {
467
+ getImage: N = () => {
394
468
  },
395
- isSeparated: v = !0,
396
- bookmarkComponent: y = /* @__PURE__ */ e(w, {}),
469
+ isSeparated: $ = !0,
470
+ bookmarkComponent: C = /* @__PURE__ */ e(y, {}),
397
471
  componentName: f,
398
- LinkComponent: k
399
- }, $) => {
400
- const u = A(() => m == null ? void 0 : m.map((r, d) => {
472
+ LinkComponent: B,
473
+ hasShare: R = !0,
474
+ hasDelete: u = !1,
475
+ onDelete: w = () => {
476
+ }
477
+ }, d) => {
478
+ const _ = F(() => s == null ? void 0 : s.map((r, b) => {
401
479
  var p;
402
480
  return /* @__PURE__ */ e(
403
- ee,
481
+ te,
404
482
  {
405
483
  blogUuid: r == null ? void 0 : r.uuid,
406
484
  title: r == null ? void 0 : r.title,
@@ -413,20 +491,23 @@ const Q = S.a`
413
491
  numberOfComments: r == null ? void 0 : r.numberOfComments,
414
492
  isSponsored: r == null ? void 0 : r.isSponsored,
415
493
  isBookmarked: r == null ? void 0 : r.isBookmarked,
416
- onSelectCard: (N, B) => a == null ? void 0 : a(r, B),
494
+ onSelectCard: (S, G) => a == null ? void 0 : a(r, G),
495
+ hasShare: R,
496
+ hasDelete: u,
497
+ onDelete: w,
417
498
  onShare: () => h == null ? void 0 : h(r),
418
- onBookmark: _,
419
- imageUrl: b(r == null ? void 0 : r.imageUrl, r == null ? void 0 : r.uuid) || null,
420
- bookmarkComponent: y,
499
+ onBookmark: k,
500
+ imageUrl: N(r == null ? void 0 : r.imageUrl, r == null ? void 0 : r.uuid) || null,
501
+ bookmarkComponent: C,
421
502
  metadata: { name: f, accessor: r == null ? void 0 : r.accessor },
422
- LinkComponent: k
503
+ LinkComponent: B
423
504
  },
424
- `blog-card-item__${d + 1}__${(p = r == null ? void 0 : r.isBookmarked) == null ? void 0 : p.toString()}`
505
+ `blog-card-item__${b + 1}__${(p = r == null ? void 0 : r.isBookmarked) == null ? void 0 : p.toString()}`
425
506
  );
426
- }), [m]);
427
- return /* @__PURE__ */ e(x, { isLoading: c, keyPrefix: "blog-list-skeleton", children: /* @__PURE__ */ e(X, { ref: $, className: v ? "separated" : "", children: u }) });
507
+ }), [s]);
508
+ return /* @__PURE__ */ e(ie, { isLoading: c, keyPrefix: "blog-list-skeleton", children: /* @__PURE__ */ e(x, { ref: d, className: $ ? "separated" : "", children: _ }) });
428
509
  }
429
510
  );
430
511
  export {
431
- ce as default
512
+ ge as default
432
513
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lanaco/lnc-react-ui",
3
- "version": "4.0.219",
3
+ "version": "4.0.220",
4
4
  "description": "React component library",
5
5
  "type": "module",
6
6
  "keywords": [