@lanaco/lnc-react-ui 4.0.130 → 4.0.131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- "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`
1
+ "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`
2
2
  display: grid;
3
3
  grid-template-columns: ${r=>`repeat(${r.limit}, minmax(0, 1fr))`};
4
4
  gap: ${r=>(r==null?void 0:r.gap)||"1.25rem"};
@@ -6,7 +6,7 @@ import E from "./Button.js";
6
6
  import { k as f } from "./utils-BPdU4_1q.js";
7
7
  import { u as I } from "./useDetectMobile-Bkvj0VMa.js";
8
8
  import { T as $ } from "./style-XXDQBreL.js";
9
- import { D as L, S as O } from "./suspense-product-card-detailed-Crkoym56.js";
9
+ import { D as L, S as O } from "./suspense-product-card-detailed-BP1opdKD.js";
10
10
  import { S as R } from "./index-BRciSeV3.js";
11
11
  const W = F.div`
12
12
  display: grid;
@@ -1,4 +1,4 @@
1
- "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`
1
+ "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`
2
2
  padding: 1.75rem 3rem;
3
3
  display: grid;
4
4
  grid-template-columns: ${t=>`repeat(${t.limit||5}, minmax(0, 1fr))`};
@@ -4,7 +4,7 @@ import { s as C } from "./emotion-styled.browser.esm-BNN1dTl3.js";
4
4
  import { M as L, S as F } from "./consts-BuFChS64.js";
5
5
  import { u as I } from "./useDetectMobile-Bkvj0VMa.js";
6
6
  import T from "./Button.js";
7
- import { D as _, S as D } from "./suspense-product-card-detailed-Crkoym56.js";
7
+ import { D as _, S as D } from "./suspense-product-card-detailed-BP1opdKD.js";
8
8
  const E = C.div`
9
9
  padding: 1.75rem 3rem;
10
10
  display: grid;
@@ -1,10 +1,10 @@
1
- import { jsxs as i, jsx as e, Fragment as w } from "react/jsx-runtime";
2
- import { forwardRef as p, Suspense as P } from "react";
3
- import { p as z, t as h, o as s, l as C, q as f, G as u } from "./utils-BPdU4_1q.js";
4
- import { s as x } from "./emotion-styled.browser.esm-BNN1dTl3.js";
5
- import { P as D } from "./index-3TFXgZHA.js";
6
- import { M as j } from "./consts-BuFChS64.js";
7
- const v = x.div`
1
+ import { jsxs as i, jsx as e, Fragment as x } from "react/jsx-runtime";
2
+ import { forwardRef as p, Suspense as z } from "react";
3
+ import { p as C, t as f, o as s, l as D, q as u, G as w } from "./utils-BPdU4_1q.js";
4
+ import { s as g } from "./emotion-styled.browser.esm-BNN1dTl3.js";
5
+ import { P as I } from "./index-3TFXgZHA.js";
6
+ import { M as v } from "./consts-BuFChS64.js";
7
+ const k = g.div`
8
8
  display: flex;
9
9
  flex-direction: column;
10
10
  gap: 0.5rem;
@@ -22,23 +22,16 @@ const v = x.div`
22
22
  gap: 0;
23
23
  }
24
24
 
25
- & img {
26
- width: 100%;
27
- aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
28
- object-fit: cover; /* making sure the image isn't distorted */
29
- border-radius: 0.75rem;
30
- }
31
-
32
25
  & .card-title {
33
26
  font-size: 0.875rem;
34
27
  font-weight: 600;
35
- ${z(2)}
28
+ ${C(2)}
36
29
  }
37
30
 
38
31
  & .price-text {
39
32
  font-size: 1rem;
40
33
  font-weight: 600;
41
- ${h()}
34
+ ${f()}
42
35
  display: flex;
43
36
  align-items: end;
44
37
  gap: 0.5rem;
@@ -55,7 +48,7 @@ const v = x.div`
55
48
  font-size: 0.75rem;
56
49
  font-weight: 400;
57
50
  color: var(--gray-600, #676e79);
58
- ${h()}
51
+ ${f()}
59
52
  }
60
53
 
61
54
  & .tags-wrapper {
@@ -93,23 +86,43 @@ const v = x.div`
93
86
  height: 1rem;
94
87
  }
