@lanaco/lnc-react-ui 4.0.138 → 4.0.140

package/dist/DetailedProductsSection.cjs

@@ -1,7 +1,7 @@
-"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-Dl9xPH4c.cjs"),M=require("./useDetectMobile-zkbzoOGV.cjs"),F=require("./style-CyHewQxg.cjs"),h=require("./suspense-product-card-detailed-BJLmsTWB.cjs"),T=require("./index-D0xXo7W6.cjs"),E=v.styled.div`
+"use strict";const t=require("react/jsx-runtime"),s=require("react"),v=require("./emotion-styled.browser.esm-BtEseadx.cjs"),D=require("./consts-goSZX3xP.cjs"),U=require("./Button.cjs"),C=require("./utils-Dl9xPH4c.cjs"),M=require("./useDetectMobile-zkbzoOGV.cjs"),T=require("./style-CyHewQxg.cjs"),f=require("./suspense-product-card-detailed-C7_tBl85.cjs"),F=require("./index-D0xXo7W6.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"};
+  grid-template-columns: ${l=>`repeat(${l.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
 
   & .button-link {
     white-space: nowrap;
@@ -26,4 +26,4 @@
       /* Safari and Chrome */
     }
   }
-`,S=s.memo(h.DetailedProductCard),R=s.forwardRef((r,f)=>{const{icon:a,title:j,buttonLink:c,items:t,buttonText:w,limit:o=4,gap:C,onSelectCard:u=()=>{},onButtonAction:P=()=>{},isLoading:N=!1,getImage:d=()=>{},negotiableText:m,freeText:g,options:l,onSelectOption:p=()=>{},productsToolbarName:q="All"}=r,b=M.useDetectMobile(),k=s.useMemo(()=>i.jsx(i.Fragment,{children:b===!0?t==null?void 0:t.map((e,n)=>i.jsx(S,{title:e==null?void 0:e.name,price:e==null?void 0:e.price,sellingPrice:e==null?void 0:e.sellingPrice,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,isSponsored:e==null?void 0:e.isSponsored,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>u(e==null?void 0:e.uuid),imageUrl:d(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,negotiableText:m,freeText:g},n)):t==null?void 0:t.slice(0,o).map((e,n)=>i.jsx(S,{title:e==null?void 0:e.name,price:e==null?void 0:e.price,sellingPrice:e==null?void 0:e.sellingPrice,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,location:e==null?void 0:e.location,isSponsored:e==null?void 0:e.isSponsored,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>u(e==null?void 0:e.uuid),imageUrl:d(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,negotiableText:m,freeText:g},n))}),[t,b,o]);return i.jsxs(F.TitleWithOptionsSectionWrapper,{ref:f,children:[i.jsxs("div",{className:"regular-title",children:[i.jsxs("div",{className:"regular-title-text",children:[y.isDefinedNotEmptyString(a)&&i.jsx("i",{className:a}),i.jsx("span",{children:j})]}),y.isDefinedNotEmptyString(c)&&i.jsx(U,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var n;(n=e==null?void 0:e.target)==null||n.blur(),P(c)},borderRadius:"curved",className:"button-link",children:w})]}),(l==null?void 0:l.length)>0&&i.jsx(T.SelectBar,{items:l,onRemove:e=>{p(e)},onSelect:e=>{p(e)},labelKey:"name",valueKey:"code",noMargin:!0,productsToolbarName:q}),i.jsx(E,{limit:o,gap:C,children:i.jsx(h.SuspenseDetailedProductCard,{isLoading:N,limit:o,keyPrefix:"explore-landing",children:k})})]})});module.exports=R;
+`,h=s.memo(f.DetailedProductCard),R=s.forwardRef((l,q)=>{const{icon:a,title:S,buttonLink:c,items:i,buttonText:j,limit:o=4,onSelectCard:d=()=>{},onButtonAction:w=()=>{},isLoading:P=!1,getImage:u=()=>{},negotiableText:m,freeText:g,options:n,onSelectOption:p=()=>{},productsToolbarName:N="All",sponsoredText:b}=l,y=M.useDetectMobile(),k=s.useMemo(()=>t.jsx(t.Fragment,{children:y===!0?i==null?void 0:i.map((e,r)=>t.jsx(h,{title:e==null?void 0:e.title,price:e==null?void 0:e.price,sellingPrice:e==null?void 0:e.sellingPrice,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,sponsored:e==null?void 0:e.sponsored,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>d(e==null?void 0:e.uuid),imageUrl:u(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,negotiableText:m,freeText:g,tags:e==null?void 0:e.tags,categoryCode:e==null?void 0:e.categoryCode,condition:e==null?void 0:e.condition,quantity:e==null?void 0:e.quantity,trade:e==null?void 0:e.trade,sponsoredText:b},r)):i==null?void 0:i.slice(0,o).map((e,r)=>t.jsx(h,{title:e==null?void 0:e.title,price:e==null?void 0:e.price,sellingPrice:e==null?void 0:e.sellingPrice,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,location:e==null?void 0:e.location,sponsored:e==null?void 0:e.sponsored,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>d(e==null?void 0:e.uuid),imageUrl:u(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,negotiableText:m,freeText:g,tags:e==null?void 0:e.tags,categoryCode:e==null?void 0:e.categoryCode,condition:e==null?void 0:e.condition,quantity:e==null?void 0:e.quantity,trade:e==null?void 0:e.trade,sponsoredText:b},r))}),[i,y,o]);return t.jsxs(T.TitleWithOptionsSectionWrapper,{ref:q,children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[C.isDefinedNotEmptyString(a)&&t.jsx("i",{className:a}),t.jsx("span",{children:S})]}),C.isDefinedNotEmptyString(c)&&t.jsx(U,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var r;(r=e==null?void 0:e.target)==null||r.blur(),w(c)},borderRadius:"curved",className:"button-link",children:j})]}),(n==null?void 0:n.length)>0&&t.jsx(F.SelectBar,{items:n,onRemove:e=>{p(e)},onSelect:e=>{p(e)},labelKey:"name",valueKey:"code",noMargin:!0,productsToolbarName:N}),t.jsx(E,{limit:o,children:t.jsx(f.SuspenseDetailedProductCard,{isLoading:P,limit:o,keyPrefix:"explore-landing",children:k})})]})});module.exports=R;

