@lanaco/lnc-react-ui 4.0.60 → 4.0.61

package/dist/BlogCategoryCardsSection.cjs

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),a=require("react"),u=require("./suspense-categories-card-simple-HXlnt5ki.cjs"),m=require("./style-BNMwv9ZQ.cjs"),p=a.memo(u.CategorySimpleCard),g=a.forwardRef(({items:r,onSelectCard:i=()=>{},isLoading:n=!1,limit:t=4},l)=>{const c=a.useMemo(()=>{var o;return(o=r==null?void 0:r.slice(0,4))==null?void 0:o.map((e,d)=>s.jsx(p,{uuid:e==null?void 0:e.uuid,image:e==null?void 0:e.image,name:e==null?void 0:e.name,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid)},d))},[r]);return s.jsx(m.Wrapper,{children:s.jsx("div",{className:"wrapper__grid",children:s.jsx(u.SuspenseSimpleCategoryCard,{isLoading:n,limit:t,keyPrefix:"blog-section",children:c})})})});module.exports=g;
+"use strict";const s=require("react/jsx-runtime"),a=require("react"),u=require("./suspense-categories-card-simple-HXlnt5ki.cjs"),l=require("./style-OPSfrtFm.cjs"),m=a.memo(u.CategorySimpleCard),p=a.forwardRef(({items:r,onSelectCard:i=()=>{},isLoading:n=!1,limit:t=4,isHighlight:c=!1},C)=>{const d=a.useMemo(()=>{var o;return(o=r==null?void 0:r.slice(0,4))==null?void 0:o.map((e,g)=>s.jsx(m,{uuid:e==null?void 0:e.uuid,image:e==null?void 0:e.image,name:e==null?void 0:e.name,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid)},g))},[r]);return s.jsx(l.Wrapper,{className:c?"highlight":"",children:s.jsx("div",{className:"wrapper__grid",children:s.jsx(u.SuspenseSimpleCategoryCard,{isLoading:n,limit:t,keyPrefix:"blog-section",children:d})})})});module.exports=p;

package/dist/BlogCategoryCardsSection.js

