@lanaco/lnc-react-ui 4.0.26 → 4.0.28

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.
package/dist/index12.cjs DELETED
@@ -1,194 +0,0 @@
1
- "use strict";const r=require("react/jsx-runtime"),l=require("react"),p=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),x=require("./consts-dNz9tpt4.cjs"),o=require("./utils-CE6bljYe.cjs"),$=require("./Icon.cjs"),N=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),k=require("./useEffectOnce-DFrzfNzT.cjs"),I=p.newStyled.div`
2
- display: flex;
3
- width: 100%;
4
- height: fit-content;
5
- flex-direction: column;
6
- align-items: flex-start;
7
- flex-shrink: 0;
8
- align-self: stretch;
9
- border-radius: 0.75rem;
10
- border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
11
- background: var(--Lanaco-Gray-white, #fff);
12
-
13
- /* drop-shadow-sm */
14
- box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
15
-
16
- & .wrapper__image {
17
- width: 100%;
18
- height: auto;
19
- border-radius: 0.75rem 0.75rem 0 0;
20
- }
21
-
22
- & .wrapper__content {
23
- display: flex;
24
- padding: 0.75rem;
25
- flex-direction: column;
26
- align-items: flex-start;
27
- gap: 0.25rem;
28
- align-self: stretch;
29
-
30
- & .wrapper__title {
31
- color: var(--gray-950);
32
- font-size: 1rem;
33
- font-style: normal;
34
- font-weight: 500;
35
- line-height: 1.5rem;
36
- ${o.truncateTextInRows(2)}
37
- }
38
-
39
- & .wrapper__description {
40
- color: var(--gray-600);
41
- font-size: 0.75rem;
42
- font-style: normal;
43
- font-weight: 400;
44
- line-height: 1rem;
45
- letter-spacing: 0.025rem;
46
- ${o.truncateTextInRows(2)}
47
- }
48
- }
49
- `,E=p.newStyled.div`
50
- width: 100%;
51
- height: 11.625rem;
52
- border-radius: 0.75rem;
53
- background: ${o.linearGradientAnimation("-90deg")};
54
- `,R=p.newStyled.div`
55
- display: flex;
56
- flex-direction: column;
57
- align-items: center;
58
- gap: 0.75rem;
59
-
60
- & .wrapper__icon {
61
- display: flex;
62
- width: 2.75rem;
63
- height: 2.75rem;
64
- padding: 0.5rem;
65
- align-items: center;
66
- font-size: 1.75rem;
67
- color: var(--gray-950, #14161a);
68
- background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
69
- border-radius: 999px;
70
-
71
- & i {
72
- width: auto;
73
- }
74
- }
75
-
76
- & .wrapper__text {
77
- color: var(--gray-950, #14161a);
78
- text-align: center;
79
- font-size: 1rem;
80
- font-style: normal;
81
- font-weight: 400;
82
- line-height: 1.5rem;
83
- }
84
-
85
- &.active {
86
- background: var(--gray-950, #14161a);
87
-
88
- & .wrapper__icon {
89
- color: var(--white, #fff);
90
- }
91
- }
92
-
93
- @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
94
- flex-direction: row;
95
- align-items: center;
96
- gap: 0.25rem;
97
- border-radius: 999px;
98
- width: 100%;
99
- background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
100
- padding: 0 0.75rem;
101
-
102
- & .wrapper__icon {
103
- display: flex;
104
- width: 1.25rem;
105
- width: 1.25rem;
106
- padding: 0;
107
- align-items: center;
108
- font-size: 1.25rem;
109
- color: var(--gray-950, #14161a);
110
- background: transparent;
111
- border-radius: 0;
112
- }
113
-
114
- & .wrapper__text {
115
- font-size: 0.875rem;
116
- line-height: 1.25rem;
117
- white-space: nowrap;
118
- }
119
- }
120
- `,q=p.newStyled.div`
121
- width: 7.5rem;
122
- width: 7.5rem;
123
- border-radius: 999px;
124
- background: ${o.linearGradientAnimation("-90deg")};
125
-
126
- @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
127
- width: 7.5rem;
128
- height: 2.5rem;
129
- }
130
- `,z=l.forwardRef(({},i)=>r.jsx(q,{})),M=l.forwardRef(({text:i,isActive:a,icon:t,onSelectCard:n=()=>{}},m)=>r.jsxs(R,{className:a?"active":"",onClick:n,children:[r.jsx($,{icon:t,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),O=l.forwardRef(({image:i,imageComponent:a,title:t,description:n,className:m,onSelectCard:d=()=>{}},g)=>{const{theme:c}=N.useTheme();return r.jsxs(I,{theme:c,className:m,onClick:d,children:[o.isDefined(a)?a:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__description",children:n})]})]})}),S=l.forwardRef(({},i)=>r.jsxs(E,{children:[r.jsx("div",{className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsx("div",{className:"wrapper__title"}),r.jsx("div",{className:"wrapper__description"})]})]})),C=p.newStyled.div`
131
- display: flex;
132
- flex-direction: column;
133
- align-items: center;
134
- gap: 1.5rem;
135
-
136
- & .wrapper__heading {
137
- display: flex;
138
- flex-direction: column;
139
- gap: 1rem;
140
- text-align: center;
141
-
142
- & .wrapper__title {
143
- color: var(--gray-950, #14161a);
144
- text-align: center;
145
- font-size: 1.5rem;
146
- font-style: normal;
147
- font-weight: 600;
148
- line-height: 2rem;
149
- letter-spacing: -0.47px;
150
- }
151
-
152
- & .wrapper__subtitle {
153
- color: var(---gray-600, #676e79);
154
- font-size: 0.875rem;
155
- font-style: normal;
156
- font-weight: 400;
157
- line-height: 1.25rem;
158
- letter-spacing: 0.25px;
159
- }
160
- }
161
-
162
- & .wrapper__tags {
163
- display: grid;
164
- grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitTags}, minmax(0, 1fr))`};
165
- justify-content: center;
166
- align-items: center;
167
- gap: 0.75rem;
168
- }
169
-
170
- & .wrapper__cards {
171
- display: grid;
172
- grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
173
- grid-auto-rows: 0.625rem;
174
- gap: 0.625rem;
175
- width: 100%;
176
-
177
- & .wrapper__card {
178
- overflow: hidden;
179
- }
180
- }
181
-
182
- @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
183
- & .wrapper__tags {
184
- display: flex;
185
- overflow-x: scroll;
186
- justify-content: flex-start;
187
- width: 100%;
188
- }
189
-
190
- & .wrapper__cards {
191
- grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
192
- }
193
- }
194
- `,F=l.forwardRef(({title:i,subtitle:a,tags:t=[],cards:n=[],limitTags:m=5,limitTagsForMobile:d=5,limitCards:g=3,limitCardsForMobile:c=2,onSelectTag:_=()=>{},onSelectCard:f=()=>{}},L)=>{var u,y;const w=e=>{_==null||_(e==null?void 0:e.uuid)},h=e=>{f==null||f(e==null?void 0:e.uuid)};return k.useEffectOnce(()=>{const e=()=>{document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach(v=>{const j=v.getBoundingClientRect().height,b=Math.ceil((j+10)/20);v.style.gridRowEnd=`span ${b}`})};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),r.jsxs(C,{limitTags:m,limitTagsForMobile:d,limitCards:g,limitCardsForMobile:c,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),a&&r.jsx("div",{className:"wrapper__subtitle",children:a})]}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,s)=>r.jsx(M,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.text,onSelectCard:()=>w==null?void 0:w(e)},`field-of-interests-masonry-tag__${s+1}`)):(u=Array.from("12345"))==null?void 0:u.map((e,s)=>r.jsx(z,{},`field-of-interests-masonry-tag-skeleton__${s+1}`))}),r.jsx("div",{className:"wrapper__cards",children:n&&(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,s)=>r.jsx(O,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,title:e==null?void 0:e.title,description:e==null?void 0:e.description,onSelectCard:()=>h==null?void 0:h(e==null?void 0:e.uuid),className:"wrapper__card"},`field-of-interests-with-tags-card__${s+1}`)):(y=Array.from("12345"))==null?void 0:y.map((e,s)=>r.jsx(S,{},`field-of-interests-with-tags-card-skeleton__${s+1}`))})]})});module.exports=F;
package/dist/index12.js DELETED
@@ -1,312 +0,0 @@
1
- import { jsx as i, jsxs as s } from "react/jsx-runtime";
2
- import { forwardRef as l } from "react";
3
- import { n as p } from "./emotion-styled.browser.esm-BiK8DcgW.js";
4
- import { M as g } from "./consts-DNVz1x1I.js";
5
- import { t as b, m as $, l as z } from "./utils-DtEdJZWa.js";
6
- import I from "./Icon.js";
7
- import { u as M } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
8
- import { u as E } from "./useEffectOnce-guOKBPuL.js";
9
- const O = p.div`
10
- display: flex;
11
- width: 100%;
12
- height: fit-content;
13
- flex-direction: column;
14
- align-items: flex-start;
15
- flex-shrink: 0;
16
- align-self: stretch;
17
- border-radius: 0.75rem;
18
- border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
19
- background: var(--Lanaco-Gray-white, #fff);
20
-
21
- /* drop-shadow-sm */
22
- box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
23
-
24
- & .wrapper__image {
25
- width: 100%;
26
- height: auto;
27
- border-radius: 0.75rem 0.75rem 0 0;
28
- }
29
-
30
- & .wrapper__content {
31
- display: flex;
32
- padding: 0.75rem;
33
- flex-direction: column;
34
- align-items: flex-start;
35
- gap: 0.25rem;
36
- align-self: stretch;
37
-
38
- & .wrapper__title {
39
- color: var(--gray-950);
40
- font-size: 1rem;
41
- font-style: normal;
42
- font-weight: 500;
43
- line-height: 1.5rem;
44
- ${b(2)}
45
- }
46
-
47
- & .wrapper__description {
48
- color: var(--gray-600);
49
- font-size: 0.75rem;
50
- font-style: normal;
51
- font-weight: 400;
52
- line-height: 1rem;
53
- letter-spacing: 0.025rem;
54
- ${b(2)}
55
- }
56
- }
57
- `, C = p.div`
58
- width: 100%;
59
- height: 11.625rem;
60
- border-radius: 0.75rem;
61
- background: ${$("-90deg")};
62
- `, F = p.div`
63
- display: flex;
64
- flex-direction: column;
65
- align-items: center;
66
- gap: 0.75rem;
67
-
68
- & .wrapper__icon {
69
- display: flex;
70
- width: 2.75rem;
71
- height: 2.75rem;
72
- padding: 0.5rem;
73
- align-items: center;
74
- font-size: 1.75rem;
75
- color: var(--gray-950, #14161a);
76
- background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
77
- border-radius: 999px;
78
-
79
- & i {
80
- width: auto;
81
- }
82
- }
83
-
84
- & .wrapper__text {
85
- color: var(--gray-950, #14161a);
86
- text-align: center;
87
- font-size: 1rem;
88
- font-style: normal;
89
- font-weight: 400;
90
- line-height: 1.5rem;
91
- }
92
-
93
- &.active {
94
- background: var(--gray-950, #14161a);
95
-
96
- & .wrapper__icon {
97
- color: var(--white, #fff);
98
- }
99
- }
100
-
101
- @media (max-width: ${g + "px"}) {
102
- flex-direction: row;
103
- align-items: center;
104
- gap: 0.25rem;
105
- border-radius: 999px;
106
- width: 100%;
107
- background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
108
- padding: 0 0.75rem;
109
-
110
- & .wrapper__icon {
111
- display: flex;
112
- width: 1.25rem;
113
- width: 1.25rem;
114
- padding: 0;
115
- align-items: center;
116
- font-size: 1.25rem;
117
- color: var(--gray-950, #14161a);
118
- background: transparent;
119
- border-radius: 0;
120
- }
121
-
122
- & .wrapper__text {
123
- font-size: 0.875rem;
124
- line-height: 1.25rem;
125
- white-space: nowrap;
126
- }
127
- }
128
- `, W = p.div`
129
- width: 7.5rem;
130
- width: 7.5rem;
131
- border-radius: 999px;
132
- background: ${$("-90deg")};
133
-
134
- @media (max-width: ${g + "px"}) {
135
- width: 7.5rem;
136
- height: 2.5rem;
137
- }
138
- `, j = l(({}, r) => /* @__PURE__ */ i(W, {})), A = l(
139
- ({ text: r, isActive: o, icon: t, onSelectCard: n = () => {
140
- } }, m) => /* @__PURE__ */ s(F, { className: o ? "active" : "", onClick: n, children: [
141
- /* @__PURE__ */ i(I, { icon: t, className: "wrapper__icon" }),
142
- /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
143
- ] })
144
- ), L = l(
145
- ({
146
- image: r,
147
- imageComponent: o,
148
- title: t,
149
- description: n,
150
- className: m,
151
- onSelectCard: d = () => {
152
- }
153
- }, u) => {
154
- const { theme: c } = M();
155
- return /* @__PURE__ */ s(O, { theme: c, className: m, onClick: d, children: [
156
- z(o) ? o : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
157
- /* @__PURE__ */ s("div", { className: "wrapper__content", children: [
158
- t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
159
- n && /* @__PURE__ */ i("div", { className: "wrapper__description", children: n })
160
- ] })
161
- ] });
162
- }
163
- ), R = l(({}, r) => /* @__PURE__ */ s(C, { children: [
164
- /* @__PURE__ */ i("div", { className: "wrapper__image" }),
165
- /* @__PURE__ */ s("div", { className: "wrapper__content", children: [
166
- /* @__PURE__ */ i("div", { className: "wrapper__title" }),
167
- /* @__PURE__ */ i("div", { className: "wrapper__description" })
168
- ] })
169
- ] })), T = p.div`
170
- display: flex;
171
- flex-direction: column;
172
- align-items: center;
173
- gap: 1.5rem;
174
-
175
- & .wrapper__heading {
176
- display: flex;
177
- flex-direction: column;
178
- gap: 1rem;
179
- text-align: center;
180
-
181
- & .wrapper__title {
182
- color: var(--gray-950, #14161a);
183
- text-align: center;
184
- font-size: 1.5rem;
185
- font-style: normal;
186
- font-weight: 600;
187
- line-height: 2rem;
188
- letter-spacing: -0.47px;
189
- }
190
-
191
- & .wrapper__subtitle {
192
- color: var(---gray-600, #676e79);
193
- font-size: 0.875rem;
194
- font-style: normal;
195
- font-weight: 400;
196
- line-height: 1.25rem;
197
- letter-spacing: 0.25px;
198
- }
199
- }
200
-
201
- & .wrapper__tags {
202
- display: grid;
203
- grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitTags}, minmax(0, 1fr))`};
204
- justify-content: center;
205
- align-items: center;
206
- gap: 0.75rem;
207
- }
208
-
209
- & .wrapper__cards {
210
- display: grid;
211
- grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCards}, minmax(0, 1fr))`};
212
- grid-auto-rows: 0.625rem;
213
- gap: 0.625rem;
214
- width: 100%;
215
-
216
- & .wrapper__card {
217
- overflow: hidden;
218
- }
219
- }
220
-
221
- @media (max-width: ${g + "px"}) {
222
- & .wrapper__tags {
223
- display: flex;
224
- overflow-x: scroll;
225
- justify-content: flex-start;
226
- width: 100%;
227
- }
228
-
229
- & .wrapper__cards {
230
- grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCardsForMobile}, minmax(0, 1fr))`};
231
- }
232
- }
233
- `, K = l(
234
- ({
235
- title: r,
236
- subtitle: o,
237
- tags: t = [],
238
- cards: n = [],
239
- limitTags: m = 5,
240
- limitTagsForMobile: d = 5,
241
- limitCards: u = 3,
242
- limitCardsForMobile: c = 2,
243
- onSelectTag: f = () => {
244
- },
245
- onSelectCard: _ = () => {
246
- }
247
- }, q) => {
248
- var x, y;
249
- const h = (e) => {
250
- f == null || f(e == null ? void 0 : e.uuid);
251
- }, w = (e) => {
252
- _ == null || _(e == null ? void 0 : e.uuid);
253
- };
254
- return E(() => {
255
- const e = () => {
256
- document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach((v) => {
257
- const N = v.getBoundingClientRect().height, k = Math.ceil((N + 10) / 20);
258
- v.style.gridRowEnd = `span ${k}`;
259
- });
260
- };
261
- return e(), window.addEventListener("resize", e), () => {
262
- window.removeEventListener("resize", e);
263
- };
264
- }), /* @__PURE__ */ s(
265
- T,
266
- {
267
- limitTags: m,
268
- limitTagsForMobile: d,
269
- limitCards: u,
270
- limitCardsForMobile: c,
271
- children: [
272
- /* @__PURE__ */ s("div", { className: "wrapper__heading", children: [
273
- r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
274
- o && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: o })
275
- ] }),
276
- /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, a) => /* @__PURE__ */ i(
277
- A,
278
- {
279
- icon: e == null ? void 0 : e.icon,
280
- text: e == null ? void 0 : e.text,
281
- onSelectCard: () => h == null ? void 0 : h(e)
282
- },
283
- `field-of-interests-masonry-tag__${a + 1}`
284
- )) : (x = Array.from("12345")) == null ? void 0 : x.map((e, a) => /* @__PURE__ */ i(
285
- j,
286
- {},
287
- `field-of-interests-masonry-tag-skeleton__${a + 1}`
288
- )) }),
289
- /* @__PURE__ */ i("div", { className: "wrapper__cards", children: n && (n == null ? void 0 : n.length) > 0 ? n == null ? void 0 : n.map((e, a) => /* @__PURE__ */ i(
290
- L,
291
- {
292
- image: e == null ? void 0 : e.image,
293
- imageComponent: e == null ? void 0 : e.imageComponent,
294
- title: e == null ? void 0 : e.title,
295
- description: e == null ? void 0 : e.description,
296
- onSelectCard: () => w == null ? void 0 : w(e == null ? void 0 : e.uuid),
297
- className: "wrapper__card"
298
- },
299
- `field-of-interests-with-tags-card__${a + 1}`
300
- )) : (y = Array.from("12345")) == null ? void 0 : y.map((e, a) => /* @__PURE__ */ i(
301
- R,
302
- {},
303
- `field-of-interests-with-tags-card-skeleton__${a + 1}`
304
- )) })
305
- ]
306
- }
307
- );
308
- }
309
- );
310
- export {
311
- K as default
312
- };
package/dist/index13.cjs DELETED
@@ -1,98 +0,0 @@
1
- "use strict";const t=require("react/jsx-runtime"),f=require("react"),u=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),a=require("./consts-dNz9tpt4.cjs"),d=require("./utils-CE6bljYe.cjs"),$=require("./index-BlV3tdJ8.cjs"),I=u.newStyled.div`
2
- width: 100%;
3
- height: 11.625rem;
4
- border-radius: 0.75rem;
5
- background: ${d.linearGradientAnimation("-90deg")};
6
- `,A=u.newStyled.div`
7
- width: 100%;
8
- height: auto;
9
- border-radius: 999px;
10
-
11
- & .wrapper__image {
12
- width: 100%;
13
- aspect-ratio: 1 / 1;
14
- object-fit: cover;
15
- border-radius: 999px;
16
- max-height: 9.875rem;
17
- }
18
-
19
- &.active {
20
- border: var(--yellow-600, #d97706);
21
- }
22
-
23
- @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
24
- & .wrapper__image {
25
- height: auto;
26
- }
27
- }
28
- `,F=u.newStyled.div`
29
- width: 9.875rem;
30
- height: 9.875rem;
31
- border-radius: 999px;
32
- background: ${d.linearGradientAnimation("-90deg")};
33
-
34
- @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
35
- width: 4.5rem;
36
- height: 4.5rem;
37
- }
38
- `,N=f.forwardRef(({},i)=>t.jsx(F,{})),k=f.forwardRef(({isActive:i,image:o,imageComponent:r,onSelectCard:l=()=>{}},_)=>t.jsx(A,{className:i?"active":"",onClick:l,children:d.isDefined(r)?r:t.jsx("img",{src:o,className:"wrapper__image"})})),C=f.forwardRef(({uuid:i,title:o,price:r,currency:l,isNegotiable:_,isFree:x,image:w,sellerUuid:s,onSelectCard:m=()=>{},imageComponent:p,negotiableText:y="Negotiable",freeText:g="Free"},h)=>t.jsx($.SimpleProductCard,{uuid:i,title:o,price:r,currency:l,isNegotiable:_,isFree:x,image:w,imageComponent:p,sellerUuid:s,onSelectCard:m,negotiableText:y,freeText:g})),W=f.forwardRef(({},i)=>t.jsx(I,{})),O=u.newStyled.div`
39
- display: flex;
40
- flex-direction: column;
41
- align-items: center;
42
- gap: 1.5rem;
43
-
44
- & .wrapper__heading {
45
- display: flex;
46
- flex-direction: column;
47
- gap: 1rem;
48
- text-align: center;
49
-
50
- & .wrapper__title {
51
- color: var(--gray-950, #14161a);
52
- text-align: center;
53
- font-size: 1.5rem;
54
- font-style: normal;
55
- font-weight: 600;
56
- line-height: 2rem;
57
- letter-spacing: -0.47px;
58
- }
59
-
60
- & .wrapper__subtitle {
61
- color: var(---gray-600, #676e79);
62
- font-size: 0.875rem;
63
- font-style: normal;
64
- font-weight: 400;
65
- line-height: 1.25rem;
66
- letter-spacing: 0.25px;
67
- }
68
- }
69
-
70
- & .wrapper__avatars {
71
- display: grid;
72
- grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitAvatars}, minmax(0, 1fr))`};
73
- gap: 2rem;
74
- justify-items: center;
75
- align-items: center;
76
- }
77
-
78
- & .wrapper__cards {
79
- display: grid;
80
- grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
81
- gap: 1.25rem;
82
- justify-items: center;
83
- align-items: center;
84
- width: 100%;
85
- }
86
-
87
- @media (max-width: ${a.MOBILE_SIZE_PX+"px"}) {
88
- & .wrapper__avatars {
89
- grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitAvatarsForMobile}, minmax(0, 1fr))`};
90
- gap: auto;
91
- }
92
-
93
- & .wrapper__cards {
94
- grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
95
- gap: 1rem;
96
- }
97
- }
98
- `,R=f.forwardRef(({title:i,subtitle:o,avatars:r=[],limitAvatars:l=4,limitCards:_=6,limitAvatarsForMobile:x=4,limitCardsForMobile:w=2,cards:s=[],onSelectAvatar:m=()=>{},onSelectCard:p=()=>{}},y)=>{var j,b;const g=e=>{m==null||m(e==null?void 0:e.uuid)},h=e=>{p==null||p(e==null?void 0:e.uuid)};return t.jsxs(O,{limitAvatars:l,limitAvatarsForMobile:x,limitCards:_,limitCardsForMobile:w,children:[t.jsxs("div",{className:"wrapper__heading",children:[i&&t.jsx("div",{className:"wrapper__title",children:i}),o&&t.jsx("div",{className:"wrapper__subtitle",children:o})]}),t.jsx("div",{className:"wrapper__avatars",children:r&&(r==null?void 0:r.length)>0?r==null?void 0:r.map((e,n)=>t.jsx(k,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>g==null?void 0:g(e)},`field-of-interests-with-avatars-card-avatar__${n+1}`)):(j=Array.from("1234"))==null?void 0:j.map((e,n)=>t.jsx(N,{},`field-of-interests-with-avatars-card-avatar-skeleton__${n+1}`))}),t.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,n)=>t.jsx(C,{uuid:e==null?void 0:e.uuid,title:e==null?void 0:e.title,price:e==null?void 0:e.price,currency:e==null?void 0:e.currency,isNegotiable:e==null?void 0:e.isNegotiable,isFree:e==null?void 0:e.isFree,image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,sellerUuid:e==null?void 0:e.sellerUuid,negotiableText:e==null?void 0:e.negotiableText,freeText:e==null?void 0:e.freeText,onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-with-avatars-card__${n+1}`)):(b=Array.from("123456"))==null?void 0:b.map((e,n)=>t.jsx(W,{},`field-of-interests-with-avatars-card-skeleton__${n+1}`))})]})});module.exports=R;