package/dist/DetailedProductsSection.js

@@ -1,23 +1,23 @@
-import { jsx as i, Fragment as U, jsxs as a } from "react/jsx-runtime";
-import { memo as M, forwardRef as T, useMemo as D } from "react";
+import { jsx as i, Fragment as T, jsxs as l } from "react/jsx-runtime";
+import { memo as U, forwardRef as M, useMemo as D } from "react";
 import { s as F } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as B } from "./consts-BuFChS64.js";
-import E from "./Button.js";
-import { k as f } from "./utils-BdsZgOUE.js";
-import { u as I } from "./useDetectMobile-Bkvj0VMa.js";
-import { T as $ } from "./style-DFPWLJBr.js";
-import { D as L, S as O } from "./suspense-product-card-detailed-D6191kXr.js";
+import { M as q } from "./consts-BuFChS64.js";
+import B from "./Button.js";
+import { k as y } from "./utils-BdsZgOUE.js";
+import { u as E } from "./useDetectMobile-Bkvj0VMa.js";
+import { T as I } from "./style-DFPWLJBr.js";
+import { D as L, S as O } from "./suspense-product-card-detailed-DtTXmJJB.js";
 import { S as R } from "./index-Dweo-G3H.js";
 const W = F.div`
   display: grid;
-  grid-template-columns: ${(r) => `repeat(${r.limit},  minmax(0, 1fr))`};
-  gap: ${(r) => (r == null ? void 0 : r.gap) || "1.25rem"};
+  grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
+  gap: 1.25rem;
 
   & .button-link {
     white-space: nowrap;
   }
 
-  @media (max-width: ${B + "px"}) {
+  @media (max-width: ${q + "px"}) {
     display: flex;
     gap: 1rem;
     overflow-x: auto;
@@ -36,15 +36,14 @@ const W = F.div`
       /* Safari and Chrome */
     }
   }
