@lanaco/lnc-react-ui 4.0.226 → 4.0.227

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.
Files changed (79) hide show
  1. package/dist/BannerSectionCarousel.cjs +3 -3
  2. package/dist/BannerSectionCarousel.js +18 -11
  3. package/dist/BlogCardsSponsoredSection.cjs +1 -1
  4. package/dist/BlogCardsSponsoredSection.js +1 -1
  5. package/dist/BlogListSection.cjs +7 -7
  6. package/dist/BlogListSection.js +157 -207
  7. package/dist/BlogSingleSection.cjs +2 -11
  8. package/dist/BlogSingleSection.js +19 -35
  9. package/dist/BlogsSectionDetailed.cjs +1 -1
  10. package/dist/BlogsSectionDetailed.js +1 -1
  11. package/dist/BlogsSectionLarge.cjs +8 -16
  12. package/dist/BlogsSectionLarge.js +40 -58
  13. package/dist/BlogsSectionSimple.cjs +1 -1
  14. package/dist/BlogsSectionSimple.js +1 -1
  15. package/dist/BlogsSectionSimpleCentered.cjs +12 -25
  16. package/dist/BlogsSectionSimpleCentered.js +64 -98
  17. package/dist/BlogsSectionWithFilters.cjs +10 -21
  18. package/dist/BlogsSectionWithFilters.js +106 -154
  19. package/dist/BrandHitsSection.cjs +7 -7
  20. package/dist/BrandHitsSection.js +41 -87
  21. package/dist/DetailedProductsInfinitiveSection.cjs +1 -1
  22. package/dist/DetailedProductsInfinitiveSection.js +2 -2
  23. package/dist/DetailedProductsSection.cjs +1 -1
  24. package/dist/DetailedProductsSection.js +2 -2
  25. package/dist/FieldOfInterestsMasonrySection.cjs +13 -13
  26. package/dist/FieldOfInterestsMasonrySection.js +105 -159
  27. package/dist/FieldOfInterestsWithAvatarsCardsSection.cjs +8 -8
  28. package/dist/FieldOfInterestsWithAvatarsCardsSection.js +93 -124
  29. package/dist/FieldOfInterestsWithTagsCardsSection.cjs +1 -1
  30. package/dist/FieldOfInterestsWithTagsCardsSection.js +1 -1
  31. package/dist/GeneralWithTagsCardsSection.cjs +1 -1
  32. package/dist/GeneralWithTagsCardsSection.js +1 -1
  33. package/dist/GiftCardsSection.cjs +10 -14
  34. package/dist/GiftCardsSection.js +76 -146
  35. package/dist/MasonryGeneralCardsSection.cjs +10 -10
  36. package/dist/MasonryGeneralCardsSection.js +45 -44
  37. package/dist/OverlayGeneralCardsSection.cjs +1 -1
  38. package/dist/OverlayGeneralCardsSection.js +1 -1
  39. package/dist/ProductsWithBannerSection.cjs +13 -13
  40. package/dist/ProductsWithBannerSection.js +87 -168
  41. package/dist/QuattroCardsSection.cjs +1 -1
  42. package/dist/QuattroCardsSection.js +1 -1
  43. package/dist/ReviewsSection.cjs +18 -22
  44. package/dist/ReviewsSection.js +101 -163
  45. package/dist/SalesCampaignsSection.cjs +14 -14
  46. package/dist/SalesCampaignsSection.js +299 -330
  47. package/dist/ShopCardsSection.cjs +6 -19
  48. package/dist/ShopCardsSection.js +54 -100
  49. package/dist/SimpleCategoriesSection.cjs +3 -3
  50. package/dist/SimpleCategoriesSection.js +64 -67
  51. package/dist/SimpleProductsSection.cjs +7 -7
  52. package/dist/SimpleProductsSection.js +65 -138
  53. package/dist/UrgentSaleProductsSection.cjs +1 -1
  54. package/dist/UrgentSaleProductsSection.js +1 -1
  55. package/dist/index-B7fBsitY.js +45 -0
  56. package/dist/index-BMAvJQBG.cjs +9 -0
  57. package/dist/index-BUdvfHpp.cjs +5 -0
  58. package/dist/index-BXT1eY2D.js +753 -0
  59. package/dist/index-C6amCwRZ.js +25 -0
  60. package/dist/index-C8R9lsWG.cjs +1 -0
  61. package/dist/index-CeQvy566.cjs +11 -0
  62. package/dist/index-Cyt4EUZ6.js +20 -0
  63. package/dist/index-D3QZziO_.cjs +368 -0
  64. package/dist/index-VTkAaA-n.js +18 -0
  65. package/dist/style-BFPpppS9.js +73 -0
  66. package/dist/style-CQdEALKR.cjs +59 -0
  67. package/package.json +1 -1
  68. package/dist/index-BGNavrtB.cjs +0 -368
  69. package/dist/index-BHcrzV2G.js +0 -54
  70. package/dist/index-Bj1KWOV4.cjs +0 -11
  71. package/dist/index-BsAddfgC.cjs +0 -1
  72. package/dist/index-Cn4bq6ZX.js +0 -84
  73. package/dist/index-CuRcxKQH.js +0 -42
  74. package/dist/index-DB1J-G6Z.js +0 -38
  75. package/dist/index-DkPva6Gr.cjs +0 -20
  76. package/dist/index-fzBXDy05.cjs +0 -16
  77. package/dist/index-gFZSZLba.js +0 -882
  78. package/dist/style-DvkivBNg.js +0 -74
  79. package/dist/style-Ito6YFqi.cjs +0 -64