95
88
 
96
- @media (max-width: ${j + "px"}) {
89
+ @media (max-width: ${v + "px"}) {
90
+ & .price-text {
91
+ font-size: 0.875rem;
92
+ font-weight: 600;
93
+ }
94
+ }
95
+
96
+ &:hover .product-image-wrapper img {
97
+ transform: scale(1.1);
98
+ }
99
+ `, j = g.div`
100
+ position: relative;
101
+ overflow: hidden;
102
+ border-radius: 0.75rem;
103
+ width: 100%;
104
+ aspect-ratio: 1 / 1;
105
+ border: 1px solid #0c15201f;
106
+
107
+ & img {
108
+ display: block;
109
+ width: 100%;
110
+ height: 100%;
111
+ object-fit: cover;
112
+ border-radius: 0.75rem;
113
+ transition: var(--transition, all 0.3s ease);
114
+ }
115
+
116
+ @media (max-width: ${v + "px"}) {
97
117
  & img {
98
118
  width: 8.875rem;
99
119
  height: 8.875rem;
100
120
  min-width: 8.875rem;
101
121
  min-height: 8.875rem;
102
- min-width: 8.875rem;
103
- min-height: 8.875rem;
104
122
  object-fit: cover;
105
123
  }
106
-
107
- & .price-text {
108
- font-size: 0.875rem;
109
- font-weight: 600;
110
- }
111
124
  }
112
- `, F = x.div`
125
+ `, F = g.div`
113
126
  display: flex;
114
127
  align-items: center;
115
128
  gap: 0.25rem;
@@ -121,46 +134,46 @@ const v = x.div`
121
134
  font-size: 1rem;
122
135
  color: var(--warning-500, #F59E0B);
123
136
  }
124
- `, I = p(({ sponsoredText: r = "Sponsored" }, a) => /* @__PURE__ */ i(F, { ref: a, className: "sponsored-line", children: [
137
+ `, T = p(({ sponsoredText: r = "Sponsored" }, a) => /* @__PURE__ */ i(F, { ref: a, className: "sponsored-line", children: [
125
138
  /* @__PURE__ */ e("i", { className: "mng-lnc-paw2" }),
126
139
  /* @__PURE__ */ e("span", { children: r })
127
- ] })), U = p((r, a) => {
140
+ ] })), q = p((r, a) => {
128
141
  const {
129
142
  uuid: o,
130
- title: n,
143
+ title: l,
131
144
  price: t = 0,
132
- sellingPrice: c,
133
- currency: l,
134
- isNegotiable: d,
145
+ sellingPrice: d,
146
+ currency: n,
147
+ isNegotiable: c,
135
148
  isFree: m,
136
- imageUrl: k,
149
+ imageUrl: N,
137
150
  sellerUuid: G,
138
- location: N,
151
+ location: b,
139
152
  isSponsored: $,
140
- imageComponent: g,
141
- onSelectCard: b = () => {
153
+ imageComponent: h,
154
+ onSelectCard: y = () => {
142
155
  },
143
- freeText: y = "Free",
144
- negotiableText: S = "Negotiable"
156
+ freeText: S = "Free",
157
+ negotiableText: P = "Negotiable"
145
158
  } = r;
146
159
  return (
147
160
  // <LandingPageProductCardSkeleton />
148
- /* @__PURE__ */ i(v, { className: "product-card", onClick: b, children: [
149
- C(g) ? g : /* @__PURE__ */ e(D, { src: k }),
150
- /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: n }) }),
161
+ /* @__PURE__ */ i(k, { className: "product-card", onClick: y, children: [
162
+ /* @__PURE__ */ e(j, { className: "product-image-wrapper", children: D(h) ? h : /* @__PURE__ */ e(I, { src: N }) }),
163
+ /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: l }) }),
151
164
  /* @__PURE__ */ i("div", { className: "wrapper-card-2", children: [
152
165
  /* @__PURE__ */ i("div", { className: "price-text", children: [
153
- c > 0 && l && d !== !0 && m !== !0 && /* @__PURE__ */ e("div", { children: `${f(c)} ${u(l)}` }),
154
- t > 0 && l && d !== !0 && m !== !0 && t !== c && /* @__PURE__ */ e("div", { className: `${c > 0 ? "full-price" : ""}`, children: `${f(t)} ${u(l)}` }),
155
- d && S,
156
- m && y
166
+ d > 0 && n && c !== !0 && m !== !0 && /* @__PURE__ */ e("div", { children: `${u(d)} ${w(n)}` }),
167
+ t > 0 && n && c !== !0 && m !== !0 && t !== d && /* @__PURE__ */ e("div", { className: `${d > 0 ? "full-price" : ""}`, children: `${u(t)} ${w(n)}` }),
168
+ c && P,
169
+ m && S
157
170
  ] }),
158
- /* @__PURE__ */ e("div", { className: "location-text", children: N })
171
+ /* @__PURE__ */ e("div", { className: "location-text", children: b })
159
172
  ] }),
160
- $ === !0 && /* @__PURE__ */ e(I, {})
173
+ $ === !0 && /* @__PURE__ */ e(T, {})
161
174
  ] })
162
175
  );
163
- }), T = p(({}, r) => /* @__PURE__ */ i(v, { className: "product-card", children: [
176
+ }), W = p(({}, r) => /* @__PURE__ */ i(k, { className: "product-card", children: [
164
177
  /* @__PURE__ */ e("img", { className: "skeleton-img" }),
165
178
  /* @__PURE__ */ i("div", { className: "wrapper-card-1", children: [
166
179
  /* @__PURE__ */ e("div", { className: "skeleton-title" }),
@@ -170,27 +183,27 @@ const v = x.div`
170
183
  /* @__PURE__ */ e("div", { className: "skeleton-price" }),
171
184
  /* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
172
185
  ] })
173
- ] })), E = ({ limit: r = 5, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ e(w, { children: Array.from({ length: r }, (n, t) => /* @__PURE__ */ e(
174
- T,
186
+ ] })), E = ({ limit: r = 5, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ e(x, { children: Array.from({ length: r }, (l, t) => /* @__PURE__ */ e(
187
+ W,
175
188
  {
176
189
  isLoading: a
177
190
  },
178
191
  `${o}-skeleton-product-card-${t}`
179
- )) }), q = ({
192
+ )) }), L = ({
180
193
  children: r,
181
- fallbackComponent: a = /* @__PURE__ */ e(w, {}),
194
+ fallbackComponent: a = /* @__PURE__ */ e(x, {}),
182
195
  isLoading: o = !1,
183
- limit: n,
196
+ limit: l,
184
197
  keyPrefix: t
185
- }) => /* @__PURE__ */ e(P, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ e(
198
+ }) => /* @__PURE__ */ e(z, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ e(
186
199
  E,
187
200
  {
188
201
  isLoading: o,
189
- limit: n,
202
+ limit: l,
190
203
  keyPrefix: t
191
204
  }
192
205
  ) : r });
193
206
  export {
194
- U as D,
195
- q as S
207
+ q as D,
208
+ L as S
196
209
  };
@@ -0,0 +1,131 @@
1
+ "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`
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 0.5rem;
5
+ cursor: pointer;
6
+
7
+ & .wrapper-card-1 {
8
+ display: flex;
9
+ flex-direction: column;
10
+ gap: 0.38rem;
11
+ }
12
+
13
+ & .wrapper-card-2 {
14
+ display: flex;
15
+ flex-direction: column;
16
+ gap: 0;
17
+ }
18
+
19
+ & .card-title {
20
+ font-size: 0.875rem;
21
+ font-weight: 600;
22
+ ${r.truncateTextInRows(2)}
23
+ }
24
+
25
+ & .price-text {
26
+ font-size: 1rem;
27
+ font-weight: 600;
28
+ ${r.truncateText()}
29
+ display: flex;
30
+ align-items: end;
31
+ gap: 0.5rem;
32
+ & .full-price {
33
+ text-decoration: line-through;
34
+ font-size: 0.75rem;
35
+ font-weight: 400;
36
+ padding-bottom: 0.125rem;
37
+ color: var(--gray-600, #676e79);
38
+ }
39
+ }
40
+
41
+ & .location-text {
42
+ font-size: 0.75rem;
43
+ font-weight: 400;
44
+ color: var(--gray-600, #676e79);
45
+ ${r.truncateText()}
46
+ }
47
+
48
+ & .tags-wrapper {
49
+ display: flex;
50
+ gap: 0.5rem;
51
+ }
52
+
53
+ & .skeleton-img {
54
+ background-color: ${r.linearGradientAnimation("-90deg")};
55
+ border-radius: 0.75rem;
56
+ border: 1px solid white;
57
+ }
58
+
59
+ & .skeleton-title {
60
+ background-color: ${r.linearGradientAnimation("-90deg")};
61
+ width: 100%;
62
+ height: 2.5rem;
63
+ }
64
+
65
+ & .skeleton-tags {
66
+ background-color: ${r.linearGradientAnimation("-90deg")};
67
+ width: 80%;
68
+ height: 1.5rem;
69
+ }
70
+
71
+ & .skeleton-price {
72
+ background-color: ${r.linearGradientAnimation("-90deg")};
73
+ width: 50%;
74
+ height: 2.5rem;
75
+ }
76
+
77
+ & .skeleton-sponsored {
78
+ background-color: ${r.linearGradientAnimation("-90deg")};
79
+ width: 50%;
80
+ height: 1rem;
81
+ }
82
+
83
+ @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
84
+ & .price-text {
85
+ font-size: 0.875rem;
86
+ font-weight: 600;
87
+ }
88
+ }
89
+
90
+ &:hover .product-image-wrapper img {
91
+ transform: scale(1.1);
92
+ }
93
+ `,y=p.styled.div`
94
+ position: relative;
95
+ overflow: hidden;
96
+ border-radius: 0.75rem;
97
+ width: 100%;
98
+ aspect-ratio: 1 / 1;
99
+ border: 1px solid #0c15201f;
100
+
101
+ & img {
102
+ display: block;
103
+ width: 100%;
104
+ height: 100%;
105
+ object-fit: cover;
106
+ border-radius: 0.75rem;
107
+ transition: var(--transition, all 0.3s ease);
108
+ }
109
+
110
+ @media (max-width: ${u.MOBILE_SIZE_PX+"px"}) {
111
+ & img {
112
+ width: 8.875rem;
113
+ height: 8.875rem;
114
+ min-width: 8.875rem;
115
+ min-height: 8.875rem;
116
+ object-fit: cover;
117
+ }
118
+ }
119
+ `,N=p.styled.div`
120
+ display: flex;
121
+ align-items: center;
122
+ gap: 0.25rem;
123
+ color: var(--gray-500);
124
+ font-size: 0.75rem;
125
+ font-weight: 500;
126
+
127
+ & i {
128
+ font-size: 1rem;
129
+ color: var(--warning-500, #F59E0B);
130
+ }
131
+ `,$=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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lanaco/lnc-react-ui",
3
- "version": "4.0.130",
3
+ "version": "4.0.131",
4
4
  "description": "React component library",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -1,118 +0,0 @@
1
- "use strict";const e=require("react/jsx-runtime"),d=require("react"),r=require("./utils-DmMdPm9O.cjs"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./index-DiIeF_76.cjs"),N=require("./consts-goSZX3xP.cjs"),u=g.styled.div`
2
- display: flex;
3
- flex-direction: column;
4
- gap: 0.5rem;
5
- cursor: pointer;
6
-
7
- & .wrapper-card-1 {
8
- display: flex;
9
- flex-direction: column;
10
- gap: 0.38rem;
11
- }
12
-
13
- & .wrapper-card-2 {
14
- display: flex;
15
- flex-direction: column;
16
- gap: 0;
17
- }
18
-
19
- & img {
20
- width: 100%;
21
- aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
22
- object-fit: cover; /* making sure the image isn't distorted */
23
- border-radius: 0.75rem;
24
- }
25
-
26
- & .card-title {
27
- font-size: 0.875rem;
28
- font-weight: 600;
29
- ${r.truncateTextInRows(2)}
30
- }
31
-
32
- & .price-text {
33
- font-size: 1rem;
34
- font-weight: 600;
35
- ${r.truncateText()}
36
- display: flex;
37
- align-items: end;
38
- gap: 0.5rem;
39
- & .full-price {
40
- text-decoration: line-through;
41
- font-size: 0.75rem;
42
- font-weight: 400;
43
- padding-bottom: 0.125rem;
44
- color: var(--gray-600, #676e79);
45
- }
46
- }
47
-
48
- & .location-text {
49
- font-size: 0.75rem;
50
- font-weight: 400;
51
- color: var(--gray-600, #676e79);
52
- ${r.truncateText()}
53
- }
54
-
55
- & .tags-wrapper {
56
- display: flex;
57
- gap: 0.5rem;
58
- }
59
-
60
- & .skeleton-img {
61
- background-color: ${r.linearGradientAnimation("-90deg")};
62
- border-radius: 0.75rem;
63
- border: 1px solid white;
64
- }
65
-
66
- & .skeleton-title {
67
- background-color: ${r.linearGradientAnimation("-90deg")};
68
- width: 100%;
69
- height: 2.5rem;
70
- }
71
-
72
- & .skeleton-tags {
73
- background-color: ${r.linearGradientAnimation("-90deg")};
74
- width: 80%;
75
- height: 1.5rem;
76
- }
77
-
78
- & .skeleton-price {
79
- background-color: ${r.linearGradientAnimation("-90deg")};
80
- width: 50%;
81
- height: 2.5rem;
82
- }
83
-
84
- & .skeleton-sponsored {
85
- background-color: ${r.linearGradientAnimation("-90deg")};
86
- width: 50%;
87
- height: 1rem;
88
- }
89
-
90
- @media (max-width: ${N.MOBILE_SIZE_PX+"px"}) {
91
- & img {
92
- width: 8.875rem;
93
- height: 8.875rem;
94
- min-width: 8.875rem;
95
- min-height: 8.875rem;
96
- min-width: 8.875rem;
97
- min-height: 8.875rem;
98
- object-fit: cover;
99
- }
100
-
101
- & .price-text {
102
- font-size: 0.875rem;
103
- font-weight: 600;
104
- }
105
- }
106
- `,y=g.styled.div`
107
- display: flex;
108
- align-items: center;
109
- gap: 0.25rem;
110
- color: var(--gray-500);
111
- font-size: 0.75rem;
112
- font-weight: 500;
113
-
114
- & i {
115
- font-size: 1rem;
116
- color: var(--warning-500, #F59E0B);
117
- }
118
- `,b=d.forwardRef(({sponsoredText:t="Sponsored"},s)=>e.jsxs(y,{ref:s,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:t})]})),$=d.forwardRef((t,s)=>{const{uuid:a,title:n,price:i=0,sellingPrice:o,currency:c,isNegotiable:l,isFree:m,imageUrl:h,sellerUuid:z,location:x,isSponsored:f,imageComponent:p,onSelectCard:w=()=>{},freeText:j="Free",negotiableText:v="Negotiable"}=t;return e.jsxs(u,{className:"product-card",onClick:w,children:[r.isDefined(p)?p:e.jsx(k.ProductImageWrapper,{src:h}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:n})}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:"price-text",children:[o>0&&c&&l!==!0&&m!==!0&&e.jsx("div",{children:`${r.formatPrice(o)} ${r.GetCurrencySymbol(c)}`}),i>0&&c&&l!==!0&&m!==!0&&i!==o&&e.jsx("div",{className:`${o>0?"full-price":""}`,children:`${r.formatPrice(i)} ${r.GetCurrencySymbol(c)}`}),l&&v,m&&j]}),e.jsx("div",{className:"location-text",children:x})]}),f===!0&&e.jsx(b,{})]})}),S=d.forwardRef(({},t)=>e.jsxs(u,{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"})]})]})),P=({limit:t=5,isLoading:s=!1,keyPrefix:a})=>e.jsx(e.Fragment,{children:Array.from({length:t},(n,i)=>e.jsx(S,{isLoading:s},`${a}-skeleton-product-card-${i}`))}),C=({children:t,fallbackComponent:s=e.jsx(e.Fragment,{}),isLoading:a=!1,limit:n,keyPrefix:i})=>e.jsx(d.Suspense,{fallbackComponent:s,children:a===!0?e.jsx(P,{isLoading:a,limit:n,keyPrefix:i}):t});exports.DetailedProductCard=$;exports.SuspenseDetailedProductCard=C;