-`, S = M(L), J = T((r, h) => {
+`, C = U(L), J = M((a, h) => {
   const {
     icon: s,
-    title: y,
+    title: S,
     buttonLink: d,
-    items: o,
+    items: t,
     buttonText: w,
-    limit: l = 4,
-    gap: C,
+    limit: o = 4,
     onSelectCard: c = () => {
     },
     onButtonAction: P = () => {
@@ -57,31 +56,38 @@ const W = F.div`
     options: n,
     onSelectOption: g = () => {
     },
-    productsToolbarName: N = "All"
-  } = r, b = I(), v = D(() => /* @__PURE__ */ i(U, { children: b === !0 ? o == null ? void 0 : o.map((e, t) => /* @__PURE__ */ i(
-    S,
+    productsToolbarName: N = "All",
+    sponsoredText: b
+  } = a, f = E(), v = D(() => /* @__PURE__ */ i(T, { children: f === !0 ? t == null ? void 0 : t.map((e, r) => /* @__PURE__ */ i(
+    C,
     {
-      title: e == null ? void 0 : e.name,
+      title: e == null ? void 0 : e.title,
       price: e == null ? void 0 : e.price,
       sellingPrice: e == null ? void 0 : e.sellingPrice,
       currency: e == null ? void 0 : e.currency,
       image: e == null ? void 0 : e.image,
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
-      isSponsored: e == null ? void 0 : e.isSponsored,
+      sponsored: e == null ? void 0 : e.sponsored,
       imageComponent: e == null ? void 0 : e.imageComponent,
       onSelectCard: () => c(e == null ? void 0 : e.uuid),
       imageUrl: m(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
       isFree: e == null ? void 0 : e.isFree,
       isNegotiable: e == null ? void 0 : e.isNegotiable,
       negotiableText: u,
-      freeText: p
+      freeText: p,
+      tags: e == null ? void 0 : e.tags,
+      categoryCode: e == null ? void 0 : e.categoryCode,
+      condition: e == null ? void 0 : e.condition,
+      quantity: e == null ? void 0 : e.quantity,
+      trade: e == null ? void 0 : e.trade,
+      sponsoredText: b
     },
-    t
-  )) : o == null ? void 0 : o.slice(0, l).map((e, t) => /* @__PURE__ */ i(
-    S,
+    r
+  )) : t == null ? void 0 : t.slice(0, o).map((e, r) => /* @__PURE__ */ i(
+    C,
     {
-      title: e == null ? void 0 : e.name,
+      title: e == null ? void 0 : e.title,
       price: e == null ? void 0 : e.price,
       sellingPrice: e == null ? void 0 : e.sellingPrice,
       currency: e == null ? void 0 : e.currency,
@@ -89,32 +95,38 @@ const W = F.div`
       sellerUuid: e == null ? void 0 : e.sellerUuid,
       uuid: e == null ? void 0 : e.uuid,
       location: e == null ? void 0 : e.location,
-      isSponsored: e == null ? void 0 : e.isSponsored,
+      sponsored: e == null ? void 0 : e.sponsored,
       imageComponent: e == null ? void 0 : e.imageComponent,
       onSelectCard: () => c(e == null ? void 0 : e.uuid),
       imageUrl: m(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
       isFree: e == null ? void 0 : e.isFree,
       isNegotiable: e == null ? void 0 : e.isNegotiable,
       negotiableText: u,
-      freeText: p
+      freeText: p,
+      tags: e == null ? void 0 : e.tags,
+      categoryCode: e == null ? void 0 : e.categoryCode,
+      condition: e == null ? void 0 : e.condition,
+      quantity: e == null ? void 0 : e.quantity,
+      trade: e == null ? void 0 : e.trade,
+      sponsoredText: b
     },
-    t
-  )) }), [o, b, l]);
-  return /* @__PURE__ */ a($, { ref: h, children: [
-    /* @__PURE__ */ a("div", { className: "regular-title", children: [
-      /* @__PURE__ */ a("div", { className: "regular-title-text", children: [
-        f(s) && /* @__PURE__ */ i("i", { className: s }),
-        /* @__PURE__ */ i("span", { children: y })
+    r
+  )) }), [t, f, o]);
+  return /* @__PURE__ */ l(I, { ref: h, children: [
+    /* @__PURE__ */ l("div", { className: "regular-title", children: [
+      /* @__PURE__ */ l("div", { className: "regular-title-text", children: [
+        y(s) && /* @__PURE__ */ i("i", { className: s }),
+        /* @__PURE__ */ i("span", { children: S })
       ] }),
-      f(d) && /* @__PURE__ */ i(
-        E,
+      y(d) && /* @__PURE__ */ i(
+        B,
         {
           type: "button",
           btnType: "tinted",
           color: "neutral",
           onClick: (e) => {
-            var t;
-            (t = e == null ? void 0 : e.target) == null || t.blur(), P(d);
+            var r;
+            (r = e == null ? void 0 : e.target) == null || r.blur(), P(d);
           },
           borderRadius: "curved",
           className: "button-link",
@@ -138,11 +150,11 @@ const W = F.div`
         productsToolbarName: N
       }
     ),
-    /* @__PURE__ */ i(W, { limit: l, gap: C, children: /* @__PURE__ */ i(
+    /* @__PURE__ */ i(W, { limit: o, children: /* @__PURE__ */ i(
       O,
       {
         isLoading: k,
-        limit: l,
+        limit: o,
         keyPrefix: "explore-landing",
         children: v
       }

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-BJLmsTWB.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-C7_tBl85.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-D6191kXr.js";
+import { D as _, S as D } from "./suspense-product-card-detailed-DtTXmJJB.js";
 const E = C.div`
   padding: 1.75rem 3rem;
   display: grid;

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

@@ -0,0 +1,246 @@
+"use strict";const e=require("react/jsx-runtime"),d=require("react"),t=require("./utils-Dl9xPH4c.cjs"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),te=require("./index-BueKsXT8.cjs"),_=require("./Badge.cjs"),oe=require("./Popover.cjs"),se=require("./PopoverTrigger.cjs"),ie=require("./PopoverContent.cjs"),ae=require("./useDetectMobile-zkbzoOGV.cjs"),D=require("./consts-goSZX3xP.cjs"),I=x.styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+  overflow: hidden;
+  width: 100%;
+
+  & .wrapper-card-1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.38rem;
+  }
+
+  & .wrapper-card-2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  & .wrapper-card-3 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+
+    & > div {
+      & > div {
+        width: 100% !important;
+      }
+    }
+  }
+
+  & .tag {
+    height: 1.5rem;
+    gap: 0.25rem;
+    padding: 0.25rem 0.375rem;
+    border-radius: 0.375rem;
+    background: #f9fafb;
+    border: 1px solid var(--gray-95012, #14161a1f);
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.025rem;
+    color: var(--gray-950, #14161a);
+    white-space: nowrap;
+    flex: 0 0 auto;
+
+    &.tag-sponsored {
+      & i {
+        color: var(--yellow-500, #f59e0b);
+      }
+    }
+  }
+
+  & .tag-mobile {
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.025rem;
+    color: var(--gray-600, #676e79);
+  }
+
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    ${t.truncateTextInRows(2)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${t.truncateText()}
+    display: flex;
+    align-items: end;
+    gap: 0.5rem;
+    color: var(--gray-950, #14161a);
+
+    &.new-price {
+      color: var(--danger-600, #e11d48);
+    }
+
+    & .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);
+    ${t.truncateText()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  & .skeleton-img {
+    background-color: ${t.linearGradientAnimation("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${t.linearGradientAnimation("-90deg")};
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-tags {
+    background-color: ${t.linearGradientAnimation("-90deg")};
+    width: 80%;
+    height: 1.5rem;
+  }
+
+  & .skeleton-price {
+    background-color: ${t.linearGradientAnimation("-90deg")};
+    width: 50%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-sponsored {
+    background-color: ${t.linearGradientAnimation("-90deg")};
+    width: 50%;
+    height: 1rem;
+  }
+
+  & .tags-popover__trigger {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  @media (max-width: ${D.MOBILE_SIZE_PX+"px"}) {
+    overflow: visible;
+
+    & .tags-popover__trigger {
+      flex-wrap: wrap;
+    }
+
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+
+      & .full-price {
+        display: none;
+      }
+    }
+  }
+
+  &:hover .product-image-wrapper img {
+    transform: scale(1.1);
+  }
+`,ce=x.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: ${D.MOBILE_SIZE_PX+"px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+  }
+`,le=x.styled.div`
+  background: var(--white, #fff);
+  z-index: 1;
+
+  border: 1px solid var(--gray-200, #dddfe4);
+  border-radius: 0.5rem;
+  line-height: 1rem;
+  position: absolute;
+  padding: 0.5rem 0.75rem;
+  top: 0.5rem;
+  left: 25%;
+  transform: translateX(-50%);
+  min-width: 13rem;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-style: solid;
+    border-width: 0.625rem;
+  }
+
+  &::after {
+    top: -1.1875rem;
+    border-color: transparent transparent var(--white, #fff) transparent;
+  }
+
+  &::before {
+    top: -1.25rem;
+    border-color: transparent transparent var(--gray-200, #dddfe4) transparent;
+  }
+
+  & .tags-popover__content {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 400;
+
+    & .tags-popover__name {
+      color: var(--gray-600, #676e79);
+    }
+
+    & .tags-popover__value {
+      color: var(--gray-950, #14161a);
+    }
+  }
+`,de=x.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);
+  }
+`,me=d.forwardRef(({sponsoredText:m="Sponsored"},v)=>e.jsxs(de,{ref:v,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:m})]})),pe="Vehicles_Cars",ge="Vehicles_Motorcycles",ue="Vehicles_Trucks",he="Vehicles_AgriculturalMachines_Tractors",fe="Vehicles_ConstructionMachines",ve="Vehicles_Bus",we="Vehicles_Campers",ye="RealEstates_",i={Mileage:{icon:"mng-lnc-road",measure:"km"},YearOfProduction:{icon:"mng-lnc-calendar",measure:""},Fuel:{icon:"mng-lnc-gas-station",measure:""},EnginePowerKW:{icon:"mng-lnc-engine",measure:"kW"},Transmission:{icon:"mng-lnc-transmission",measure:""},Model:{icon:"mng-lnc-application",measure:""},Brand:{icon:"mng-lnc-car--front",measure:""},SurfaceArea:{icon:"mng-lnc-right-angle",measure:""},Floor:{icon:"mng-lnc-elevator",measure:""},FurnishedCondition:{icon:"mng-lnc-sofa-01",measure:""},AdType:{icon:"mng-lnc-notes",measure:""},NumberOfRooms:{icon:"mng-lnc-meeting-room",measure:""},HeatingType:{icon:"mng-lnc-heat",measure:""},AirConditioning:{icon:"mng-lnc-air-conditioner",measure:""},Type:{icon:"mng-lnc-house-building",measure:""},Parking:{icon:"mng-lnc-parking-area-circle",measure:""},Internet:{icon:"mng-lnc-wifi-02",measure:""},State:{icon:"mng-lnc-settings-1",measure:""},NumberOfPremises:{icon:"mng-lnc-meeting-room",measure:""},Pool:{icon:"mng-lnc-pool",measure:""},Approach:{icon:"mng-lnc-driveway",measure:""},NumberOfBeds:{icon:"mng-lnc-bed",measure:""},Kitchen:{icon:"mng-lnc-fridge",measure:""},BathroomToilet:{icon:"mng-lnc-bath",measure:""},default:{icon:" mng-lnc-clock--filled",measure:""}},be=d.forwardRef((m,v)=>{const{title:w,price:y=0,sellingPrice:p,currency:j,isNegotiable:N,isFree:C,imageUrl:G,location:R,sponsored:T,imageComponent:O,onSelectCard:A=()=>{},freeText:X="Free",negotiableText:L="Negotiable",tags:o=[],categoryCode:k,condition:P,quantity:$,trade:S,sponsoredText:U}=m,E=ae.useDetectMobile(),V=[pe,ge,ue,he,fe,ve,we,ye].some(r=>k==null?void 0:k.includes(r)),[Y,M]=d.useState(!1),K=()=>{M(!0)},Z=()=>{M(!1)},a=d.useRef(null),u=d.useRef([]),[q,H]=d.useState(o==null?void 0:o.length),J=()=>{var h,c,b;if(!(a!=null&&a.current)||((h=u==null?void 0:u.current)==null?void 0:h.length)===0)return;const r=(c=a==null?void 0:a.current)==null?void 0:c.offsetWidth;let n=0,s=0;for(let l=0;l<(o==null?void 0:o.length);l++){const f=((b=u==null?void 0:u.current[l])==null?void 0:b.offsetWidth)||0,g=n+f+4;if(g<=r)n+=g,s++;else break}H(s)};d.useEffect(()=>{const r=a==null?void 0:a.current;if(!r)return;const n=new ResizeObserver(()=>{J()});return n.observe(r),()=>{n.disconnect()}},[o]);const Q=()=>{var r;return e.jsx("div",{className:"tags-popover__trigger",children:(r=o==null?void 0:o.slice(0,q))==null?void 0:r.map((n,s)=>{var f,g,W,B,F;const h=((f=i==null?void 0:i[n==null?void 0:n.code])==null?void 0:f.icon)??((g=i==null?void 0:i.default)==null?void 0:g.icon)??"",c=((W=n==null?void 0:n.measurementUnit)==null?void 0:W.symbol)??((B=i==null?void 0:i[n==null?void 0:n.code])==null?void 0:B.measure)??"",l=[(n==null?void 0:n.value)??((F=n==null?void 0:n.multiOptions)==null?void 0:F[0])??"",c].filter(Boolean).join(" ");return E?e.jsxs("div",{className:"tag-mobile",children:[l,s<q-1?" · ":""]}):e.jsxs(_,{ref:ne=>u.current[s]=ne,className:`tag ${T?"tag-sponsored":""}`,children:[e.jsx("i",{className:h}),l]},`detailed-products-section-tag__${s+1}`)})})},ee=()=>e.jsx("div",{className:"tags-popover__content",children:o==null?void 0:o.map((r,n)=>{var l,f,g;const s=((l=r==null?void 0:r.measurementUnit)==null?void 0:l.symbol)??((f=i==null?void 0:i[r==null?void 0:r.code])==null?void 0:f.measure)??"",c=[(r==null?void 0:r.value)??((g=r==null?void 0:r.multiOptions)==null?void 0:g[0])??"",s].filter(Boolean).join(" "),b=r==null?void 0:r.name;return e.jsxs("div",{children:[e.jsx("span",{className:"tags-popover__name",children:`${b}: `}),e.jsx("span",{className:"tags-popover__value",children:c})]},`detailed-products-section-tag-dropdown__${n+1}`)})}),re=()=>{var r;if(E){const n=[P,$,S];return(r=n==null?void 0:n.filter(s=>t.isDefinedNotEmptyString(s)))==null?void 0:r.map((s,h,c)=>e.jsxs("div",{className:"tag-mobile",children:[s,h<(c==null?void 0:c.length)-1?" · ":""]}))}return e.jsxs(e.Fragment,{children:[P&&e.jsx(_,{className:"tag",children:P},"detailed-products-section-tag__condition"),$&&e.jsx(_,{className:"tag",children:$},"detailed-products-section-tag__quantity"),S&&e.jsx(_,{className:"tag",children:S},"detailed-products-section-tag__trade")]})},z=y>0&&j&&N!==!0&&C!==!0&&y!==p;return e.jsxs(I,{ref:a,className:"product-card",onClick:A,children:[e.jsx(ce,{className:"product-image-wrapper",children:t.isDefined(O)?O:e.jsx(te.ProductImageWrapper,{src:G})}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:w})}),e.jsxs("div",{className:"wrapper-card-3",children:[V&&e.jsx("div",{...E?{}:{onMouseEnter:K,onMouseLeave:Z},children:e.jsxs(oe,{placement:"bottom",open:Y,children:[e.jsx(se,{children:Q()}),e.jsx(ie,{style:{all:"unset"},children:e.jsx(le,{children:ee()})})]})}),!V&&re()]}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:`price-text ${z?"new-price":""}`,children:[p>0&&j&&N!==!0&&C!==!0&&e.jsx("div",{children:`${t.formatPrice(p)} ${t.GetCurrencySymbol(j)}`}),z&&e.jsx("div",{className:`${p>0?"full-price":""}`,children:`${t.formatPrice(y)} ${t.GetCurrencySymbol(j)}`}),N&&L,C&&X]}),e.jsx("div",{className:"location-text",children:R})]}),T===!0&&e.jsx(me,{sponsoredText:U})]})}),je=d.forwardRef(({},m)=>e.jsxs(I,{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"})]})]})),_e=({limit:m=5,isLoading:v=!1,keyPrefix:w})=>e.jsx(e.Fragment,{children:Array.from({length:m},(y,p)=>e.jsx(je,{isLoading:v},`${w}-skeleton-product-card-${p}`))}),xe=({children:m,fallbackComponent:v=e.jsx(e.Fragment,{}),isLoading:w=!1,limit:y,keyPrefix:p})=>e.jsx(d.Suspense,{fallbackComponent:v,children:w===!0?e.jsx(_e,{isLoading:w,limit:y,keyPrefix:p}):m});exports.DetailedProductCard=be;exports.SuspenseDetailedProductCard=xe;

package/dist/suspense-product-card-detailed-DtTXmJJB.js

@@ -0,0 +1,539 @@
+import { jsxs as n, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { forwardRef as z, useState as R, useRef as q, useEffect as de, Suspense as me } from "react";
+import { p as pe, t as U, o as y, l as ge, q as Y, G as A, k as ue } from "./utils-BdsZgOUE.js";
+import { s as k } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { P as he } from "./index-CF3HhgvN.js";
+import N from "./Badge.js";
+import fe from "./Popover.js";
+import ve from "./PopoverTrigger.js";
+import we from "./PopoverContent.js";
+import { u as be } from "./useDetectMobile-Bkvj0VMa.js";
+import { M as K } from "./consts-BuFChS64.js";
+const L = k.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+  overflow: hidden;
+  width: 100%;
+
+  & .wrapper-card-1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.38rem;
+  }
+
+  & .wrapper-card-2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  & .wrapper-card-3 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+
+    & > div {
+      & > div {
+        width: 100% !important;
+      }
+    }
+  }
+
+  & .tag {
+    height: 1.5rem;
+    gap: 0.25rem;
+    padding: 0.25rem 0.375rem;
+    border-radius: 0.375rem;
+    background: #f9fafb;
+    border: 1px solid var(--gray-95012, #14161a1f);
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.025rem;
+    color: var(--gray-950, #14161a);
+    white-space: nowrap;
+    flex: 0 0 auto;
+
+    &.tag-sponsored {
+      & i {
+        color: var(--yellow-500, #f59e0b);
+      }
+    }
+  }
+
+  & .tag-mobile {
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.025rem;
+    color: var(--gray-600, #676e79);
+  }
+
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    ${pe(2)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${U()}
+    display: flex;
+    align-items: end;
+    gap: 0.5rem;
+    color: var(--gray-950, #14161a);
+
+    &.new-price {
+      color: var(--danger-600, #e11d48);
+    }
+
+    & .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);
+    ${U()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  & .skeleton-img {
+    background-color: ${y("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${y("-90deg")};
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-tags {
+    background-color: ${y("-90deg")};
+    width: 80%;
+    height: 1.5rem;
+  }
+
+  & .skeleton-price {
+    background-color: ${y("-90deg")};
+    width: 50%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-sponsored {
+    background-color: ${y("-90deg")};
+    width: 50%;
+    height: 1rem;
+  }
+
+  & .tags-popover__trigger {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  @media (max-width: ${K + "px"}) {
+    overflow: visible;
+
+    & .tags-popover__trigger {
+      flex-wrap: wrap;
+    }
+
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+
+      & .full-price {
+        display: none;
+      }
+    }
+  }
+
+  &:hover .product-image-wrapper img {
+    transform: scale(1.1);
+  }
+`, ye = k.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: ${K + "px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+  }
+`, _e = k.div`
+  background: var(--white, #fff);
+  z-index: 1;
+
+  border: 1px solid var(--gray-200, #dddfe4);
+  border-radius: 0.5rem;
+  line-height: 1rem;
+  position: absolute;
+  padding: 0.5rem 0.75rem;
+  top: 0.5rem;
+  left: 25%;
+  transform: translateX(-50%);
+  min-width: 13rem;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-style: solid;
+    border-width: 0.625rem;
+  }
+
+  &::after {
+    top: -1.1875rem;
+    border-color: transparent transparent var(--white, #fff) transparent;
+  }
+
+  &::before {
+    top: -1.25rem;
+    border-color: transparent transparent var(--gray-200, #dddfe4) transparent;
+  }
+
+  & .tags-popover__content {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 400;
+
+    & .tags-popover__name {
+      color: var(--gray-600, #676e79);
+    }
+
+    & .tags-popover__value {
+      color: var(--gray-950, #14161a);
+    }
+  }
+`, Ne = k.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);
+  }
+`, ke = z(({ sponsoredText: d = "Sponsored" }, f) => /* @__PURE__ */ n(Ne, { ref: f, className: "sponsored-line", children: [
+  /* @__PURE__ */ e("i", { className: "mng-lnc-paw2" }),
+  /* @__PURE__ */ e("span", { children: d })
+] })), Ce = "Vehicles_Cars", Pe = "Vehicles_Motorcycles", $e = "Vehicles_Trucks", Te = "Vehicles_AgriculturalMachines_Tractors", Ve = "Vehicles_ConstructionMachines", Ee = "Vehicles_Bus", Oe = "Vehicles_Campers", Se = "RealEstates_", i = {
+  Mileage: {
+    icon: "mng-lnc-road",
+    measure: "km"
+  },
+  YearOfProduction: {
+    icon: "mng-lnc-calendar",
+    measure: ""
+  },
+  Fuel: {
+    icon: "mng-lnc-gas-station",
+    measure: ""
+  },
+  EnginePowerKW: {
+    icon: "mng-lnc-engine",
+    measure: "kW"
+  },
+  Transmission: {
+    icon: "mng-lnc-transmission",
+    measure: ""
+  },
+  Model: {
+    icon: "mng-lnc-application",
+    measure: ""
+  },
+  Brand: {
+    icon: "mng-lnc-car--front",
+    measure: ""
+  },
+  SurfaceArea: {
+    icon: "mng-lnc-right-angle",
+    measure: ""
+  },
+  Floor: {
+    icon: "mng-lnc-elevator",
+    measure: ""
+  },
+  FurnishedCondition: {
+    icon: "mng-lnc-sofa-01",
+    measure: ""
+  },
+  AdType: {
+    icon: "mng-lnc-notes",
+    measure: ""
+  },
+  NumberOfRooms: {
+    icon: "mng-lnc-meeting-room",
+    measure: ""
+  },
+  HeatingType: {
+    icon: "mng-lnc-heat",
+    measure: ""
+  },
+  AirConditioning: {
+    icon: "mng-lnc-air-conditioner",
+    measure: ""
+  },
+  Type: {
+    icon: "mng-lnc-house-building",
+    measure: ""
+  },
+  Parking: {
+    icon: "mng-lnc-parking-area-circle",
+    measure: ""
+  },
+  Internet: {
+    icon: "mng-lnc-wifi-02",
+    measure: ""
+  },
+  State: {
+    icon: "mng-lnc-settings-1",
+    measure: ""
+  },
+  NumberOfPremises: {
+    icon: "mng-lnc-meeting-room",
+    measure: ""
+  },
+  Pool: {
+    icon: "mng-lnc-pool",
+    measure: ""
+  },
+  Approach: {
+    icon: "mng-lnc-driveway",
+    measure: ""
+  },
+  NumberOfBeds: {
+    icon: "mng-lnc-bed",
+    measure: ""
+  },
+  Kitchen: {
+    icon: "mng-lnc-fridge",
+    measure: ""
+  },
+  BathroomToilet: {
+    icon: "mng-lnc-bath",
+    measure: ""
+  },
+  default: {
+    icon: " mng-lnc-clock--filled",
+    measure: ""
+  }
+}, Ae = z((d, f) => {
+  const {
+    title: v,
+    price: w = 0,
+    sellingPrice: m,
+    currency: _,
+    isNegotiable: C,
+    isFree: P,
+    imageUrl: H,
+    location: Z,
+    sponsored: M,
+    imageComponent: W,
+    onSelectCard: J = () => {
+    },
+    freeText: Q = "Free",
+    negotiableText: x = "Negotiable",
+    tags: t = [],
+    categoryCode: $,
+    condition: T,
+    quantity: V,
+    trade: E,
+    sponsoredText: ee
+  } = d, O = be(), B = [
+    Ce,
+    Pe,
+    $e,
+    Te,
+    Ve,
+    Ee,
+    Oe,
+    Se
+  ].some(
+    (r) => $ == null ? void 0 : $.includes(r)
+  ), [re, F] = R(!1), oe = () => {
+    F(!0);
+  }, ne = () => {
+    F(!1);
+  }, s = q(null), g = q([]), [D, te] = R(t == null ? void 0 : t.length), ae = () => {
+    var u, c, b;
+    if (!(s != null && s.current) || ((u = g == null ? void 0 : g.current) == null ? void 0 : u.length) === 0) return;
+    const r = (c = s == null ? void 0 : s.current) == null ? void 0 : c.offsetWidth;
+    let o = 0, a = 0;
+    for (let l = 0; l < (t == null ? void 0 : t.length); l++) {
+      const h = ((b = g == null ? void 0 : g.current[l]) == null ? void 0 : b.offsetWidth) || 0, p = o + h + 4;
+      if (p <= r)
+        o += p, a++;
+      else
+        break;
+    }
+    te(a);
+  };
+  de(() => {
+    const r = s == null ? void 0 : s.current;
+    if (!r) return;
+    const o = new ResizeObserver(() => {
+      ae();
+    });
+    return o.observe(r), () => {
+      o.disconnect();
+    };
+  }, [t]);
+  const ie = () => {
+    var r;
+    return /* @__PURE__ */ e("div", { className: "tags-popover__trigger", children: (r = t == null ? void 0 : t.slice(0, D)) == null ? void 0 : r.map((o, a) => {
+      var h, p, j, G, X;
+      const u = ((h = i == null ? void 0 : i[o == null ? void 0 : o.code]) == null ? void 0 : h.icon) ?? ((p = i == null ? void 0 : i.default) == null ? void 0 : p.icon) ?? "", c = ((j = o == null ? void 0 : o.measurementUnit) == null ? void 0 : j.symbol) ?? ((G = i == null ? void 0 : i[o == null ? void 0 : o.code]) == null ? void 0 : G.measure) ?? "", l = [(o == null ? void 0 : o.value) ?? ((X = o == null ? void 0 : o.multiOptions) == null ? void 0 : X[0]) ?? "", c].filter(Boolean).join(" ");
+      return O ? /* @__PURE__ */ n("div", { className: "tag-mobile", children: [
+        l,
+        a < D - 1 ? " · " : ""
+      ] }) : /* @__PURE__ */ n(
+        N,
+        {
+          ref: (le) => g.current[a] = le,
+          className: `tag ${M ? "tag-sponsored" : ""}`,
+          children: [
+            /* @__PURE__ */ e("i", { className: u }),
+            l
+          ]
+        },
+        `detailed-products-section-tag__${a + 1}`
+      );
+    }) });
+  }, se = () => /* @__PURE__ */ e("div", { className: "tags-popover__content", children: t == null ? void 0 : t.map((r, o) => {
+    var l, h, p;
+    const a = ((l = r == null ? void 0 : r.measurementUnit) == null ? void 0 : l.symbol) ?? ((h = i == null ? void 0 : i[r == null ? void 0 : r.code]) == null ? void 0 : h.measure) ?? "", c = [(r == null ? void 0 : r.value) ?? ((p = r == null ? void 0 : r.multiOptions) == null ? void 0 : p[0]) ?? "", a].filter(Boolean).join(" "), b = r == null ? void 0 : r.name;
+    return /* @__PURE__ */ n("div", { children: [
+      /* @__PURE__ */ e("span", { className: "tags-popover__name", children: `${b}: ` }),
+      /* @__PURE__ */ e("span", { className: "tags-popover__value", children: c })
+    ] }, `detailed-products-section-tag-dropdown__${o + 1}`);
+  }) }), ce = () => {
+    var r;
+    if (O) {
+      const o = [T, V, E];
+      return (r = o == null ? void 0 : o.filter((a) => ue(a))) == null ? void 0 : r.map((a, u, c) => /* @__PURE__ */ n("div", { className: "tag-mobile", children: [
+        a,
+        u < (c == null ? void 0 : c.length) - 1 ? " · " : ""
+      ] }));
+    }
+    return /* @__PURE__ */ n(S, { children: [
+      T && /* @__PURE__ */ e(N, { className: "tag", children: T }, "detailed-products-section-tag__condition"),
+      V && /* @__PURE__ */ e(N, { className: "tag", children: V }, "detailed-products-section-tag__quantity"),
+      E && /* @__PURE__ */ e(N, { className: "tag", children: E }, "detailed-products-section-tag__trade")
+    ] });
+  }, I = w > 0 && _ && C !== !0 && P !== !0 && w !== m;
+  return (
+    // <LandingPageProductCardSkeleton />
+    /* @__PURE__ */ n(
+      L,
+      {
+        ref: s,
+        className: "product-card",
+        onClick: J,
+        children: [
+          /* @__PURE__ */ e(ye, { className: "product-image-wrapper", children: ge(W) ? W : /* @__PURE__ */ e(he, { src: H }) }),
+          /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: v }) }),
+          /* @__PURE__ */ n("div", { className: "wrapper-card-3", children: [
+            B && /* @__PURE__ */ e(
+              "div",
+              {
+                ...O ? {} : {
+                  onMouseEnter: oe,
+                  onMouseLeave: ne
+                },
+                children: /* @__PURE__ */ n(fe, { placement: "bottom", open: re, children: [
+                  /* @__PURE__ */ e(ve, { children: ie() }),
+                  /* @__PURE__ */ e(we, { style: { all: "unset" }, children: /* @__PURE__ */ e(_e, { children: se() }) })
+                ] })
+              }
+            ),
+            !B && ce()
+          ] }),
+          /* @__PURE__ */ n("div", { className: "wrapper-card-2", children: [
+            /* @__PURE__ */ n("div", { className: `price-text ${I ? "new-price" : ""}`, children: [
+              m > 0 && _ && C !== !0 && P !== !0 && /* @__PURE__ */ e("div", { children: `${Y(m)} ${A(_)}` }),
+              I && /* @__PURE__ */ e("div", { className: `${m > 0 ? "full-price" : ""}`, children: `${Y(w)} ${A(_)}` }),
+              C && x,
+              P && Q
+            ] }),
+            /* @__PURE__ */ e("div", { className: "location-text", children: Z })
+          ] }),
+          M === !0 && /* @__PURE__ */ e(ke, { sponsoredText: ee })
+        ]
+      }
+    )
+  );
+}), ze = z(({}, d) => /* @__PURE__ */ n(L, { className: "product-card", children: [
+  /* @__PURE__ */ e("img", { className: "skeleton-img" }),
+  /* @__PURE__ */ n("div", { className: "wrapper-card-1", children: [
+    /* @__PURE__ */ e("div", { className: "skeleton-title" }),
+    /* @__PURE__ */ e("div", { className: "skeleton-tags" })
+  ] }),
+  /* @__PURE__ */ n("div", { className: "wrapper-card-1", children: [
+    /* @__PURE__ */ e("div", { className: "skeleton-price" }),
+    /* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
+  ] })
+] })), Me = ({ limit: d = 5, isLoading: f = !1, keyPrefix: v }) => /* @__PURE__ */ e(S, { children: Array.from({ length: d }, (w, m) => /* @__PURE__ */ e(
+  ze,
+  {
+    isLoading: f
+  },
+  `${v}-skeleton-product-card-${m}`
+)) }), Ke = ({
+  children: d,
+  fallbackComponent: f = /* @__PURE__ */ e(S, {}),
+  isLoading: v = !1,
+  limit: w,
+  keyPrefix: m
+}) => /* @__PURE__ */ e(me, { fallbackComponent: f, children: v === !0 ? /* @__PURE__ */ e(
+  Me,
+  {
+    isLoading: v,
+    limit: w,
+    keyPrefix: m
+  }
+) : d });
+export {
+  Ae as D,
+  Ke as S
+};

package/package.json

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

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

@@ -1,131 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),c=require("react"),r=require("./utils-Dl9xPH4c.cjs"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./index-BueKsXT8.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/dist/suspense-product-card-detailed-D6191kXr.js

@@ -1,209 +0,0 @@
-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-BdsZgOUE.js";
-import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as I } from "./index-CF3HhgvN.js";
-import { M as v } from "./consts-BuFChS64.js";
-const k = g.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;
-    ${C(2)}
-  }
-
-  & .price-text {
-    font-size: 1rem;
-    font-weight: 600;
-    ${f()}
-    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);
-    ${f()}
-  }
-
-  & .tags-wrapper {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  & .skeleton-img {
-    background-color: ${s("-90deg")};
-    border-radius: 0.75rem;
-    border: 1px solid white;
-  }
-
-  & .skeleton-title {
-    background-color: ${s("-90deg")};
-    width: 100%;
-    height: 2.5rem;
-  }
-
-  & .skeleton-tags {
-    background-color: ${s("-90deg")};
-    width: 80%;
-    height: 1.5rem;
-  }
-
-  & .skeleton-price {
-    background-color: ${s("-90deg")};
-    width: 50%;
-    height: 2.5rem;
-  }
-
-  & .skeleton-sponsored {
-    background-color: ${s("-90deg")};
-    width: 50%;
-    height: 1rem;
-  }
-
-  @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;
-      object-fit: cover;
-    }
-  }
-`, F = g.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);
-  }
-`, 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 })
-] })), q = p((r, a) => {
-  const {
-    uuid: o,
-    title: l,
-    price: t = 0,
-    sellingPrice: d,
-    currency: n,
-    isNegotiable: c,
-    isFree: m,
-    imageUrl: N,
-    sellerUuid: G,
-    location: b,
-    isSponsored: $,
-    imageComponent: h,
-    onSelectCard: y = () => {
-    },
-    freeText: S = "Free",
-    negotiableText: P = "Negotiable"
-  } = r;
-  return (
-    // <LandingPageProductCardSkeleton />
-    /* @__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: [
-          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: b })
-      ] }),
-      $ === !0 && /* @__PURE__ */ e(T, {})
-    ] })
-  );
-}), 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" }),
-    /* @__PURE__ */ e("div", { className: "skeleton-tags" })
-  ] }),
-  /* @__PURE__ */ i("div", { className: "wrapper-card-1", children: [
-    /* @__PURE__ */ e("div", { className: "skeleton-price" }),
-    /* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
-  ] })
-] })), 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}`
-)) }), L = ({
-  children: r,
-  fallbackComponent: a = /* @__PURE__ */ e(x, {}),
-  isLoading: o = !1,
-  limit: l,
-  keyPrefix: t
-}) => /* @__PURE__ */ e(z, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ e(
-  E,
-  {
-    isLoading: o,
-    limit: l,
-    keyPrefix: t
-  }
-) : r });
-export {
-  q as D,
-  L as S
-};