@@ -1,32 +1,32 @@
1
- import { jsxs as a, jsx as t, Fragment as _ } from "react/jsx-runtime";
2
- import { forwardRef as L, useRef as A, Suspense as I, memo as O, useMemo as U } from "react";
3
- import { s as S } from "./emotion-styled.browser.esm-DfbrHHed.js";
4
- import { d as w } from "./breakpoints-BubDitvo.js";
5
- import { u as D } from "./useDetectMobile-B0Jog4jQ.js";
6
- import { n as K, l as $ } from "./utils-MoGhNMmj.js";
7
- import { T as E } from "./style-D54KOzZj.js";
8
- import G from "./Button.js";
9
- import H from "./Link.js";
10
- import { P as X } from "./index-DEypPQRI.js";
11
- import { S as q } from "./index-Djo0ZcRE.js";
12
- import { b as J, S as y, a as s } from "./style-DvkivBNg.js";
13
- const P = S.div`
1
+ import { jsxs as l, jsx as t, Fragment as _ } from "react/jsx-runtime";
2
+ import { forwardRef as M, useRef as j, Suspense as I, memo as O, useMemo as P } from "react";
3
+ import { s as C } from "./emotion-styled.browser.esm-DfbrHHed.js";
4
+ import { d as k } from "./breakpoints-BubDitvo.js";
5
+ import { u as U } from "./useDetectMobile-B0Jog4jQ.js";
6
+ import { n as D, l as v } from "./utils-MoGhNMmj.js";
7
+ import { T as K } from "./style-D54KOzZj.js";
8
+ import E from "./Button.js";
9
+ import G from "./Link.js";
10
+ import { P as H } from "./index-DEypPQRI.js";
11
+ import { S as X } from "./index-Djo0ZcRE.js";
12
+ import { b as q, c as B, a as R } from "./style-BFPpppS9.js";
13
+ const J = C.div`
14
14
  display: grid;
15
- grid-template-columns: ${(r) => `repeat(${r.limit}, minmax(0, 1fr))`};
15
+ grid-template-columns: ${(o) => `repeat(${o.limit}, minmax(0, 1fr))`};
16
16
  gap: 1.25rem;
17
17
 
