@lanaco/lnc-react-ui 4.0.170 → 4.0.171

package/dist/BlogsSectionSimpleCentered.js

@@ -1,21 +1,22 @@
-import { jsxs as g, jsx as t, Fragment as h } from "react/jsx-runtime";
-import { forwardRef as u, useRef as v, Suspense as S } from "react";
-import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as b } from "./consts-BuFChS64.js";
-import { u as $ } from "./useDetectMobile-Bkvj0VMa.js";
-import { o as C, p as T } from "./utils-BdsZgOUE.js";
-import N from "./Button.js";
-import { P as B } from "./index-CF3HhgvN.js";
-const P = f.div`
+import { jsxs as f, jsx as t, Fragment as w } from "react/jsx-runtime";
+import { forwardRef as C, useRef as S, Suspense as v } from "react";
+import { s as d } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as u } from "./consts-BuFChS64.js";
+import { u as y } from "./useDetectMobile-Bkvj0VMa.js";
+import { o as k } from "./utils-DHfRApMf.js";
+import $ from "./Button.js";
+import { P as R } from "./index-BbltNcou.js";
+import { a as T, b as h } from "./style-CXMUA6cI.js";
+const B = d.div`
   display: grid;
-  grid-template-columns: ${(i) => `repeat(${i.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${(r) => `repeat(${r.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
   margin: auto;
   width: fit-content;
-  @media (max-width: ${b + "px"}) {
+  @media (max-width: ${u + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, k = f.div`
+`, I = d.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -51,19 +52,10 @@ const P = f.div`
     object-fit: cover;
   }
 
-  & .skeleton-img {
-    max-width: 6rem;
-    min-width: 6rem;
-    min-height: 6rem;
-    max-height: 6rem;
-    border-radius: 0.75rem;
-    background-color: ${C("-90deg")};
-  }
-
-  @media (max-width: ${b + "px"}) {
+  @media (max-width: ${u + "px"}) {
     max-width: unset;
   }
-`, y = f.div`
+`, W = d.div`
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -78,122 +70,137 @@ const P = f.div`
     line-height: 1.75rem;
   }
 
-  & .skeleton-title {
-    height: 1.75rem;
-    width: 80%;
-    background-color: ${C("-90deg")};
-  }
-
   & .text-wr {
     font-size: 0.875rem;
     font-style: normal;
     font-weight: 400;
     line-height: 1.25rem;
     letter-spacing: 0.0156rem;
-    ${T(3)}
+    ${k(3)}
   }
-`, w = u((i, l) => {
-  const { title: r, image: o, text: n, buttonText: d, onCardClick: c, metadata: a } = i, e = v(), m = (s) => {
-    c(s, e);
+`, b = C((r, m) => {
+  const { title: i, image: o, text: l, buttonText: c, onCardClick: s, metadata: n } = r, e = S(), a = (p) => {
+    s(p, e);
   };
-  return /* @__PURE__ */ g(
-    k,
+  return /* @__PURE__ */ f(
+    I,
     {
       ref: e,
-      name: a == null ? void 0 : a.name,
-      "data-accessor": a == null ? void 0 : a.accessor,
+      name: n == null ? void 0 : n.name,
+      "data-accessor": n == null ? void 0 : n.accessor,
       className: "blog-card",
-      onClick: m,
+      onClick: a,
       children: [
-        /* @__PURE__ */ t(B, { src: o }),
-        /* @__PURE__ */ g(y, { children: [
-          /* @__PURE__ */ t("div", { className: "text-wr-title", children: r }),
-          /* @__PURE__ */ t("div", { className: "text-wr", children: n })
+        /* @__PURE__ */ t(R, { src: o }),
+        /* @__PURE__ */ f(W, { children: [
+          /* @__PURE__ */ t("div", { className: "text-wr-title", children: i }),
+          /* @__PURE__ */ t("div", { className: "text-wr", children: l })
         ] }),
         /* @__PURE__ */ t(
-          N,
+          $,
           {
             borderRadius: "curved",
             color: "gray",
             type: "button",
             btnType: "outline",
-            onClick: m,
+            onClick: a,
             size: "medium",
-            children: d
+            children: c
           }
         )
       ]
     }
   );
-}), R = u((i, l) => {
-  const { onCardClick: r } = i;
-  return (
-    // <SimpleBlogCardSkeleton />
-    /* @__PURE__ */ g(k, { className: "product-card", onClick: r, children: [
-      /* @__PURE__ */ t("div", { className: "skeleton-img" }),
-      /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t("div", { className: "skeleton-title" }) })
-    ] })
-  );
-}), z = ({ limit: i = 3, isLoading: l = !1, keyPrefix: r }) => /* @__PURE__ */ t(h, { children: Array.from({ length: i }, (o, n) => /* @__PURE__ */ t(
-  R,
-  {
-    isLoading: l
-  },
-  `${r}-skeleton-product-card-${n}`
-)) }), I = ({
-  children: i,
-  fallbackComponent: l = /* @__PURE__ */ t(h, {}),
-  isLoading: r = !1,
-  limit: o,
-  keyPrefix: n
-}) => /* @__PURE__ */ t(S, { fallbackComponent: l, children: r === !0 ? /* @__PURE__ */ t(
-  z,
-  {
-    isLoading: r,
-    limit: o,
-    keyPrefix: n
+}), j = d(T)`
+  @media (max-width: ${u + "px"}) {
+    flex-direction: column;
+
+    & > div {
+      width: 100%;
+
+      background: linear-gradient(
+        to right,
+        transparent 0%,
+        #f4f6fb 40%,
+        #f4f6fb 100%
+      );
+
+      box-shadow: none;
+    }
   }
-) : i }), F = u((i, l) => {
+`, z = ({ keyPrefix: r }) => /* @__PURE__ */ f(j, { justifyContent: "center", alignItems: "center", children: [
+  /* @__PURE__ */ t(
+    h,
+    {
+      height: "24.75rem",
+      width: "18.5rem",
+      borderRadius: "0.75rem"
+    },
+    `${r}-1`
+  ),
+  /* @__PURE__ */ t(
+    h,
+    {
+      height: "24.75rem",
+      width: "18.5rem",
+      borderRadius: "0.75rem"
+    },
+    `${r}-2`
+  ),
+  /* @__PURE__ */ t(
+    h,
+    {
+      height: "24.75rem",
+      width: "18.5rem",
+      borderRadius: "0.75rem"
+    },
+    `${r}-3`
+  )
+] }), M = ({
+  keyPrefix: r,
+  isLoading: m = !1,
+  fallbackComponent: i = /* @__PURE__ */ t(w, {}),
+  children: o
+}) => /* @__PURE__ */ t(v, { fallbackComponent: i, children: m === !0 ? /* @__PURE__ */ t(z, { keyPrefix: r }) : o }), X = C((r, m) => {
   const {
-    items: r,
+    items: i,
     limit: o = 3,
-    onSelectCard: n = () => {
+    onSelectCard: l = () => {
     },
-    isLoading: d = !1,
-    componentName: c
-  } = i, a = $();
-  return /* @__PURE__ */ t(P, { ref: l, limit: o, children: /* @__PURE__ */ t(
-    I,
+    isLoading: c = !1,
+    componentName: s
+  } = r, n = y();
+  return /* @__PURE__ */ t(
+    M,
     {
-      isLoading: d,
-      limit: o,
-      keyPrefix: "explore-landing",
-      children: /* @__PURE__ */ t(h, { children: a === !0 ? r == null ? void 0 : r.map((e, m) => /* @__PURE__ */ t(
-        w,
+      isLoading: c,
+      keyPrefix: "blogs-simple-centered-skeleton",
+      children: /* @__PURE__ */ t(B, { ref: m, limit: o, children: /* @__PURE__ */ t(w, { children: n === !0 ? i == null ? void 0 : i.map((e, a) => /* @__PURE__ */ t(
+        b,
         {
           title: e == null ? void 0 : e.title,
           image: (e == null ? void 0 : e.image) || null,
           text: e == null ? void 0 : e.text,
           buttonText: e == null ? void 0 : e.buttonText,
-          onCardClick: (s, p) => n(e, p),
-          metadata: { name: c, accessor: e == null ? void 0 : e.accessor }
+          onCardClick: (p, g) => l(e, g),
+          metadata: { name: s, accessor: e == null ? void 0 : e.accessor }
         },
-        m
-      )) : r == null ? void 0 : r.slice(0, o).map((e, m) => /* @__PURE__ */ t(
-        w,
+        a
+      )) : i == null ? void 0 : i.slice(0, o).map((e, a) => /* @__PURE__ */ t(
+        b,
         {
           title: e == null ? void 0 : e.title,
           image: (e == null ? void 0 : e.image) || null,
           text: e == null ? void 0 : e.text,
           buttonText: e == null ? void 0 : e.buttonText,
-          onCardClick: (s, p) => n(e, p),
-          metadata: { name: c, accessor: e == null ? void 0 : e.accessor }
+          onCardClick: (p, g) => l(e, g),
+          metadata: { name: s, accessor: e == null ? void 0 : e.accessor }
         },
-        m
-      )) })
+        a
+      )) }) })
     }
-  ) });
+  );
 });
 export {
-  F as default
+  X as default
 };

package/dist/BlogsSectionWithFilters.cjs

@@ -1,12 +1,12 @@
-"use strict";const t=require("react/jsx-runtime"),l=require("react"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),S=require("./consts-goSZX3xP.cjs"),W=require("./useDetectMobile-zkbzoOGV.cjs"),m=require("./utils-Dl9xPH4c.cjs"),A=require("./style-Db3VFbfP.cjs"),I=require("./Button.cjs"),_=require("./Link.cjs"),z=require("./index-BueKsXT8.cjs"),E=require("./index-BvQx3xAm.cjs"),P=x.styled.div`
+"use strict";const t=require("react/jsx-runtime"),a=require("react"),j=require("./emotion-styled.browser.esm-BtEseadx.cjs"),x=require("./consts-goSZX3xP.cjs"),L=require("./useDetectMobile-zkbzoOGV.cjs"),b=require("./utils-Dl9xPH4c.cjs"),W=require("./style-Db3VFbfP.cjs"),T=require("./Button.cjs"),E=require("./Link.cjs"),I=require("./index-BueKsXT8.cjs"),M=require("./index-BvQx3xAm.cjs"),n=require("./style-BAcV7F53.cjs"),P=j.styled.div`
   display: grid;
-  grid-template-columns: ${n=>`repeat(${n.limit},  minmax(0, 1fr))`};
+  grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
 
-  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`,C=x.styled.div`
+`,O=j.styled.div`
   display: flex;
   width: 100%;
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
@@ -33,22 +33,13 @@
     object-fit: cover;
   }
 
-  & .skeleton-img {
-    max-width: 3.3125rem;
-    min-width: 3.3125rem;
-    min-height: 3.3125rem;
-    max-height: 3.3125rem;
-    border-radius: 0.75rem;
-    background-color: ${m.linearGradientAnimation("-90deg")};
-  }
-
   & a {
     margin-top: auto;
   }
 
-  @media (max-width: ${S.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
   }
-`,N=x.styled.div`
+`,z=j.styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -59,22 +50,33 @@
     font-size: 1rem;
   }
 
-  & .skeleton-title {
-    height: 1.5rem;
-    width: 80%;
-    background-color: ${m.linearGradientAnimation("-90deg")};
-  }
-
-  & .skeleton-action {
-    height: 1.25rem;
-    width: 20%;
-    background-color: ${m.linearGradientAnimation("-90deg")};
-  }
-
   & .text-wr {
     font-weight: 400;
     font-size: 0.875rem;
     color: var(--gray-700, #4e555f);
-    ${m.truncateTextInRows(3)}
+    ${b.truncateTextInRows(3)}
+  }
+`,D=a.forwardRef((r,m)=>{const{title:l,imageUrl:c,text:s,buttonText:u,onCardClick:d,metadata:i}=r,h=a.useRef(),p=g=>{d(g,h)};return t.jsxs(O,{ref:h,name:i==null?void 0:i.name,"data-accessor":i==null?void 0:i.accessor,className:"blog-card",onClick:p,children:[t.jsxs(z,{children:[t.jsx("div",{className:"text-wr-title",children:l}),t.jsx("div",{className:"text-wr",children:s}),t.jsx(E,{color:"gray",onClick:p,children:u})]}),t.jsx(I.ProductImageWrapper,{src:c})]})}),F=j.styled(n.SkeletonColumnWrapper)`
+  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
+    & .skeleton__tags {
+      & > div {
+        width: 100%;
+      }
+    }
+
+    & .skeleton__cards {
+      flex-direction: column;
+
+      & > div {
+        background: linear-gradient(
+          to right,
+          transparent 0%,
+          #f4f6fb 40%,
+          #f4f6fb 100%
+        );
+
+        box-shadow: none;
+      }
+    }
   }
-`,F=l.forwardRef((n,a)=>{const{title:s,imageUrl:c,text:r,buttonText:p,onCardClick:d,metadata:i}=n,u=l.useRef(),g=h=>{d(h,u)};return t.jsxs(C,{ref:u,name:i==null?void 0:i.name,"data-accessor":i==null?void 0:i.accessor,className:"blog-card",onClick:g,children:[t.jsxs(N,{children:[t.jsx("div",{className:"text-wr-title",children:s}),t.jsx("div",{className:"text-wr",children:r}),t.jsx(_,{color:"gray",onClick:g,children:p})]}),t.jsx(z.ProductImageWrapper,{src:c})]})}),O=l.forwardRef(({},n)=>t.jsxs(C,{className:"blog-card",children:[t.jsxs(N,{children:[t.jsx("div",{className:"skeleton-title"}),t.jsx("div",{className:"text-wr"}),t.jsx("div",{className:"skeleton-action"})]}),t.jsx("div",{className:"skeleton-img"})]})),D=({limit:n=3,isLoading:a=!1,keyPrefix:s})=>t.jsx(t.Fragment,{children:Array.from({length:n},(c,r)=>t.jsx(O,{isLoading:a},`${s}-skeleton-product-card-${r}`))}),G=({children:n,fallbackComponent:a=t.jsx(t.Fragment,{}),isLoading:s=!1,limit:c,keyPrefix:r})=>t.jsx(l.Suspense,{fallbackComponent:a,children:s===!0?t.jsx(D,{isLoading:s,limit:c,keyPrefix:r}):n}),y=l.memo(F),L=l.forwardRef((n,a)=>{const{icon:s,title:c,items:r,buttonText:p,limit:d=3,options:i,selectedOption:u=[],onButtonAction:g=()=>{},buttonLink:h,onSelectOption:w=()=>{},onSelectAll:q=()=>{},isLoading:B=!1,onSelectCard:b=()=>{},productsToolbarName:T="All",allButton:$=!1,componentName:k}=n,v=W.useDetectMobile(),R=l.useMemo(()=>{var o;return t.jsx(t.Fragment,{children:v===!0?r==null?void 0:r.map((e,f)=>t.jsx(y,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(M,j)=>b(e,j),metadata:{name:k,accessor:e==null?void 0:e.accessor}},f)):(o=r==null?void 0:r.slice(0,d))==null?void 0:o.map((e,f)=>t.jsx(y,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(M,j)=>b(e,j),metadata:{name:k,accessor:e==null?void 0:e.accessor}},f))})},[r,v,d,b]);return t.jsxs(A.TitleWithOptionsSectionWrapper,{ref:a,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[m.isDefinedNotEmptyString(s)&&t.jsx("i",{className:s}),t.jsx("span",{children:c})]}),m.isDefinedNotEmptyString(h)&&t.jsx(I,{type:"button",btnType:"tinted",color:"neutral",onClick:o=>{var e;(e=o==null?void 0:o.target)==null||e.blur(),g(h)},borderRadius:"curved",children:p})]}),(i==null?void 0:i.length)>0&&t.jsx(E.SelectBar,{items:i,selectedIds:u,onRemove:o=>{w(o)},onSelect:o=>{w(o)},onSelectAll:q,labelKey:"name",valueKey:"code",noMargin:!0,productsToolbarName:T,allButton:$}),t.jsx(P,{limit:d,children:t.jsx(G,{isLoading:B,limit:d,keyPrefix:"explore-landing",children:R})})]})});module.exports=L;
+`,A=({keyPrefix:r})=>t.jsxs(F,{children:[t.jsxs(n.SkeletonRowWrapper,{className:"skeleton__tags",children:[t.jsx(n.SkeletonLinePlaceholder,{height:"2.25rem",width:"128px",borderRadius:"1rem"},`${r}-1`),t.jsx(n.SkeletonLinePlaceholder,{height:"2.25rem",width:"128px",borderRadius:"1rem"},`${r}-2`),t.jsx(n.SkeletonLinePlaceholder,{height:"2.25rem",width:"128px",borderRadius:"1rem"},`${r}-3`)]}),t.jsxs(n.SkeletonRowWrapper,{className:"skeleton__cards",children:[t.jsx(n.SkeletonLinePlaceholder,{height:"10.375rem",borderRadius:"0.75rem"},`${r}-4`),t.jsx(n.SkeletonLinePlaceholder,{height:"10.375rem",borderRadius:"0.75rem"},`${r}-5`),t.jsx(n.SkeletonLinePlaceholder,{height:"10.375rem",borderRadius:"0.75rem"},`${r}-6`)]})]}),U=({keyPrefix:r,isLoading:m=!1,fallbackComponent:l=t.jsx(t.Fragment,{}),children:c})=>t.jsx(a.Suspense,{fallbackComponent:l,children:m===!0?t.jsx(A,{keyPrefix:r}):c}),C=a.memo(D),X=a.forwardRef((r,m)=>{const{icon:l,title:c,items:s,buttonText:u,limit:d=3,options:i,selectedOption:h=[],onButtonAction:p=()=>{},buttonLink:g,onSelectOption:k=()=>{},onSelectAll:_=()=>{},isLoading:v=!1,onSelectCard:f=()=>{},productsToolbarName:$="All",allButton:N=!1,componentName:y}=r,R=L.useDetectMobile(),q=a.useMemo(()=>{var o;return t.jsx(t.Fragment,{children:R===!0?s==null?void 0:s.map((e,S)=>t.jsx(C,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(B,w)=>f(e,w),metadata:{name:y,accessor:e==null?void 0:e.accessor}},S)):(o=s==null?void 0:s.slice(0,d))==null?void 0:o.map((e,S)=>t.jsx(C,{title:e==null?void 0:e.title,imageUrl:(e==null?void 0:e.image)||null,text:e==null?void 0:e.text,buttonText:e==null?void 0:e.buttonText,onCardClick:(B,w)=>f(e,w),metadata:{name:y,accessor:e==null?void 0:e.accessor}},S))})},[s,R,d,f]);return t.jsxs(W.TitleWithOptionsSectionWrapper,{ref:m,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[b.isDefinedNotEmptyString(l)&&t.jsx("i",{className:l}),t.jsx("span",{children:c})]}),b.isDefinedNotEmptyString(u)&&b.isDefinedNotEmptyString(g)&&!v&&t.jsx(T,{type:"button",btnType:"tinted",color:"neutral",onClick:o=>{var e;(e=o==null?void 0:o.target)==null||e.blur(),p(g)},borderRadius:"curved",children:u})]}),t.jsxs(U,{isLoading:v,keyPrefix:"blogs-with-filters-skeleton",children:[(i==null?void 0:i.length)>0&&t.jsx(M.SelectBar,{items:i,selectedIds:h,onRemove:o=>{k(o)},onSelect:o=>{k(o)},onSelectAll:_,labelKey:"name",valueKey:"code",noMargin:!0,productsToolbarName:$,allButton:N}),t.jsx(P,{limit:d,children:q})]})]})});module.exports=X;