@lanaco/lnc-react-ui 4.0.130 → 4.0.132

package/dist/BlogsSectionSimple.js

@@ -1,14 +1,14 @@
-import { jsxs as d, jsx as r, Fragment as g } from "react/jsx-runtime";
-import { forwardRef as u, Suspense as B, memo as P, useMemo as R } from "react";
-import { s as h } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { jsxs as s, jsx as r, Fragment as u } from "react/jsx-runtime";
+import { forwardRef as h, Suspense as T, memo as $, useMemo as P } from "react";
+import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as k } from "./consts-BuFChS64.js";
-import { u as T } from "./useDetectMobile-Bkvj0VMa.js";
+import { u as R } from "./useDetectMobile-Bkvj0VMa.js";
 import { o as z, p as I, k as b } from "./utils-BPdU4_1q.js";
-import { R as U } from "./style-XXDQBreL.js";
-import W from "./Button.js";
-import j from "./Link.js";
-import { P as A } from "./index-3TFXgZHA.js";
-const E = h.div`
+import { B as U, R as W } from "./style-XXDQBreL.js";
+import j from "./Button.js";
+import A from "./Link.js";
+import { P as E } from "./index-3TFXgZHA.js";
+const L = f.div`
   display: grid;
   grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
   gap: 1.25rem;
@@ -16,7 +16,7 @@ const E = h.div`
   @media (max-width: ${k + "px"}) {
     grid-template-columns: repeat(1, 1fr);
   }
-`, w = h.div`
+`, y = f.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -26,7 +26,6 @@ const E = h.div`
   border-radius: 0.75rem;
   border: 1px solid var(--gray-95008);
   overflow: hidden;
-  max-height: 21.5625rem;
   min-height: 21.5625rem;
   cursor: pointer;
 
@@ -62,9 +61,17 @@ const E = h.div`
     }
   }
 
+  & .tags-wr {
+    display: flex;
+    flex-wrap: wrap;
+
+    gap: 0.5rem;
+    padding: 1rem;
+  }
+
   @media (max-width: ${k + "px"}) {
   }