18
- @media ${w("M")} {
18
+ @media ${k("M")} {
19
19
  grid-template-columns: repeat(2, 1fr);
20
20
  }
21
21
 
22
- @media ${w("S")} {
22
+ @media ${k("S")} {
23
23
  grid-template-columns: repeat(2, 1fr);
24
24
  }
25
25
 
26
- @media ${w("XS")} {
26
+ @media ${k("XS")} {
27
27
  grid-template-columns: repeat(1, 1fr);
28
28
  }
29
- `, Q = S.a`
29
+ `, Q = C.a`
30
30
  text-decoration: none;
31
31
  color: var(--gray-950);
32
32
  display: flex;
@@ -58,7 +58,7 @@ const P = S.div`
58
58
  & a {
59
59
  margin-top: auto;
60
60
  }
61
- `, V = S.div`
61
+ `, V = C.div`
62
62
  display: flex;
63
63
  flex-direction: column;
64
64
  gap: 0.5rem;
@@ -73,44 +73,44 @@ const P = S.div`
73
73
  font-weight: 400;
74
74
  font-size: 0.875rem;
75
75
  color: var(--gray-700, #4e555f);
76
- ${K(3)}
76
+ ${D(3)}
77
77
  }
78
- `, Y = L((r, h) => {
78
+ `, Y = M((o, a) => {
79
79
  const {
80
- title: l,
81
- imageUrl: m,
80
+ title: s,
81
+ imageUrl: c,
82
82
  text: n,
83
83
  buttonText: u,
84
- onCardClick: c,
85
- metadata: o,
84
+ onCardClick: m,
85
+ metadata: r,
86
86
  link: d,
87
87
  LinkComponent: g
88
- } = r, f = g || "a", p = A(), b = (k) => {
89
- c(k, p);
88
+ } = o, h = g || "a", p = j(), f = (b) => {
89
+ m(b, p);
90
90
  };
91
- return /* @__PURE__ */ a(
91
+ return /* @__PURE__ */ l(
92
92
  Q,
93
93
  {
94
94
  ref: p,
95
- name: o == null ? void 0 : o.name,
96
- "data-accessor": o == null ? void 0 : o.accessor,
95
+ name: r == null ? void 0 : r.name,
96
+ "data-accessor": r == null ? void 0 : r.accessor,
97
97
  className: "blog-card",
98
- onClick: b,
98
+ onClick: f,
99
99
  to: `/${d}`,
100
- as: f,
100
+ as: h,
101
101
  ...g ? { to: `/${d}` } : { href: `/${d}` },
102
102
  children: [
103
- /* @__PURE__ */ a(V, { children: [
104
- /* @__PURE__ */ t("div", { className: "text-wr-title", children: l }),
103
+ /* @__PURE__ */ l(V, { children: [
104
+ /* @__PURE__ */ t("div", { className: "text-wr-title", children: s }),
105
105
  /* @__PURE__ */ t("div", { className: "text-wr", children: n }),
106
- /* @__PURE__ */ t(H, { color: "gray", onClick: b, children: u })
106
+ /* @__PURE__ */ t(G, { color: "gray", onClick: f, children: u })
107
107
  ] }),
108
- /* @__PURE__ */ t(X, { src: m })
108
+ /* @__PURE__ */ t(H, { src: c })
109
109
  ]
110
110
  }
111
111
  );
112
- }), Z = S(J)`
113
- @media ${w("S")} {
112
+ }), Z = C(q)`
113
+ @media ${k("S")} {
114
114
  & .skeleton__tags {
115
115
  & > div {
116
116
  width: 100%;
@@ -119,164 +119,116 @@ const P = S.div`
119
119
 
120
120
  & .skeleton__cards {
121
121
  flex-direction: column;
122
-
123
- & > div {
124
- background: linear-gradient(
125
- to right,
126
- transparent 0%,
127
- #f4f6fb 40%,
128
- #f4f6fb 100%
129
- );
130
-
131
- box-shadow: none;
132
- }
133
122
  }
134
123
  }
135
- `, x = ({ keyPrefix: r }) => /* @__PURE__ */ a(Z, { children: [
136
- /* @__PURE__ */ a(y, { className: "skeleton__tags", children: [
137
- /* @__PURE__ */ t(
138
- s,
139
- {
140
- height: "2.25rem",
141
- width: "128px",
142
- borderRadius: "1rem"
143
- },
144
- `${r}-1`
145
- ),
146
- /* @__PURE__ */ t(
147
- s,
148
- {
149
- height: "2.25rem",
150
- width: "128px",
151
- borderRadius: "1rem"
152
- },
153
- `${r}-2`
154
- ),
155
- /* @__PURE__ */ t(
156
- s,
157
- {
158
- height: "2.25rem",
159
- width: "128px",
160
- borderRadius: "1rem"
161
- },
162
- `${r}-3`
163
- )
164
- ] }),
165
- /* @__PURE__ */ a(y, { className: "skeleton__cards", children: [
166
- /* @__PURE__ */ t(
167
- s,
168
- {
169
- height: "10.375rem",
170
- borderRadius: "0.75rem"
171
- },
172
- `${r}-4`
173
- ),
174
- /* @__PURE__ */ t(
175
- s,
176
- {
177
- height: "10.375rem",
178
- borderRadius: "0.75rem"
179
- },
180
- `${r}-5`
181
- ),
182
- /* @__PURE__ */ t(
183
- s,
184
- {
185
- height: "10.375rem",
186
- borderRadius: "0.75rem"
187
- },
188
- `${r}-6`
189
- )
190
- ] })
124
+ `, x = ({ keyPrefix: o }) => /* @__PURE__ */ l(Z, { children: [
125
+ /* @__PURE__ */ t(B, { className: "skeleton__tags", children: [1, 2, 3].map((a) => /* @__PURE__ */ t(
126
+ R,
127
+ {
128
+ height: "2.25rem",
129
+ width: "8rem",
130
+ borderRadius: "1rem"
131
+ },
132
+ `${o}-tab-${a}`
133
+ )) }),
134
+ /* @__PURE__ */ t(B, { className: "skeleton__cards", children: [1, 2, 3].map((a) => /* @__PURE__ */ t(
135
+ R,
136
+ {
137
+ height: "10.375rem",
138
+ width: "100%",
139
+ borderRadius: "1rem"
140
+ },
141
+ `${o}-card-${a}`
142
+ )) })
191
143
  ] }), ee = ({
192
- keyPrefix: r,
193
- isLoading: h = !1,
194
- fallbackComponent: l = /* @__PURE__ */ t(_, {}),
195
- children: m
196
- }) => /* @__PURE__ */ t(I, { fallbackComponent: l, children: h === !0 ? /* @__PURE__ */ t(x, { keyPrefix: r }) : m }), B = O(Y), he = L((r, h) => {
144
+ keyPrefix: o,
145
+ isLoading: a = !1,
146
+ fallbackComponent: s = /* @__PURE__ */ t(_, {}),
147
+ children: c
148
+ }) => /* @__PURE__ */ t(I, { fallbackComponent: s, children: a === !0 ? /* @__PURE__ */ t(x, { keyPrefix: o }) : c }), W = O(Y), ue = M((o, a) => {
197
149
  const {
198
- icon: l,
199
- title: m,
150
+ icon: s,
151
+ title: c,
200
152
  items: n,
201
153
  buttonText: u,
202
- limit: c = 3,
203
- options: o,
154
+ limit: m = 3,
155
+ options: r,
204
156
  selectedOption: d = [],
205
157
  onButtonAction: g = () => {
206
158
  },
207
- buttonLink: f,
159
+ buttonLink: h,
208
160
  onSelectOption: p = () => {
209
161
  },
210
- onSelectAll: b = () => {
162
+ onSelectAll: f = () => {
211
163
  },
212
- isLoading: k = !1,
213
- onSelectCard: R = () => {
164
+ isLoading: b = !1,
165
+ onSelectCard: y = () => {
214
166
  },
215
- productsToolbarName: M = "All",
216
- allButton: z = !1,
217
- componentName: T,
218
- LinkComponent: N
219
- } = r, W = D(), F = U(() => {
167
+ productsToolbarName: z = "All",
168
+ allButton: L = !1,
169
+ componentName: $,
170
+ LinkComponent: T
171
+ } = o, N = U(), A = P(() => {
220
172
  var i;
221
- return /* @__PURE__ */ t(_, { children: W === !0 ? n == null ? void 0 : n.map((e, v) => /* @__PURE__ */ t(
222
- B,
173
+ return /* @__PURE__ */ t(_, { children: N === !0 ? n == null ? void 0 : n.map((e, S) => /* @__PURE__ */ t(
174
+ W,
223
175
  {
224
176
  title: e == null ? void 0 : e.title,
225
177
  imageUrl: (e == null ? void 0 : e.image) || null,
226
178
  text: e == null ? void 0 : e.text,
227
179
  buttonText: e == null ? void 0 : e.buttonText,
228
- onCardClick: (j, C) => R(e, C),
229
- metadata: { name: T, accessor: e == null ? void 0 : e.accessor },
180
+ onCardClick: (F, w) => y(e, w),
181
+ metadata: { name: $, accessor: e == null ? void 0 : e.accessor },
230
182
  link: e == null ? void 0 : e.link,
231
- LinkComponent: N
183
+ LinkComponent: T
232
184
  },
233
- v
234
- )) : (i = n == null ? void 0 : n.slice(0, c)) == null ? void 0 : i.map((e, v) => /* @__PURE__ */ t(
235
- B,
185
+ S
186
+ )) : (i = n == null ? void 0 : n.slice(0, m)) == null ? void 0 : i.map((e, S) => /* @__PURE__ */ t(
187
+ W,
236
188
  {
237
189
  title: e == null ? void 0 : e.title,
238
190
  imageUrl: (e == null ? void 0 : e.image) || null,
239
191
  text: e == null ? void 0 : e.text,
240
192
  buttonText: e == null ? void 0 : e.buttonText,
241
- onCardClick: (j, C) => R(e, C),
242
- metadata: { name: T, accessor: e == null ? void 0 : e.accessor },
193
+ onCardClick: (F, w) => y(e, w),
194
+ metadata: { name: $, accessor: e == null ? void 0 : e.accessor },
243
195
  link: e == null ? void 0 : e.link,
244
- LinkComponent: N
196
+ LinkComponent: T
245
197
  },
246
- v
198
+ S
247
199
  )) });
248
- }, [n, W, c]);
249
- return /* @__PURE__ */ a(E, { ref: h, children: [
250
- /* @__PURE__ */ a("div", { className: "regular-title", children: [
251
- /* @__PURE__ */ a("div", { className: "regular-title-text", children: [
252
- $(l) && /* @__PURE__ */ t("i", { className: l }),
253
- /* @__PURE__ */ t("span", { children: m })
200
+ }, [n, N, m]);
201
+ return /* @__PURE__ */ l(K, { ref: a, children: [
202
+ /* @__PURE__ */ l("div", { className: "regular-title", children: [
203
+ /* @__PURE__ */ l("div", { className: "regular-title-text", children: [
204
+ v(s) && /* @__PURE__ */ t("i", { className: s }),
205
+ /* @__PURE__ */ t("span", { children: c })
254
206
  ] }),
255
- $(u) && $(f) && !k && /* @__PURE__ */ t(
256
- G,
207
+ v(u) && v(h) && !b && /* @__PURE__ */ t(
208
+ E,
257
209
  {
258
210
  type: "button",
259
211
  btnType: "tinted",
260
212
  color: "neutral",
261
213
  onClick: (i) => {
262
214
  var e;
263
- (e = i == null ? void 0 : i.target) == null || e.blur(), g(f);
215
+ (e = i == null ? void 0 : i.target) == null || e.blur(), g(h);
264
216
  },
265
217
  borderRadius: "curved",
266
218
  children: u
267
219
  }
268
220
  )
269
221
  ] }),
270
- /* @__PURE__ */ a(
222
+ /* @__PURE__ */ l(
271
223
  ee,
272
224
  {
273
- isLoading: k,
225
+ isLoading: b,
274
226
  keyPrefix: "blogs-with-filters-skeleton",
275
227
  children: [
276
- (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ t(
277
- q,
228
+ (r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ t(
229
+ X,
278
230
  {
279
- items: o,
231
+ items: r,
280
232
  selectedIds: d,
281
233
  onRemove: (i) => {
282
234
  p(i);
@@ -284,20 +236,20 @@ const P = S.div`
284
236
  onSelect: (i) => {
285
237
  p(i);
286
238
  },
287
- onSelectAll: b,
239
+ onSelectAll: f,
288
240
  labelKey: "name",
289
241
  valueKey: "code",
290
242
  noMargin: !0,
291
- productsToolbarName: M,
292
- allButton: z
243
+ productsToolbarName: z,
244
+ allButton: L
293
245
  }
294
246
  ),
295
- /* @__PURE__ */ t(P, { limit: c, children: F })
247
+ /* @__PURE__ */ t(J, { limit: m, children: A })
296
248
  ]
297
249
  }
298
250
  )
299
251
  ] });
300
252
  });
301
253
  export {
302
- he as default
254
+ ue as default
303
255
  };
@@ -1,4 +1,4 @@
1
- "use strict";const e=require("react/jsx-runtime"),p=require("react"),_=require("./utils-CITgSxXe.cjs"),m=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),g=require("./breakpoints-CcVm-gVm.cjs"),o=require("./style-Ito6YFqi.cjs"),x=m.styled.a`
1
+ "use strict";const e=require("react/jsx-runtime"),d=require("react"),_=require("./utils-CITgSxXe.cjs"),h=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),m=require("./breakpoints-CcVm-gVm.cjs"),g=require("./style-CQdEALKR.cjs"),x=h.styled.a`
2
2
  text-decoration: none;
3
3
  color: var(--gray-950);
4
4
  width: 7.5rem;
@@ -14,7 +14,7 @@
14
14
  height: auto;
15
15
  }
16
16
 
17
- @media ${g.down("S")} {
17
+ @media ${m.down("S")} {
18
18
  width: 4.5rem;
19
19
  height: auto;
20
20
  max-height: 4.5rem;
@@ -24,7 +24,7 @@
24
24
  height: auto;
25
25
  }
26
26
  }
27
- `,u=p.forwardRef(({imageComponent:r,image:n,onSelectCard:a,urlPrefix:s,urlSufix:i,code:l,LinkComponent:d},c)=>{const h=d||"a";return e.jsx(x,{ref:c,onClick:a,as:h,...d?{to:`${s}${l}${i}`}:{href:`${s}${l}${i}`},children:_.isDefined(r)?r:e.jsx("img",{src:n,className:"wrapper__image"})})}),j=m.styled.div`
27
+ `,f=d.forwardRef(({imageComponent:t,image:a,onSelectCard:n,urlPrefix:s,urlSufix:i,code:o,LinkComponent:c},p)=>{const l=c||"a";return e.jsx(x,{ref:p,onClick:n,as:l,...c?{to:`${s}${o}${i}`}:{href:`${s}${o}${i}`},children:_.isDefined(t)?t:e.jsx("img",{src:a,className:"wrapper__image"})})}),u=h.styled.div`
28
28
  display: flex;
29
29
  flex-direction: column;
30
30
  align-items: flex-start;
@@ -73,7 +73,7 @@
73
73
  }