@@ -1,28 +1,34 @@
-import { jsx as o } from "react/jsx-runtime";
-import { memo as u, forwardRef as f, useMemo as g } from "react";
-import { C as n, S as t } from "./suspense-categories-card-simple-BEaaS-oz.js";
-import { W as l } from "./style-7aonpzuy.js";
-const c = u(n), z = f(
-  ({ items: e, onSelectCard: a = () => {
-  }, isLoading: m = !1, limit: p = 4 }, C) => {
-    const d = g(() => {
+import { jsx as a } from "react/jsx-runtime";
+import { memo as l, forwardRef as f, useMemo as t } from "react";
+import { C as u, S as n } from "./suspense-categories-card-simple-BEaaS-oz.js";
+import { W as c } from "./style-DOKM5cZi.js";
+const C = l(u), M = f(
+  ({
+    items: r,
+    onSelectCard: o = () => {
+    },
+    isLoading: m = !1,
+    limit: s = 4,
+    isHighlight: p = !1
+  }, h) => {
+    const d = t(() => {
       var i;
-      return (i = e == null ? void 0 : e.slice(0, 4)) == null ? void 0 : i.map((r, s) => /* @__PURE__ */ o(
-        c,
+      return (i = r == null ? void 0 : r.slice(0, 4)) == null ? void 0 : i.map((e, g) => /* @__PURE__ */ a(
+        C,
         {
-          uuid: r == null ? void 0 : r.uuid,
-          image: r == null ? void 0 : r.image,
-          name: r == null ? void 0 : r.name,
-          onSelectCard: () => a == null ? void 0 : a(r == null ? void 0 : r.uuid)
+          uuid: e == null ? void 0 : e.uuid,
+          image: e == null ? void 0 : e.image,
+          name: e == null ? void 0 : e.name,
+          onSelectCard: () => o == null ? void 0 : o(e == null ? void 0 : e.uuid)
         },
-        s
+        g
       ));
-    }, [e]);
-    return /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o("div", { className: "wrapper__grid", children: /* @__PURE__ */ o(
-      t,
+    }, [r]);
+    return /* @__PURE__ */ a(c, { className: p ? "highlight" : "", children: /* @__PURE__ */ a("div", { className: "wrapper__grid", children: /* @__PURE__ */ a(
+      n,
       {
         isLoading: m,
-        limit: p,
+        limit: s,
         keyPrefix: "blog-section",
         children: d
       }
@@ -30,5 +36,5 @@ const c = u(n), z = f(
   }
 );
 export {
-  z as default
+  M as default
 };

package/dist/BlogProductCardsSection.cjs

@@ -1 +1 @@
-"use strict";const r=require("react/jsx-runtime"),u=require("react"),g=require("./useDetectMobile-D6d5LpdL.cjs"),q=require("./index-D0NN682o.cjs"),P=require("./suspense-product-card-simple-QlbK_FyB.cjs"),j=require("./Button.cjs"),f=require("./style-BNMwv9ZQ.cjs"),y=u.memo(q.SimpleProductCard),M=u.forwardRef(({buttonText:o,buttonLink:t,items:i,onButtonAction:l=()=>{},onSelectCard:s=()=>{},isLoading:n=!1,limit:d=4,getImage:a=()=>{}},N)=>{const p=g.useDetectMobile(),m=u.useMemo(()=>{var c;return(c=i==null?void 0:i.slice(0,4))==null?void 0:c.map((e,b)=>r.jsx(y,{title:e==null?void 0:e.name,price:e==null?void 0:e.price,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,currency:e==null?void 0:e.currency,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>s==null?void 0:s(e==null?void 0:e.uuid),image:a(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null},b))},[i]);return r.jsxs(f.Wrapper,{children:[r.jsx("div",{className:"wrapper__grid",children:r.jsx(P.SuspenseSimpleProductCard,{isLoading:n,limit:d,keyPrefix:"blog-section",children:m})}),r.jsx(j,{text:o,borderRadius:"curved",btnType:p?"basic":"outline",color:"neutral",className:"wrapper__action",onClick:()=>l(t)})]})});module.exports=M;
+"use strict";const r=require("react/jsx-runtime"),u=require("react"),q=require("./useDetectMobile-D6d5LpdL.cjs"),P=require("./index-D0NN682o.cjs"),h=require("./suspense-product-card-simple-QlbK_FyB.cjs"),j=require("./Button.cjs"),f=require("./style-OPSfrtFm.cjs"),y=u.memo(P.SimpleProductCard),M=u.forwardRef(({buttonText:t,buttonLink:o,items:i,onButtonAction:l=()=>{},onSelectCard:s=()=>{},isLoading:n=!1,limit:d=4,getImage:a=()=>{},isHighlight:p=!0},N)=>{const m=q.useDetectMobile(),b=u.useMemo(()=>{var c;return(c=i==null?void 0:i.slice(0,4))==null?void 0:c.map((e,g)=>r.jsx(y,{title:e==null?void 0:e.name,price:e==null?void 0:e.price,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,currency:e==null?void 0:e.currency,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,onSelectCard:()=>s==null?void 0:s(e==null?void 0:e.uuid),image:a(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null},g))},[i]);return r.jsxs(f.Wrapper,{className:p?"highlight":"",children:[r.jsx("div",{className:"wrapper__grid",children:r.jsx(h.SuspenseSimpleProductCard,{isLoading:n,limit:d,keyPrefix:"blog-section",children:b})}),r.jsx(j,{text:t,borderRadius:"curved",btnType:m?"basic":"outline",color:"neutral",className:"wrapper__action",onClick:()=>l(o)})]})});module.exports=M;

package/dist/BlogProductCardsSection.js

@@ -1,15 +1,15 @@
-import { jsx as i, jsxs as f } from "react/jsx-runtime";
-import { memo as b, forwardRef as g, useMemo as P } from "react";
-import { u as y } from "./useDetectMobile-BC6EGaBc.js";
-import { S as M } from "./index-CFVE57cd.js";
-import { S as N } from "./suspense-product-card-simple--_T6ibCi.js";
+import { jsx as i, jsxs as g } from "react/jsx-runtime";
+import { memo as b, forwardRef as h, useMemo as P } from "react";
+import { u as N } from "./useDetectMobile-BC6EGaBc.js";
+import { S as y } from "./index-CFVE57cd.js";
+import { S as M } from "./suspense-product-card-simple--_T6ibCi.js";
 import S from "./Button.js";
-import { W as _ } from "./style-7aonpzuy.js";
-const h = b(M), F = g(
+import { W as _ } from "./style-DOKM5cZi.js";
+const w = b(y), R = h(
   ({
-    buttonText: s,
+    buttonText: u,
     buttonLink: t,
-    items: e,
+    items: r,
     onButtonAction: l = () => {
     },
     onSelectCard: o = () => {
@@ -17,42 +17,43 @@ const h = b(M), F = g(
     isLoading: a = !1,
     limit: c = 4,
     getImage: d = () => {
-    }
-  }, w) => {
-    const m = y(), p = P(() => {
-      var u;
-      return (u = e == null ? void 0 : e.slice(0, 4)) == null ? void 0 : u.map((r, n) => /* @__PURE__ */ i(
-        h,
+    },
+    isHighlight: m = !0
+  }, U) => {
+    const p = N(), n = P(() => {
+      var s;
+      return (s = r == null ? void 0 : r.slice(0, 4)) == null ? void 0 : s.map((e, f) => /* @__PURE__ */ i(
+        w,
         {
-          title: r == null ? void 0 : r.name,
-          price: r == null ? void 0 : r.price,
-          isFree: r == null ? void 0 : r.isFree,
-          isNegotiable: r == null ? void 0 : r.isNegotiable,
-          currency: r == null ? void 0 : r.currency,
-          sellerUuid: r == null ? void 0 : r.sellerUuid,
-          uuid: r == null ? void 0 : r.uuid,
-          onSelectCard: () => o == null ? void 0 : o(r == null ? void 0 : r.uuid),
-          image: d(r == null ? void 0 : r.image, r == null ? void 0 : r.uuid, r == null ? void 0 : r.sellerUuid) || null
+          title: e == null ? void 0 : e.name,
+          price: e == null ? void 0 : e.price,
+          isFree: e == null ? void 0 : e.isFree,
+          isNegotiable: e == null ? void 0 : e.isNegotiable,
+          currency: e == null ? void 0 : e.currency,
+          sellerUuid: e == null ? void 0 : e.sellerUuid,
+          uuid: e == null ? void 0 : e.uuid,
+          onSelectCard: () => o == null ? void 0 : o(e == null ? void 0 : e.uuid),
+          image: d(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null
         },
-        n
+        f
       ));
-    }, [e]);
-    return /* @__PURE__ */ f(_, { children: [
+    }, [r]);
+    return /* @__PURE__ */ g(_, { className: m ? "highlight" : "", children: [
       /* @__PURE__ */ i("div", { className: "wrapper__grid", children: /* @__PURE__ */ i(
-        N,
+        M,
         {
           isLoading: a,
           limit: c,
           keyPrefix: "blog-section",
-          children: p
+          children: n
         }
       ) }),
       /* @__PURE__ */ i(
         S,
         {
-          text: s,
+          text: u,
           borderRadius: "curved",
-          btnType: m ? "basic" : "outline",
+          btnType: p ? "basic" : "outline",
           color: "neutral",
           className: "wrapper__action",
           onClick: () => l(t)
@@ -62,5 +63,5 @@ const h = b(M), F = g(
   }
 );
 export {
-  F as default
+  R as default
 };

package/dist/BlogShopCardsSection.cjs

@@ -1 +1 @@
-"use strict";const r=require("react/jsx-runtime"),u=require("react"),f=require("./useDetectMobile-D6d5LpdL.cjs"),a=require("./skeleton-BTGcDgNY.cjs"),g=require("./Button.cjs"),S=require("./style-BNMwv9ZQ.cjs"),b=({limit:t=4,isLoading:n=!1,keyPrefix:s})=>r.jsx(r.Fragment,{children:Array.from({length:t},(i,o)=>r.jsx(a.ShopCardSkeleton,{isLoading:n},`${s}-skeleton-shop-card-${o}`))}),_=({children:t,fallbackComponent:n=r.jsx(r.Fragment,{}),isLoading:s=!1,limit:i,keyPrefix:o})=>r.jsx(u.Suspense,{fallbackComponent:n,children:s===!0?r.jsx(b,{isLoading:s,limit:i,keyPrefix:o}):t}),k=u.memo(a.ShopCard),q=u.forwardRef(({buttonText:t,buttonLink:n,items:s,onButtonAction:i=()=>{},onSelectCard:o=()=>{},isLoading:l=!1,limit:d=4,getImage:p=()=>{}},C)=>{const h=f.useDetectMobile(),j=u.useMemo(()=>{var c;return(c=s==null?void 0:s.slice(0,4))==null?void 0:c.map((e,m)=>r.jsx(k,{uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.name,subtitle:e==null?void 0:e.shortDescription,rating:e==null?void 0:e.rating,reviewCount:e==null?void 0:e.reviewCount,onSelectCard:()=>o==null?void 0:o(e==null?void 0:e.uuid),image:p(e==null?void 0:e.profileImage,e==null?void 0:e.uuid)||null,hideProducts:!0},`shop-card__${m+1}`))},[s]);return r.jsxs(S.Wrapper,{children:[r.jsx("div",{className:"wrapper__grid",children:r.jsx(_,{isLoading:l,limit:d,keyPrefix:"blog-section",children:j})}),r.jsx(g,{text:t,borderRadius:"curved",btnType:h?"basic":"outline",color:"neutral",className:"wrapper__action",onClick:()=>i(n)})]})});module.exports=q;
+"use strict";const r=require("react/jsx-runtime"),u=require("react"),f=require("./useDetectMobile-D6d5LpdL.cjs"),a=require("./skeleton-BTGcDgNY.cjs"),g=require("./Button.cjs"),S=require("./style-OPSfrtFm.cjs"),b=({limit:t=4,isLoading:n=!1,keyPrefix:s})=>r.jsx(r.Fragment,{children:Array.from({length:t},(i,o)=>r.jsx(a.ShopCardSkeleton,{isLoading:n},`${s}-skeleton-shop-card-${o}`))}),_=({children:t,fallbackComponent:n=r.jsx(r.Fragment,{}),isLoading:s=!1,limit:i,keyPrefix:o})=>r.jsx(u.Suspense,{fallbackComponent:n,children:s===!0?r.jsx(b,{isLoading:s,limit:i,keyPrefix:o}):t}),k=u.memo(a.ShopCard),q=u.forwardRef(({buttonText:t,buttonLink:n,items:s,onButtonAction:i=()=>{},onSelectCard:o=()=>{},isLoading:l=!1,limit:d=4,getImage:p=()=>{}},C)=>{const h=f.useDetectMobile(),j=u.useMemo(()=>{var c;return(c=s==null?void 0:s.slice(0,4))==null?void 0:c.map((e,m)=>r.jsx(k,{uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.name,subtitle:e==null?void 0:e.shortDescription,rating:e==null?void 0:e.rating,reviewCount:e==null?void 0:e.reviewCount,onSelectCard:()=>o==null?void 0:o(e==null?void 0:e.uuid),image:p(e==null?void 0:e.profileImage,e==null?void 0:e.uuid)||null,hideProducts:!0},`shop-card__${m+1}`))},[s]);return r.jsxs(S.Wrapper,{children:[r.jsx("div",{className:"wrapper__grid",children:r.jsx(_,{isLoading:l,limit:d,keyPrefix:"blog-section",children:j})}),r.jsx(g,{text:t,borderRadius:"curved",btnType:h?"basic":"outline",color:"neutral",className:"wrapper__action",onClick:()=>i(n)})]})});module.exports=q;

package/dist/BlogShopCardsSection.js

@@ -3,7 +3,7 @@ import { Suspense as S, memo as g, forwardRef as b, useMemo as _ } from "react";
 import { u as C } from "./useDetectMobile-BC6EGaBc.js";
 import { a as k, S as w } from "./skeleton-CwE74giy.js";
 import v from "./Button.js";
-import { W as M } from "./style-7aonpzuy.js";
+import { W as M } from "./style-DOKM5cZi.js";
 const y = ({ limit: s = 4, isLoading: i = !1, keyPrefix: e }) => /* @__PURE__ */ o(u, { children: Array.from({ length: s }, (a, t) => /* @__PURE__ */ o(
   k,
   {

package/dist/{style-7aonpzuy.js → style-DOKM5cZi.js}

@@ -1,6 +1,6 @@
-import { s as e } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as r } from "./consts-C1uHV4xc.js";
-const i = e.div`
+import { s as r } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as e } from "./consts-C1uHV4xc.js";
+const i = r.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -24,7 +24,19 @@ const i = e.div`
     letter-spacing: -0.09px;
   }
 
-  @media (max-width: ${r + "px"}) {
+  &.highlight {
+    border-radius: 1rem;
+    border: 2px solid var(--warning-500, #f59e0b);
+    background: var(--warning-50, #fffbeb);
+    padding: 0.75rem;
+    width: fit-content;
+
+    & .wrapper__action {
+      border: none;
+    }
+  }
+
+  @media (max-width: ${e + "px"}) {
     & .wrapper__grid {
       grid-template-columns: repeat(2, 1fr);
     }

package/dist/{style-BNMwv9ZQ.cjs → style-OPSfrtFm.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./emotion-styled.browser.esm-BtEseadx.cjs"),r=require("./consts-CtNoHdBj.cjs"),t=e.styled.div`
+"use strict";const r=require("./emotion-styled.browser.esm-BtEseadx.cjs"),e=require("./consts-CtNoHdBj.cjs"),t=r.styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -22,7 +22,19 @@
     letter-spacing: -0.09px;
   }
 
-  @media (max-width: ${r.MOBILE_SIZE_PX+"px"}) {
+  &.highlight {
+    border-radius: 1rem;
+    border: 2px solid var(--warning-500, #f59e0b);
+    background: var(--warning-50, #fffbeb);
+    padding: 0.75rem;
+    width: fit-content;
+
+    & .wrapper__action {
+      border: none;
+    }
+  }
+
+  @media (max-width: ${e.MOBILE_SIZE_PX+"px"}) {
     & .wrapper__grid {
       grid-template-columns: repeat(2, 1fr);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.60",
+  "version": "4.0.61",
   "description": "React component library",
   "type": "module",
   "keywords": [
@@ -225,4 +225,4 @@
     "storybook-dark-mode": "^1.1.0",
     "vite": "^5.4.10"
   }
-}
+}