-`, y = h.div`
+`, C = f.div`
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -84,120 +91,124 @@ const E = h.div`
     color: var(--gray-700, #4e555f);
     ${I(3)}
   }
-`, L = u((t, o) => {
+`, _ = h((t, a) => {
   const {
     title: i,
-    imageUrl: n,
-    text: l,
-    onCardClick: c,
-    readMoreText: s = "Read more"
+    imageUrl: d,
+    text: n,
+    options: m,
+    onCardClick: p,
+    readMoreText: o = "Read more"
   } = t;
-  return /* @__PURE__ */ d(w, { ref: o, className: "blog-card", onClick: c, children: [
-    /* @__PURE__ */ r(A, { src: n }),
-    /* @__PURE__ */ d(y, { children: [
+  return /* @__PURE__ */ s(y, { ref: a, className: "blog-card", onClick: p, children: [
+    /* @__PURE__ */ r(E, { src: d }),
+    /* @__PURE__ */ s(C, { children: [
       /* @__PURE__ */ r("div", { className: "text-wr-title", children: i }),
-      /* @__PURE__ */ r("div", { className: "text-wr", children: l })
+      /* @__PURE__ */ r("div", { className: "text-wr", children: n })
     ] }),
-    /* @__PURE__ */ r(j, { className: "action", color: "gray", onClick: c, children: s })
+    m && /* @__PURE__ */ r("div", { className: "tags-wr", children: m == null ? void 0 : m.map((l, g) => /* @__PURE__ */ r(U, { color: l == null ? void 0 : l.color, children: l == null ? void 0 : l.name }, g)) }),
+    /* @__PURE__ */ r(A, { className: "action", color: "gray", onClick: p, children: o })
   ] });
-}), _ = u(({}, t) => (
+}), D = h(({}, t) => (
   // <LandingPageClearProductCardSkeleton />
-  /* @__PURE__ */ d(w, { className: "product-card", children: [
+  /* @__PURE__ */ s(y, { className: "product-card", children: [
     /* @__PURE__ */ r("div", { className: "skeleton-img" }),
     /* @__PURE__ */ r("div", { className: "card-title" }),
-    /* @__PURE__ */ r(y, {})
+    /* @__PURE__ */ r(C, {})
   ] })
-)), D = ({ limit: t = 3, isLoading: o = !1, keyPrefix: i }) => /* @__PURE__ */ r(g, { children: Array.from({ length: t }, (n, l) => /* @__PURE__ */ r(
-  _,
+)), G = ({ limit: t = 3, isLoading: a = !1, keyPrefix: i }) => /* @__PURE__ */ r(u, { children: Array.from({ length: t }, (d, n) => /* @__PURE__ */ r(
+  D,
   {
-    isLoading: o
+    isLoading: a
   },
-  `${i}-skeleton-product-card-${l}`
-)) }), G = ({
+  `${i}-skeleton-product-card-${n}`
+)) }), F = ({
   children: t,
-  fallbackComponent: o = /* @__PURE__ */ r(g, {}),
+  fallbackComponent: a = /* @__PURE__ */ r(u, {}),
   isLoading: i = !1,
-  limit: n,
-  keyPrefix: l
-}) => /* @__PURE__ */ r(B, { fallbackComponent: o, children: i === !0 ? /* @__PURE__ */ r(
-  D,
+  limit: d,
+  keyPrefix: n
+}) => /* @__PURE__ */ r(T, { fallbackComponent: a, children: i === !0 ? /* @__PURE__ */ r(
+  G,
   {
     isLoading: i,
-    limit: n,
-    keyPrefix: l
+    limit: d,
+    keyPrefix: n
   }
-) : t }), S = P(L), Y = u((t, o) => {
+) : t }), S = $(_), x = h((t, a) => {
   const {
     icon: i,
-    title: n,
-    onButtonAction: l = () => {
+    title: d,
+    onButtonAction: n = () => {
     },
-    onSelectCard: c = () => {
+    onSelectCard: m = () => {
     },
-    buttonLink: s,
-    items: a,
-    buttonText: C,
-    limit: p = 3,
+    buttonLink: p,
+    items: o,
+    buttonText: l,
+    limit: g = 3,
     isLoading: N = !1,
-    getImage: f = () => {
+    getImage: v = () => {
     },
-    readMoreText: v = "Read more"
-  } = t, M = T(), $ = R(() => /* @__PURE__ */ r(g, { children: M === !0 ? a == null ? void 0 : a.map((e, m) => /* @__PURE__ */ r(
+    readMoreText: w = "Read more"
+  } = t, B = R(), M = P(() => /* @__PURE__ */ r(u, { children: B === !0 ? o == null ? void 0 : o.map((e, c) => /* @__PURE__ */ r(
     S,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: f(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+      imageUrl: v(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
       text: e == null ? void 0 : e.description,
       titleSlug: e == null ? void 0 : e.titleSlug,
-      readMoreText: v,
-      onCardClick: () => c(e == null ? void 0 : e.titleSlug)
+      readMoreText: w,
+      options: e == null ? void 0 : e.options,
+      onCardClick: () => m(e == null ? void 0 : e.titleSlug)
     },
-    m
-  )) : a == null ? void 0 : a.slice(0, p).map((e, m) => /* @__PURE__ */ r(
+    c
+  )) : o == null ? void 0 : o.slice(0, g).map((e, c) => /* @__PURE__ */ r(
     S,
     {
       title: e == null ? void 0 : e.title,
-      imageUrl: f(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+      imageUrl: v(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
       text: e == null ? void 0 : e.description,
       titleSlug: e == null ? void 0 : e.titleSlug,
-      readMoreText: v,
-      onCardClick: () => c(e == null ? void 0 : e.titleSlug)
+      readMoreText: w,
+      options: e == null ? void 0 : e.options,
+      onCardClick: () => m(e == null ? void 0 : e.titleSlug)
     },
-    m
-  )) }), [a]);
-  return /* @__PURE__ */ d(U, { ref: o, children: [
-    /* @__PURE__ */ d("div", { className: "regular-title", children: [
-      /* @__PURE__ */ d("div", { className: "regular-title-text", children: [
+    c
+  )) }), [o]);
+  return /* @__PURE__ */ s(W, { ref: a, children: [
+    /* @__PURE__ */ s("div", { className: "regular-title", children: [
+      /* @__PURE__ */ s("div", { className: "regular-title-text", children: [
         b(i) && /* @__PURE__ */ r("i", { className: i }),
-        /* @__PURE__ */ r("span", { children: n })
+        /* @__PURE__ */ r("span", { children: d })
       ] }),
-      b(s) && /* @__PURE__ */ r(
-        W,
+      b(p) && /* @__PURE__ */ r(
+        j,
         {
           type: "button",
           btnType: "tinted",
           color: "neutral",
           onClick: (e) => {
-            var m;
-            (m = e == null ? void 0 : e.target) == null || m.blur(), l(s);
+            var c;
+            (c = e == null ? void 0 : e.target) == null || c.blur(), n(p);
           },
           borderRadius: "curved",
           className: "button-link",
-          children: C
+          children: l
         }
       )
     ] }),
-    /* @__PURE__ */ r(E, { limit: p, children: /* @__PURE__ */ r(
-      G,
+    /* @__PURE__ */ r(L, { limit: g, children: /* @__PURE__ */ r(
+      F,
       {
         isLoading: N,
-        limit: p,
+        limit: g,
         keyPrefix: "explore-landing",
-        children: $
+        children: M
       }
     ) })
   ] });
 });
 export {
-  Y as default
+  x as default
 };

package/dist/DetailedProductsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),s=require("react"),v=require("./emotion-styled.browser.esm-BtEseadx.cjs"),D=require("./consts-goSZX3xP.cjs"),U=require("./Button.cjs"),y=require("./utils-DmMdPm9O.cjs"),M=require("./useDetectMobile-zkbzoOGV.cjs"),F=require("./style-C_BRvopE.cjs"),h=require("./suspense-product-card-detailed-ByW7-U8H.cjs"),T=require("./index-D0xZLbyl.cjs"),E=v.styled.div`
+"use strict";const i=require("react/jsx-runtime"),s=require("react"),v=require("./emotion-styled.browser.esm-BtEseadx.cjs"),D=require("./consts-goSZX3xP.cjs"),U=require("./Button.cjs"),y=require("./utils-DmMdPm9O.cjs"),M=require("./useDetectMobile-zkbzoOGV.cjs"),F=require("./style-C_BRvopE.cjs"),h=require("./suspense-product-card-detailed-D0jNIBlf.cjs"),T=require("./index-D0xZLbyl.cjs"),E=v.styled.div`
   display: grid;
   grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
   gap: ${r=>(r==null?void 0:r.gap)||"1.25rem"};

package/dist/DetailedProductsSection.js

@@ -6,7 +6,7 @@ import E from "./Button.js";
 import { k as f } from "./utils-BPdU4_1q.js";
 import { u as I } from "./useDetectMobile-Bkvj0VMa.js";
 import { T as $ } from "./style-XXDQBreL.js";
-import { D as L, S as O } from "./suspense-product-card-detailed-Crkoym56.js";
+import { D as L, S as O } from "./suspense-product-card-detailed-BP1opdKD.js";
 import { S as R } from "./index-BRciSeV3.js";
 const W = F.div`
   display: grid;

package/dist/UrgentSaleProductsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const i=require("react/jsx-runtime"),n=require("react"),P=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-goSZX3xP.cjs"),v=require("./useDetectMobile-zkbzoOGV.cjs"),q=require("./Button.cjs"),b=require("./suspense-product-card-detailed-ByW7-U8H.cjs"),C=P.styled.div`
+"use strict";const i=require("react/jsx-runtime"),n=require("react"),P=require("./emotion-styled.browser.esm-BtEseadx.cjs"),f=require("./consts-goSZX3xP.cjs"),v=require("./useDetectMobile-zkbzoOGV.cjs"),q=require("./Button.cjs"),b=require("./suspense-product-card-detailed-D0jNIBlf.cjs"),C=P.styled.div`
   padding: 1.75rem 3rem;
   display: grid;
   grid-template-columns: ${t=>`repeat(${t.limit||5},  minmax(0, 1fr))`};

package/dist/UrgentSaleProductsSection.js

@@ -4,7 +4,7 @@ import { s as C } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { M as L, S as F } from "./consts-BuFChS64.js";
 import { u as I } from "./useDetectMobile-Bkvj0VMa.js";
 import T from "./Button.js";
-import { D as _, S as D } from "./suspense-product-card-detailed-Crkoym56.js";
+import { D as _, S as D } from "./suspense-product-card-detailed-BP1opdKD.js";
 const E = C.div`
   padding: 1.75rem 3rem;
   display: grid;

package/dist/{index-EE-IJbC3.js → index-DJ545v7b.js}

@@ -5,13 +5,7 @@ import { u as b } from "./useDetectMobile-Bkvj0VMa.js";
 import a from "./Button.js";
 import { P as f } from "./index-3TFXgZHA.js";
 const k = p((l, c) => {
-  const {
-    title: s,
-    imageUrl: n,
-    text: m,
-    onCardClick: e,
-    buttonText: t
-  } = l, o = b();
+  const { title: s, imageUrl: n, text: m, onCardClick: e, buttonText: t } = l, o = b();
   return /* @__PURE__ */ i(d, { ref: c, className: "blog-card", onClick: e, children: [
     /* @__PURE__ */ r(f, { src: n }),
     /* @__PURE__ */ i(u, { children: [

package/dist/{suspense-product-card-detailed-Crkoym56.js → suspense-product-card-detailed-BP1opdKD.js}

@@ -1,10 +1,10 @@
-import { jsxs as i, jsx as e, Fragment as w } from "react/jsx-runtime";
-import { forwardRef as p, Suspense as P } from "react";
-import { p as z, t as h, o as s, l as C, q as f, G as u } from "./utils-BPdU4_1q.js";
-import { s as x } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as D } from "./index-3TFXgZHA.js";
-import { M as j } from "./consts-BuFChS64.js";
-const v = x.div`
+import { jsxs as i, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { forwardRef as p, Suspense as z } from "react";
+import { p as C, t as f, o as s, l as D, q as u, G as w } from "./utils-BPdU4_1q.js";
+import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { P as I } from "./index-3TFXgZHA.js";
+import { M as v } from "./consts-BuFChS64.js";
+const k = g.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -22,23 +22,16 @@ const v = x.div`
     gap: 0;
   }
 
-  & img {
-    width: 100%;
-    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
-    object-fit: cover; /* making sure the image isn't distorted */
-    border-radius: 0.75rem;
-  }
-
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-    ${z(2)}
+    ${C(2)}
   }
 
   & .price-text {
     font-size: 1rem;
     font-weight: 600;
-    ${h()}
+    ${f()}
     display: flex;
     align-items: end;
     gap: 0.5rem;
@@ -55,7 +48,7 @@ const v = x.div`
     font-size: 0.75rem;
     font-weight: 400;
     color: var(--gray-600, #676e79);
-    ${h()}
+    ${f()}
   }
 
   & .tags-wrapper {
@@ -93,23 +86,43 @@ const v = x.div`
     height: 1rem;
   }
 
-  @media (max-width: ${j + "px"}) {
+  @media (max-width: ${v + "px"}) {
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+  }
+
+  &:hover .product-image-wrapper img {
+    transform: scale(1.1);
+  }
+`, j = g.div`
+  position: relative;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border: 1px solid #0c15201f;
+
+  & img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 0.75rem;
+    transition: var(--transition, all 0.3s ease);
+  }
+
+  @media (max-width: ${v + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
       min-width: 8.875rem;
       min-height: 8.875rem;
-      min-width: 8.875rem;
-      min-height: 8.875rem;
       object-fit: cover;
     }
-
-    & .price-text {
-      font-size: 0.875rem;
-      font-weight: 600;
-    }
   }
-`, F = x.div`
+`, F = g.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -121,46 +134,46 @@ const v = x.div`
     font-size: 1rem;
     color: var(--warning-500, #F59E0B);
   }
-`, I = p(({ sponsoredText: r = "Sponsored" }, a) => /* @__PURE__ */ i(F, { ref: a, className: "sponsored-line", children: [
+`, T = p(({ sponsoredText: r = "Sponsored" }, a) => /* @__PURE__ */ i(F, { ref: a, className: "sponsored-line", children: [
   /* @__PURE__ */ e("i", { className: "mng-lnc-paw2" }),
   /* @__PURE__ */ e("span", { children: r })
-] })), U = p((r, a) => {
+] })), q = p((r, a) => {
   const {
     uuid: o,
-    title: n,
+    title: l,
     price: t = 0,
-    sellingPrice: c,
-    currency: l,
-    isNegotiable: d,
+    sellingPrice: d,
+    currency: n,
+    isNegotiable: c,
     isFree: m,
-    imageUrl: k,
+    imageUrl: N,
     sellerUuid: G,
-    location: N,
+    location: b,
     isSponsored: $,
-    imageComponent: g,
-    onSelectCard: b = () => {
+    imageComponent: h,
+    onSelectCard: y = () => {
     },
-    freeText: y = "Free",
-    negotiableText: S = "Negotiable"
+    freeText: S = "Free",
+    negotiableText: P = "Negotiable"
   } = r;
   return (
     // <LandingPageProductCardSkeleton />
-    /* @__PURE__ */ i(v, { className: "product-card", onClick: b, children: [
-      C(g) ? g : /* @__PURE__ */ e(D, { src: k }),
-      /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: n }) }),
+    /* @__PURE__ */ i(k, { className: "product-card", onClick: y, children: [
+      /* @__PURE__ */ e(j, { className: "product-image-wrapper", children: D(h) ? h : /* @__PURE__ */ e(I, { src: N }) }),
+      /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: l }) }),
       /* @__PURE__ */ i("div", { className: "wrapper-card-2", children: [
         /* @__PURE__ */ i("div", { className: "price-text", children: [
-          c > 0 && l && d !== !0 && m !== !0 && /* @__PURE__ */ e("div", { children: `${f(c)} ${u(l)}` }),
-          t > 0 && l && d !== !0 && m !== !0 && t !== c && /* @__PURE__ */ e("div", { className: `${c > 0 ? "full-price" : ""}`, children: `${f(t)} ${u(l)}` }),
-          d && S,
-          m && y
+          d > 0 && n && c !== !0 && m !== !0 && /* @__PURE__ */ e("div", { children: `${u(d)} ${w(n)}` }),
+          t > 0 && n && c !== !0 && m !== !0 && t !== d && /* @__PURE__ */ e("div", { className: `${d > 0 ? "full-price" : ""}`, children: `${u(t)} ${w(n)}` }),
+          c && P,
+          m && S
         ] }),
-        /* @__PURE__ */ e("div", { className: "location-text", children: N })
+        /* @__PURE__ */ e("div", { className: "location-text", children: b })
       ] }),
-      $ === !0 && /* @__PURE__ */ e(I, {})
+      $ === !0 && /* @__PURE__ */ e(T, {})
     ] })
   );
-}), T = p(({}, r) => /* @__PURE__ */ i(v, { className: "product-card", children: [
+}), W = p(({}, r) => /* @__PURE__ */ i(k, { className: "product-card", children: [
   /* @__PURE__ */ e("img", { className: "skeleton-img" }),
   /* @__PURE__ */ i("div", { className: "wrapper-card-1", children: [
     /* @__PURE__ */ e("div", { className: "skeleton-title" }),
@@ -170,27 +183,27 @@ const v = x.div`
     /* @__PURE__ */ e("div", { className: "skeleton-price" }),
     /* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
   ] })
-] })), E = ({ limit: r = 5, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ e(w, { children: Array.from({ length: r }, (n, t) => /* @__PURE__ */ e(
-  T,
+] })), E = ({ limit: r = 5, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ e(x, { children: Array.from({ length: r }, (l, t) => /* @__PURE__ */ e(
+  W,
   {
     isLoading: a
   },
   `${o}-skeleton-product-card-${t}`
-)) }), q = ({
+)) }), L = ({
   children: r,
-  fallbackComponent: a = /* @__PURE__ */ e(w, {}),
+  fallbackComponent: a = /* @__PURE__ */ e(x, {}),
   isLoading: o = !1,
-  limit: n,
+  limit: l,
   keyPrefix: t
-}) => /* @__PURE__ */ e(P, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ e(
+}) => /* @__PURE__ */ e(z, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ e(
   E,
   {
     isLoading: o,
-    limit: n,
+    limit: l,
     keyPrefix: t
   }
 ) : r });
 export {
-  U as D,
-  q as S
+  q as D,
+  L as S
 };

package/dist/suspense-product-card-detailed-D0jNIBlf.cjs

@@ -0,0 +1,131 @@
+"use strict";const e=require("react/jsx-runtime"),c=require("react"),r=require("./utils-DmMdPm9O.cjs"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./index-DiIeF_76.cjs"),u=require("./consts-goSZX3xP.cjs"),x=p.styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  & .wrapper-card-1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.38rem;
+  }
+
+  & .wrapper-card-2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    ${r.truncateTextInRows(2)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${r.truncateText()}
+    display: flex;
+    align-items: end;
+    gap: 0.5rem;
+    & .full-price {
+      text-decoration: line-through;
+      font-size: 0.75rem;
+      font-weight: 400;
+      padding-bottom: 0.125rem;
+      color: var(--gray-600, #676e79);
+    }
+  }
+
+  & .location-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--gray-600, #676e79);
+    ${r.truncateText()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  & .skeleton-img {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-tags {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 80%;
+    height: 1.5rem;
+  }
+
+  & .skeleton-price {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 50%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-sponsored {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 50%;
+    height: 1rem;
+  }
+
+  @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+  }
+
+  &:hover .product-image-wrapper img {
+    transform: scale(1.1);
+  }
+`,y=p.styled.div`
+  position: relative;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border: 1px solid #0c15201f;
+
+  & img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 0.75rem;
+    transition: var(--transition, all 0.3s ease);
+  }
+
+  @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+  }
+`,N=p.styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--gray-500);
+  font-size:  0.75rem;
+  font-weight: 500;
+
+  & i {
+    font-size: 1rem;
+    color: var(--warning-500, #F59E0B);
+  }
+`,$=c.forwardRef(({sponsoredText:t="Sponsored"},s)=>e.jsxs(N,{ref:s,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:t})]})),S=c.forwardRef((t,s)=>{const{uuid:a,title:o,price:i=0,sellingPrice:n,currency:d,isNegotiable:l,isFree:m,imageUrl:h,sellerUuid:G,location:f,isSponsored:w,imageComponent:g,onSelectCard:j=()=>{},freeText:v="Free",negotiableText:b="Negotiable"}=t;return e.jsxs(x,{className:"product-card",onClick:j,children:[e.jsx(y,{className:"product-image-wrapper",children:r.isDefined(g)?g:e.jsx(k.ProductImageWrapper,{src:h})}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:o})}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:"price-text",children:[n>0&&d&&l!==!0&&m!==!0&&e.jsx("div",{children:`${r.formatPrice(n)} ${r.GetCurrencySymbol(d)}`}),i>0&&d&&l!==!0&&m!==!0&&i!==n&&e.jsx("div",{className:`${n>0?"full-price":""}`,children:`${r.formatPrice(i)} ${r.GetCurrencySymbol(d)}`}),l&&b,m&&v]}),e.jsx("div",{className:"location-text",children:f})]}),w===!0&&e.jsx($,{})]})}),P=c.forwardRef(({},t)=>e.jsxs(x,{className:"product-card",children:[e.jsx("img",{className:"skeleton-img"}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"skeleton-tags"})]}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-price"}),e.jsx("div",{className:"skeleton-sponsored"})]})]})),C=({limit:t=5,isLoading:s=!1,keyPrefix:a})=>e.jsx(e.Fragment,{children:Array.from({length:t},(o,i)=>e.jsx(P,{isLoading:s},`${a}-skeleton-product-card-${i}`))}),z=({children:t,fallbackComponent:s=e.jsx(e.Fragment,{}),isLoading:a=!1,limit:o,keyPrefix:i})=>e.jsx(c.Suspense,{fallbackComponent:s,children:a===!0?e.jsx(C,{isLoading:a,limit:o,keyPrefix:i}):t});exports.DetailedProductCard=S;exports.SuspenseDetailedProductCard=z;

package/package.json

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