74
74
  }
75
75
 
76
- @media ${g.down("S")} {
76
+ @media ${m.down("S")} {
77
77
  & .wrapper__content {
78
78
  align-content: center;
79
79
  gap: 1rem;
@@ -84,9 +84,9 @@
84
84
  }
85
85
  }
86
86
  }
87
- `,f=m.styled(o.SkeletonRowWrapper)`
88
- @media ${g.down("S")} {
87
+ `,j=h.styled(g.SkeletonAnimationContainer)`
88
+ @media ${m.down("S")} {
89
89
  gap: 1rem;
90
90
  flex-wrap: wrap;
91
91
  }
92
- `,$=({keyPrefix:r})=>e.jsxs(f,{justifyContent:"center",alignItems:"center",gap:"3rem",children:[e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-1`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-2`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-3`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-4`),e.jsx(o.SkeletonLinePlaceholder,{height:"4rem",width:"7.5rem",borderRadius:"0.75rem"},`${r}-5`)]}),y=({keyPrefix:r,isLoading:n=!1,fallbackComponent:a=e.jsx(e.Fragment,{}),children:s})=>e.jsx(p.Suspense,{fallbackComponent:a,children:n===!0?e.jsx($,{keyPrefix:r}):s}),b=p.forwardRef(({title:r,subtitle:n,items:a=[],isLoading:s=!1,onSelectCard:i=()=>{},urlPrefix:l,urlSufix:d,LinkComponent:c},h)=>e.jsxs(j,{ref:h,children:[e.jsxs("div",{className:"wrapper__heading",children:[r&&e.jsx("div",{className:"wrapper__title",children:r}),n&&e.jsx("div",{className:"wrapper__subtitle",children:n})]}),e.jsx(y,{isLoading:s,keyPrefix:"brand-hits-skeleton",children:e.jsx("div",{className:"wrapper__content",children:a==null?void 0:a.map((t,w)=>e.jsx(u,{image:t==null?void 0:t.image,imageComponent:t==null?void 0:t.imageComponent,onSelectCard:()=>i==null?void 0:i(t),className:"wrapper__item",urlPrefix:l,urlSufix:d,code:t==null?void 0:t.card,LinkComponent:c},`brand-hit-card__${w+1}`))})})]}));module.exports=b;
92
+ `,y=({keyPrefix:t})=>e.jsx(j,{justifyContent:"center",alignItems:"center",gap:"3rem",children:[1,2,3,4,5].map(a=>e.jsx(g.SkeletonRect,{height:"4rem",width:"7.5rem"},`${t}-${a}`))}),$=({keyPrefix:t,isLoading:a=!1,fallbackComponent:n=e.jsx(e.Fragment,{}),children:s})=>e.jsx(d.Suspense,{fallbackComponent:n,children:a===!0?e.jsx(y,{keyPrefix:t}):s}),v=d.forwardRef(({title:t,subtitle:a,items:n=[],isLoading:s=!1,onSelectCard:i=()=>{},urlPrefix:o,urlSufix:c,LinkComponent:p},l)=>e.jsxs(u,{ref:l,children:[e.jsxs("div",{className:"wrapper__heading",children:[t&&e.jsx("div",{className:"wrapper__title",children:t}),a&&e.jsx("div",{className:"wrapper__subtitle",children:a})]}),e.jsx($,{isLoading:s,keyPrefix:"brand-hits-skeleton",children:e.jsx("div",{className:"wrapper__content",children:n==null?void 0:n.map((r,w)=>e.jsx(f,{image:r==null?void 0:r.image,imageComponent:r==null?void 0:r.imageComponent,onSelectCard:()=>i==null?void 0:i(r),className:"wrapper__item",urlPrefix:o,urlSufix:c,code:r==null?void 0:r.card,LinkComponent:p},`brand-hit-card__${w+1}`))})})]}));module.exports=v;
@@ -1,10 +1,10 @@
1
- import { jsx as e, jsxs as h, Fragment as f } from "react/jsx-runtime";
2
- import { forwardRef as w, Suspense as u } from "react";
3
- import { m as $ } from "./utils-MoGhNMmj.js";
4
- import { s as l } from "./emotion-styled.browser.esm-DfbrHHed.js";
1
+ import { jsx as e, Fragment as w, jsxs as h } from "react/jsx-runtime";
2
+ import { forwardRef as g, Suspense as f } from "react";
3
+ import { m as x } from "./utils-MoGhNMmj.js";
4
+ import { s as m } from "./emotion-styled.browser.esm-DfbrHHed.js";
5
5
  import { d as c } from "./breakpoints-BubDitvo.js";
6
- import { S as x, a as p } from "./style-DvkivBNg.js";
7
- const v = l.a`
6
+ import { S as u, a as $ } from "./style-BFPpppS9.js";
7
+ const y = m.a`
8
8
  text-decoration: none;
9
9
  color: var(--gray-950);
10
10
  width: 7.5rem;
@@ -30,26 +30,26 @@ const v = l.a`
30
30
  height: auto;
31
31
  }
32
32
  }
33
- `, b = w(
33
+ `, v = g(
34
34
  ({
35
- imageComponent: r,
36
- image: n,
37
- onSelectCard: t,
35
+ imageComponent: a,
36
+ image: t,
37
+ onSelectCard: n,
38
38
  urlPrefix: i,
39
39
  urlSufix: o,
40
- code: s,
41
- LinkComponent: m
42
- }, d) => /* @__PURE__ */ e(
43
- v,
40
+ code: p,
41
+ LinkComponent: s
42
+ }, l) => /* @__PURE__ */ e(
43
+ y,
44
44
  {
45
- ref: d,
46
- onClick: t,
47
- as: m || "a",
48
- ...m ? { to: `${i}${s}${o}` } : { href: `${i}${s}${o}` },
49
- children: $(r) ? r : /* @__PURE__ */ e("img", { src: n, className: "wrapper__image" })
45
+ ref: l,
46
+ onClick: n,
47
+ as: s || "a",
48
+ ...s ? { to: `${i}${p}${o}` } : { href: `${i}${p}${o}` },
49
+ children: x(a) ? a : /* @__PURE__ */ e("img", { src: t, className: "wrapper__image" })
50
50
  }
51
51
  )
52
- ), y = l.div`
52
+ ), N = m.div`
53
53
  display: flex;
54
54
  flex-direction: column;
55
55
  align-items: flex-start;
@@ -109,85 +109,39 @@ const v = l.a`
109
109
  }
110
110
  }
111
111
  }
112
- `, R = l(x)`
112
+ `, S = m(u)`
113
113
  @media ${c("S")} {
114
114
  gap: 1rem;
115
115
  flex-wrap: wrap;
116
116
  }
117
- `, N = ({ keyPrefix: r }) => /* @__PURE__ */ h(R, { justifyContent: "center", alignItems: "center", gap: "3rem", children: [
118
- /* @__PURE__ */ e(
119
- p,
120
- {
121
- height: "4rem",
122
- width: "7.5rem",
123
- borderRadius: "0.75rem"
124
- },
125
- `${r}-1`
126
- ),
127
- /* @__PURE__ */ e(
128
- p,
129
- {
130
- height: "4rem",
131
- width: "7.5rem",
132
- borderRadius: "0.75rem"
133
- },
134
- `${r}-2`
135
- ),
136
- /* @__PURE__ */ e(
137
- p,
138
- {
139
- height: "4rem",
140
- width: "7.5rem",
141
- borderRadius: "0.75rem"
142
- },
143
- `${r}-3`
144
- ),
145
- /* @__PURE__ */ e(
146
- p,
147
- {
148
- height: "4rem",
149
- width: "7.5rem",
150
- borderRadius: "0.75rem"
151
- },
152
- `${r}-4`
153
- ),
154
- /* @__PURE__ */ e(
155
- p,
156
- {
157
- height: "4rem",
158
- width: "7.5rem",
159
- borderRadius: "0.75rem"
160
- },
161
- `${r}-5`
162
- )
163
- ] }), S = ({
164
- keyPrefix: r,
165
- isLoading: n = !1,
166
- fallbackComponent: t = /* @__PURE__ */ e(f, {}),
117
+ `, k = ({ keyPrefix: a }) => /* @__PURE__ */ e(S, { justifyContent: "center", alignItems: "center", gap: "3rem", children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ e($, { height: "4rem", width: "7.5rem" }, `${a}-${t}`)) }), b = ({
118
+ keyPrefix: a,
119
+ isLoading: t = !1,
120
+ fallbackComponent: n = /* @__PURE__ */ e(w, {}),
167
121
  children: i
168
- }) => /* @__PURE__ */ e(u, { fallbackComponent: t, children: n === !0 ? /* @__PURE__ */ e(N, { keyPrefix: r }) : i }), k = w(
169
- ({ title: r, subtitle: n, items: t = [], isLoading: i = !1, onSelectCard: o = () => {
170
- }, urlPrefix: s, urlSufix: m, LinkComponent: d }, g) => /* @__PURE__ */ h(y, { ref: g, children: [
122
+ }) => /* @__PURE__ */ e(f, { fallbackComponent: n, children: t === !0 ? /* @__PURE__ */ e(k, { keyPrefix: a }) : i }), W = g(
123
+ ({ title: a, subtitle: t, items: n = [], isLoading: i = !1, onSelectCard: o = () => {
124
+ }, urlPrefix: p, urlSufix: s, LinkComponent: l }, d) => /* @__PURE__ */ h(N, { ref: d, children: [
171
125
  /* @__PURE__ */ h("div", { className: "wrapper__heading", children: [
172
- r && /* @__PURE__ */ e("div", { className: "wrapper__title", children: r }),
173
- n && /* @__PURE__ */ e("div", { className: "wrapper__subtitle", children: n })
126
+ a && /* @__PURE__ */ e("div", { className: "wrapper__title", children: a }),
127
+ t && /* @__PURE__ */ e("div", { className: "wrapper__subtitle", children: t })
174
128
  ] }),
175
129
  /* @__PURE__ */ e(
176
- S,
130
+ b,
177
131
  {
178
132
  isLoading: i,
179
133
  keyPrefix: "brand-hits-skeleton",
180
- children: /* @__PURE__ */ e("div", { className: "wrapper__content", children: t == null ? void 0 : t.map((a, _) => /* @__PURE__ */ e(
181
- b,
134
+ children: /* @__PURE__ */ e("div", { className: "wrapper__content", children: n == null ? void 0 : n.map((r, _) => /* @__PURE__ */ e(
135
+ v,
182
136
  {
183
- image: a == null ? void 0 : a.image,
184
- imageComponent: a == null ? void 0 : a.imageComponent,
185
- onSelectCard: () => o == null ? void 0 : o(a),
137
+ image: r == null ? void 0 : r.image,
138
+ imageComponent: r == null ? void 0 : r.imageComponent,
139
+ onSelectCard: () => o == null ? void 0 : o(r),
186
140
  className: "wrapper__item",
187
- urlPrefix: s,
188
- urlSufix: m,
189
- code: a == null ? void 0 : a.card,
190
- LinkComponent: d
141
+ urlPrefix: p,
142
+ urlSufix: s,
143
+ code: r == null ? void 0 : r.card,
144
+ LinkComponent: l
191
145
  },
192
146
  `brand-hit-card__${_ + 1}`
193
147
  )) })
@@ -196,5 +150,5 @@ const v = l.a`
196
150
  ] })
197
151
  );
198
152
  export {
199
- k as default
153
+ W as default
200
154
  };
@@ -1,4 +1,4 @@
1
- "use strict";const t=require("react/jsx-runtime"),l=require("react"),K=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),p=require("./breakpoints-CcVm-gVm.cjs"),Q=require("./IconButton.cjs"),G=require("./Button.cjs"),r=require("./utils-CITgSxXe.cjs"),H=require("./useDetectMobile-DYV6V1yw.cjs"),g=require("./index-BGNavrtB.cjs"),J=require("./index-3GKF_7BJ.cjs"),W=require("./index-BsAddfgC.cjs"),X=K.styled.div`
1
+ "use strict";const t=require("react/jsx-runtime"),l=require("react"),K=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),p=require("./breakpoints-CcVm-gVm.cjs"),Q=require("./IconButton.cjs"),G=require("./Button.cjs"),r=require("./utils-CITgSxXe.cjs"),H=require("./useDetectMobile-DYV6V1yw.cjs"),g=require("./index-D3QZziO_.cjs"),J=require("./index-3GKF_7BJ.cjs"),W=require("./index-C8R9lsWG.cjs"),X=K.styled.div`
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: 1.5rem;
@@ -6,9 +6,9 @@ import H from "./IconButton.js";
6
6
  import J from "./Button.js";
7
7
  import { l as n } from "./utils-MoGhNMmj.js";
8
8
  import { u as W } from "./useDetectMobile-B0Jog4jQ.js";
9
- import { D as X, S as Y } from "./index-gFZSZLba.js";
9
+ import { D as X, S as Y } from "./index-BXT1eY2D.js";
10
10
  import { S as Z } from "./index-Djo0ZcRE.js";
11
- import { S as x } from "./index-DB1J-G6Z.js";
11
+ import { S as x } from "./index-Cyt4EUZ6.js";
12
12
  const ee = G.div`
13
13
  display: flex;
14
14
  flex-direction: column;
@@ -1,4 +1,4 @@
1
- "use strict";const t=require("react/jsx-runtime"),c=require("react"),K=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),j=require("./breakpoints-CcVm-gVm.cjs"),W=require("./Button.cjs"),l=require("./utils-CITgSxXe.cjs"),z=require("./useDetectMobile-DYV6V1yw.cjs"),G=require("./style-Boz6dk5s.cjs"),P=require("./index-BGNavrtB.cjs"),V=require("./index-3GKF_7BJ.cjs"),H=require("./index-BsAddfgC.cjs"),J=K.styled.div`
1
+ "use strict";const t=require("react/jsx-runtime"),c=require("react"),K=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),j=require("./breakpoints-CcVm-gVm.cjs"),W=require("./Button.cjs"),l=require("./utils-CITgSxXe.cjs"),z=require("./useDetectMobile-DYV6V1yw.cjs"),G=require("./style-Boz6dk5s.cjs"),P=require("./index-D3QZziO_.cjs"),V=require("./index-3GKF_7BJ.cjs"),H=require("./index-C8R9lsWG.cjs"),J=K.styled.div`
2
2
  display: grid;
3
3
  grid-template-columns: ${n=>`repeat(${n.limit}, minmax(0, 1fr))`};
4
4
  gap: 1.25rem;
@@ -6,9 +6,9 @@ import V from "./Button.js";
6
6
  import { l as c } from "./utils-MoGhNMmj.js";
7
7
  import { u as H } from "./useDetectMobile-B0Jog4jQ.js";
8
8
  import { T as J } from "./style-D54KOzZj.js";
9
- import { D as X, S as Y } from "./index-gFZSZLba.js";
9
+ import { D as X, S as Y } from "./index-BXT1eY2D.js";
10
10
  import { S as Z } from "./index-Djo0ZcRE.js";
11
- import { S as x } from "./index-DB1J-G6Z.js";
11
+ import { S as x } from "./index-Cyt4EUZ6.js";
12
12
  const ee = G.div`
13
13
  display: grid;
14
14
  grid-template-columns: ${(r) => `repeat(${r.limit}, minmax(0, 1fr))`};