dune-react 0.0.23 → 0.0.25

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 (52) hide show
  1. package/dist/components/puck-base/image.js +1 -1
  2. package/dist/components/puck-block/banner-sections/dual-row-marquee/dual-row-marquee.js +77 -53
  3. package/dist/components/puck-block/contact-sections/tab-locations/tab-locations.js +71 -55
  4. package/dist/components/puck-block/feature-sections/tab-feature/component.js +1 -1
  5. package/dist/components/puck-block/gallery-sections/image-carousel/index.d.ts +14 -1
  6. package/dist/components/puck-block/gallery-sections/interactive-portfolio/interactive-portfolio.js +165 -104
  7. package/dist/components/puck-block/gallery-sections/masonry-grid/index.d.ts +17 -1
  8. package/dist/components/puck-block/gallery-sections/masonry-grid/masonry-grid.js +56 -31
  9. package/dist/components/puck-block/gallery-sections/portfolio-cards/index.d.ts +17 -1
  10. package/dist/components/puck-block/gallery-sections/portfolio-cards/portfolio-cards.js +40 -12
  11. package/dist/components/puck-block/gallery-sections/props.d.ts +31 -2
  12. package/dist/components/puck-block/gallery-sections/props.js +17 -4
  13. package/dist/components/puck-block/gallery-sections/scroll-parallax/scroll-parallax.js +68 -37
  14. package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/scroll-parallax-portfolio.js +308 -151
  15. package/dist/components/puck-block/gallery-sections/static-grid/index.d.ts +17 -1
  16. package/dist/components/puck-block/header-sections/centered-navbar/centered-navbar.js +94 -14
  17. package/dist/components/puck-block/hero-sections/grid-expand-hero/index.d.ts +17 -1
  18. package/dist/components/puck-block/hero-sections/inline-image-hero/inline-image-hero.js +59 -28
  19. package/dist/components/puck-block/hero-sections/multi-image-grid-hero/index.d.ts +17 -1
  20. package/dist/components/puck-block/hero-sections/props.d.ts +34 -2
  21. package/dist/components/puck-block/hero-sections/props.js +18 -4
  22. package/dist/components/puck-block/hero-sections/tab-hero/component.js +1 -1
  23. package/dist/components/puck-block/index.d.ts +1 -0
  24. package/dist/components/puck-block/location-sections/index.d.ts +3 -0
  25. package/dist/components/puck-block/location-sections/location-1/index.js +102 -0
  26. package/dist/components/puck-block/location-sections/location-1/location.d.ts +0 -3
  27. package/dist/components/puck-block/location-sections/location-1/location.js +139 -0
  28. package/dist/components/puck-block/location-sections/location-2/index.js +126 -0
  29. package/dist/components/puck-block/location-sections/location-2/location.d.ts +0 -3
  30. package/dist/components/puck-block/location-sections/location-2/location.js +133 -0
  31. package/dist/components/puck-block/location-sections/location-3/index.js +109 -0
  32. package/dist/components/puck-block/location-sections/location-3/location.d.ts +0 -3
  33. package/dist/components/puck-block/location-sections/location-3/location.js +140 -0
  34. package/dist/components/puck-block/location-sections/props.d.ts +0 -3
  35. package/dist/components/puck-block/metrics-sections/tab-stats/tab-stats.js +1 -1
  36. package/dist/components/puck-block/pricing-sections/pricing-comparison-table/component.js +134 -33
  37. package/dist/components/puck-block/pricing-sections/tab-pricing-grid/component.js +86 -40
  38. package/dist/components/puck-block/pricing-sections/tab-single-pricing/component.js +1 -1
  39. package/dist/components/puck-block/registry.generated.d.ts +228 -6
  40. package/dist/components/puck-block/registry.generated.js +157 -138
  41. package/dist/components/puck-block/showcase-sections/tab-timeline/component.js +1 -1
  42. package/dist/components/puck-block/testimonial-sections/bento-testimonial/component.js +157 -83
  43. package/dist/components/puck-block/testimonial-sections/centered-testimonial/component.js +71 -28
  44. package/dist/components/puck-block/testimonial-sections/image-testimonial/component.js +66 -29
  45. package/dist/components/puck-block/testimonial-sections/image-testimonial-carousel/component.js +1 -1
  46. package/dist/components/puck-block/testimonial-sections/tab-testimonial/component.js +4 -4
  47. package/dist/components/puck-block/testimonial-sections/testimonial-card-grid/component.js +2 -2
  48. package/dist/components/puck-block/testimonial-sections/testimonial-carousel/component.js +1 -1
  49. package/dist/components/puck-core/core/props/form.js +25 -1
  50. package/dist/components/puck-core/fields/location-field.js +4 -1
  51. package/dist/index.js +6 -0
  52. package/package.json +4 -1
@@ -19,82 +19,118 @@ const BentoTestimonial = (props) => {
19
19
  let logoCardCount = 0;
20
20
  let backgroundImageCardCount = 0;
21
21
  const gridRowsClass = gridLayout === "4x3" ? "lg:grid-rows-3" : "lg:grid-rows-2";
22
- return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
23
- /* @__PURE__ */ jsx("div", { className: "mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg text-center", children: [
24
- /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
25
- /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
26
- ] }) }),
27
- /* @__PURE__ */ jsx("div", { className: `grid grid-cols-1 gap-6 sm:grid-rows-6 md:grid-cols-2 md:gap-8 lg:grid-cols-4 ${gridRowsClass}`, children: testimonialCards.map((card, index) => {
28
- if (card.component === "background" && hasBackgroundCards) {
29
- backgroundImageCardCount++;
30
- return /* @__PURE__ */ jsxs(
31
- "div",
32
- {
33
- className: cn("relative p-6 md:p-8 lg:p-6", {
34
- "order-last lg:order-none": backgroundImageCardCount === 4
35
- }),
36
- children: [
37
- /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex h-full flex-col items-start justify-between", children: [
38
- /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold text-text-alternative md:text-3xl md:leading-[1.3] lg:text-4xl", children: card.props.heading }),
39
- /* @__PURE__ */ jsx("div", { className: "mt-6 md:mt-8", children: /* @__PURE__ */ jsx(Button, { variant: card.props.button.variant, size: card.props.button.size, children: card.props.button.label }) })
40
- ] }),
41
- /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
42
- /* @__PURE__ */ jsx(CompoundImage, { src: card.props.backgroundImage.src, className: "size-full object-cover", alt: card.props.backgroundImage.alt }),
43
- /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50" })
44
- ] })
45
- ]
46
- },
47
- index
48
- );
49
- } else if (card.component === "logo") {
50
- logoCardCount++;
51
- return /* @__PURE__ */ jsx(
52
- "div",
53
- {
54
- className: cn(
55
- "flex items-center justify-center border border-border-primary p-6 md:p-8 lg:p-6",
56
- {
57
- "sm:col-start-2 sm:col-end-3 sm:row-start-4 sm:row-end-5 lg:col-auto lg:row-auto": logoCardCount === 3
58
- }
59
- ),
60
- children: /* @__PURE__ */ jsx(CompoundImage, { src: card.props.logo.src, alt: card.props.logo.alt, className: "max-h-12" })
61
- },
62
- index
63
- );
64
- } else if (card.component === "quote") {
65
- return /* @__PURE__ */ jsxs(
22
+ return /* @__PURE__ */ jsx(
23
+ SectionWrapper,
24
+ {
25
+ className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
26
+ style: sectionStyle,
27
+ css,
28
+ children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
29
+ /* @__PURE__ */ jsx("div", { className: "mb-12 md:mb-18 lg:mb-20", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg text-center", children: [
30
+ /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
31
+ /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
32
+ ] }) }),
33
+ /* @__PURE__ */ jsx(
66
34
  "div",
67
35
  {
68
- className: "flex flex-col items-start justify-between border border-border-primary p-6 sm:col-span-2 md:p-8",
69
- children: [
70
- /* @__PURE__ */ jsx("div", { className: "mb-5 flex md:mb-6", children: Array(card.props.numberOfStars).fill(null).map((_, i) => /* @__PURE__ */ jsx(BiSolidStar, { className: "size-6" }, i)) }),
71
- /* @__PURE__ */ jsx("blockquote", { className: "md:text-md", children: card.props.quote }),
72
- /* @__PURE__ */ jsxs("div", { className: "mt-5 flex w-full flex-col items-start md:mt-6 md:w-fit md:flex-row md:items-center", children: [
73
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
74
- CompoundImage,
36
+ className: `grid grid-cols-1 gap-6 sm:grid-rows-6 md:grid-cols-2 md:gap-8 lg:grid-cols-4 ${gridRowsClass}`,
37
+ children: testimonialCards.map((card, index) => {
38
+ if (card.component === "background" && hasBackgroundCards) {
39
+ backgroundImageCardCount++;
40
+ return /* @__PURE__ */ jsxs(
41
+ "div",
75
42
  {
76
- src: card.props.image.src,
77
- alt: card.props.image.alt,
78
- className: "mb-4 size-12 min-h-12 min-w-12 rounded-full object-cover md:mb-0 md:mr-4"
79
- }
80
- ) }),
81
- /* @__PURE__ */ jsxs("div", { children: [
82
- /* @__PURE__ */ jsx("p", { className: "font-semibold", children: card.props.name }),
83
- /* @__PURE__ */ jsxs("p", { children: [
84
- /* @__PURE__ */ jsx("span", { children: card.props.position }),
85
- ", ",
86
- /* @__PURE__ */ jsx("span", { children: card.props.companyName })
87
- ] })
88
- ] })
89
- ] })
90
- ]
91
- },
92
- index
93
- );
94
- }
95
- return null;
96
- }) })
97
- ] }) });
43
+ className: cn("relative p-6 md:p-8 lg:p-6", {
44
+ "order-last lg:order-none": backgroundImageCardCount === 4
45
+ }),
46
+ children: [
47
+ /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex h-full flex-col items-start justify-between", children: [
48
+ /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold text-text-alternative md:text-3xl md:leading-[1.3] lg:text-4xl", children: card.props.heading }),
49
+ /* @__PURE__ */ jsx("div", { className: "mt-6 md:mt-8", children: /* @__PURE__ */ jsx(
50
+ Button,
51
+ {
52
+ variant: card.props.button.variant,
53
+ size: card.props.button.size,
54
+ children: card.props.button.label
55
+ }
56
+ ) })
57
+ ] }),
58
+ /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-0", children: [
59
+ /* @__PURE__ */ jsx(
60
+ CompoundImage,
61
+ {
62
+ src: card.props.backgroundImage.src,
63
+ className: "size-full object-cover",
64
+ alt: card.props.backgroundImage.alt
65
+ }
66
+ ),
67
+ /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50" })
68
+ ] })
69
+ ]
70
+ },
71
+ index
72
+ );
73
+ } else if (card.component === "logo") {
74
+ logoCardCount++;
75
+ return /* @__PURE__ */ jsx(
76
+ "div",
77
+ {
78
+ className: cn(
79
+ "flex items-center justify-center border border-border-primary p-6 md:p-8 lg:p-6",
80
+ {
81
+ "sm:col-start-2 sm:col-end-3 sm:row-start-4 sm:row-end-5 lg:col-auto lg:row-auto": logoCardCount === 3
82
+ }
83
+ ),
84
+ children: /* @__PURE__ */ jsx(
85
+ CompoundImage,
86
+ {
87
+ src: card.props.logo.src,
88
+ alt: card.props.logo.alt,
89
+ className: "max-h-16"
90
+ }
91
+ )
92
+ },
93
+ index
94
+ );
95
+ } else if (card.component === "quote") {
96
+ return /* @__PURE__ */ jsxs(
97
+ "div",
98
+ {
99
+ className: "flex flex-col items-start justify-between border border-border-primary p-6 sm:col-span-2 md:p-8",
100
+ children: [
101
+ /* @__PURE__ */ jsx("div", { className: "mb-5 flex md:mb-6", children: Array(card.props.numberOfStars).fill(null).map((_, i) => /* @__PURE__ */ jsx(BiSolidStar, { className: "size-6" }, i)) }),
102
+ /* @__PURE__ */ jsx("blockquote", { className: "md:text-md", children: card.props.quote }),
103
+ /* @__PURE__ */ jsxs("div", { className: "mt-5 flex w-full flex-col items-start md:mt-6 md:w-fit md:flex-row md:items-center", children: [
104
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
105
+ CompoundImage,
106
+ {
107
+ src: card.props.image.src,
108
+ alt: card.props.image.alt,
109
+ className: "mb-4 size-12 min-h-12 min-w-12 rounded-full object-cover md:mb-0 md:mr-4"
110
+ }
111
+ ) }),
112
+ /* @__PURE__ */ jsxs("div", { children: [
113
+ /* @__PURE__ */ jsx("p", { className: "font-semibold", children: card.props.name }),
114
+ /* @__PURE__ */ jsxs("p", { children: [
115
+ /* @__PURE__ */ jsx("span", { children: card.props.position }),
116
+ ",",
117
+ " ",
118
+ /* @__PURE__ */ jsx("span", { children: card.props.companyName })
119
+ ] })
120
+ ] })
121
+ ] })
122
+ ]
123
+ },
124
+ index
125
+ );
126
+ }
127
+ return null;
128
+ })
129
+ }
130
+ )
131
+ ] })
132
+ }
133
+ );
98
134
  };
99
135
  const BentoTestimonialDefaults = {
100
136
  heading: "Customer testimonials",
@@ -103,21 +139,32 @@ const BentoTestimonialDefaults = {
103
139
  {
104
140
  component: "background",
105
141
  props: {
106
- backgroundImage: { src: "https://picsum.photos/seed/bento-bg-1/600/400", alt: "Background image 1" },
142
+ backgroundImage: {
143
+ src: "https://picsum.photos/seed/bento-bg-1/600/400",
144
+ alt: "Background image 1"
145
+ },
107
146
  heading: "Short heading goes here",
108
147
  button: { label: "Button", variant: "link" }
109
148
  }
110
149
  },
111
150
  {
112
151
  component: "logo",
113
- props: { logo: { src: "https://d22po4pjz3o32e.cloudfront.net/logo-1.svg", alt: "Logo 1" } }
152
+ props: {
153
+ logo: {
154
+ src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/google-icon.svg",
155
+ alt: "Logo 1"
156
+ }
157
+ }
114
158
  },
115
159
  {
116
160
  component: "quote",
117
161
  props: {
118
162
  numberOfStars: 5,
119
163
  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."',
120
- image: { src: "https://picsum.photos/seed/bento-avatar-1/100/100", alt: "Testimonial image 1" },
164
+ image: {
165
+ src: "https://picsum.photos/seed/bento-avatar-1/100/100",
166
+ alt: "Testimonial image 1"
167
+ },
121
168
  name: "Name Surname",
122
169
  position: "Position",
123
170
  companyName: "Company name"
@@ -125,24 +172,40 @@ const BentoTestimonialDefaults = {
125
172
  },
126
173
  {
127
174
  component: "logo",
128
- props: { logo: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 1" } }
175
+ props: {
176
+ logo: {
177
+ src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/figma.svg",
178
+ alt: "Webflow logo 1"
179
+ }
180
+ }
129
181
  },
130
182
  {
131
183
  component: "background",
132
184
  props: {
133
- backgroundImage: { src: "https://picsum.photos/seed/bento-bg-2/600/400", alt: "Background image 2" },
185
+ backgroundImage: {
186
+ src: "https://picsum.photos/seed/bento-bg-2/600/400",
187
+ alt: "Background image 2"
188
+ },
134
189
  heading: "Short heading goes here",
135
190
  button: { label: "Button", variant: "link" }
136
191
  }
137
192
  },
138
193
  {
139
194
  component: "logo",
140
- props: { logo: { src: "https://file.springbrand.ai/web_assets/template-logo.svg", alt: "Logo 2" } }
195
+ props: {
196
+ logo: {
197
+ src: "https://file.springbrand.ai/web_assets/template-logo.svg",
198
+ alt: "Logo 2"
199
+ }
200
+ }
141
201
  },
142
202
  {
143
203
  component: "background",
144
204
  props: {
145
- backgroundImage: { src: "https://picsum.photos/seed/bento-bg-3/600/400", alt: "Background image 3" },
205
+ backgroundImage: {
206
+ src: "https://picsum.photos/seed/bento-bg-3/600/400",
207
+ alt: "Background image 3"
208
+ },
146
209
  heading: "Short heading goes here",
147
210
  button: { label: "Button", variant: "link" }
148
211
  }
@@ -152,7 +215,10 @@ const BentoTestimonialDefaults = {
152
215
  props: {
153
216
  numberOfStars: 5,
154
217
  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare."',
155
- image: { src: "https://picsum.photos/seed/bento-avatar-2/100/100", alt: "Testimonial image 2" },
218
+ image: {
219
+ src: "https://picsum.photos/seed/bento-avatar-2/100/100",
220
+ alt: "Testimonial image 2"
221
+ },
156
222
  name: "Name Surname",
157
223
  position: "Position",
158
224
  companyName: "Company name"
@@ -161,14 +227,22 @@ const BentoTestimonialDefaults = {
161
227
  {
162
228
  component: "background",
163
229
  props: {
164
- backgroundImage: { src: "https://picsum.photos/seed/bento-bg-4/600/400", alt: "Background image 4" },
230
+ backgroundImage: {
231
+ src: "https://picsum.photos/seed/bento-bg-4/600/400",
232
+ alt: "Background image 4"
233
+ },
165
234
  heading: "Short heading goes here",
166
235
  button: { label: "Button", variant: "link" }
167
236
  }
168
237
  },
169
238
  {
170
239
  component: "logo",
171
- props: { logo: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 2" } }
240
+ props: {
241
+ logo: {
242
+ src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/figma.svg",
243
+ alt: "Webflow logo 2"
244
+ }
245
+ }
172
246
  }
173
247
  ],
174
248
  styles: {
@@ -24,37 +24,80 @@ const CenteredTestimonial = (props) => {
24
24
  ratingType = "logo",
25
25
  attributionLayout = "stacked"
26
26
  } = styles ?? {};
27
- return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container w-full max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center", children: [
28
- ratingType === "logo" && logo && /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt, className: "max-h-14" }) }),
29
- ratingType === "stars" && /* @__PURE__ */ jsx("div", { className: "mb-6 flex md:mb-8", children: Array(numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
30
- /* @__PURE__ */ jsx("blockquote", { className: "text-xl font-bold md:text-2xl", children: quote }),
31
- /* @__PURE__ */ jsxs("div", { className: `mt-6 flex items-center justify-center md:mt-8 ${attributionLayout === "stacked" ? "flex-col" : "flex-row gap-4"}`, children: [
32
- avatar && /* @__PURE__ */ jsx("div", { className: attributionLayout === "stacked" ? "mb-3 md:mb-4" : "", children: /* @__PURE__ */ jsx(
33
- CompoundImage,
34
- {
35
- src: avatar.src,
36
- alt: avatar.alt,
37
- className: "size-16 min-h-16 min-w-16 rounded-full object-cover"
38
- }
39
- ) }),
40
- /* @__PURE__ */ jsxs("div", { className: `flex flex-col ${attributionLayout === "stacked" ? "items-center" : "items-start"}`, children: [
41
- /* @__PURE__ */ jsx("p", { className: "font-semibold", children: name }),
42
- /* @__PURE__ */ jsxs("p", { children: [
43
- /* @__PURE__ */ jsx("span", { children: position }),
44
- ", ",
45
- /* @__PURE__ */ jsx("span", { children: companyName })
46
- ] })
47
- ] }),
48
- attributionLayout === "inline" && ratingType === "logo" && logo && /* @__PURE__ */ jsxs(Fragment, { children: [
49
- /* @__PURE__ */ jsx("div", { className: "mx-4 w-px self-stretch bg-background-alternative" }),
50
- /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt, className: "max-h-12" })
51
- ] })
52
- ] })
53
- ] }) }) });
27
+ return /* @__PURE__ */ jsx(
28
+ SectionWrapper,
29
+ {
30
+ className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
31
+ style: sectionStyle,
32
+ css,
33
+ children: /* @__PURE__ */ jsx("div", { className: "container w-full max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center", children: [
34
+ ratingType === "logo" && logo && /* @__PURE__ */ jsx("div", { className: "mb-6 md:mb-8", children: /* @__PURE__ */ jsx(
35
+ CompoundImage,
36
+ {
37
+ src: logo.src,
38
+ alt: logo.alt,
39
+ className: "max-h-14"
40
+ }
41
+ ) }),
42
+ ratingType === "stars" && /* @__PURE__ */ jsx("div", { className: "mb-6 flex md:mb-8", children: Array(numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "mr-1 size-6" }, starIndex)) }),
43
+ /* @__PURE__ */ jsx("blockquote", { className: "text-xl font-bold md:text-2xl", children: quote }),
44
+ /* @__PURE__ */ jsxs(
45
+ "div",
46
+ {
47
+ className: `mt-6 flex items-center justify-center md:mt-8 ${attributionLayout === "stacked" ? "flex-col" : "flex-row gap-4"}`,
48
+ children: [
49
+ avatar && /* @__PURE__ */ jsx(
50
+ "div",
51
+ {
52
+ className: attributionLayout === "stacked" ? "mb-3 md:mb-4" : "",
53
+ children: /* @__PURE__ */ jsx(
54
+ CompoundImage,
55
+ {
56
+ src: avatar.src,
57
+ alt: avatar.alt,
58
+ className: "size-16 min-h-16 min-w-16 rounded-full object-cover"
59
+ }
60
+ )
61
+ }
62
+ ),
63
+ /* @__PURE__ */ jsxs(
64
+ "div",
65
+ {
66
+ className: `flex flex-col ${attributionLayout === "stacked" ? "items-center" : "items-start"}`,
67
+ children: [
68
+ /* @__PURE__ */ jsx("p", { className: "font-semibold", children: name }),
69
+ /* @__PURE__ */ jsxs("p", { children: [
70
+ /* @__PURE__ */ jsx("span", { children: position }),
71
+ ", ",
72
+ /* @__PURE__ */ jsx("span", { children: companyName })
73
+ ] })
74
+ ]
75
+ }
76
+ ),
77
+ attributionLayout === "inline" && ratingType === "logo" && logo && /* @__PURE__ */ jsxs(Fragment, { children: [
78
+ /* @__PURE__ */ jsx("div", { className: "mx-4 w-px self-stretch bg-background-alternative" }),
79
+ /* @__PURE__ */ jsx(
80
+ CompoundImage,
81
+ {
82
+ src: logo.src,
83
+ alt: logo.alt,
84
+ className: "max-h-12"
85
+ }
86
+ )
87
+ ] })
88
+ ]
89
+ }
90
+ )
91
+ ] }) })
92
+ }
93
+ );
54
94
  };
55
95
  const CenteredTestimonialDefaults = {
56
96
  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."',
57
- logo: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo" },
97
+ logo: {
98
+ src: "https://file.springbrand.ai/web_assets/template-logo.svg",
99
+ alt: "Webflow logo"
100
+ },
58
101
  avatar: {
59
102
  src: "https://picsum.photos/seed/testimonial-avatar/100/100",
60
103
  alt: "Testimonial avatar"
@@ -5,15 +5,7 @@ import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
5
5
  import { cn } from "../../../../utils/css-utils.js";
6
6
  const ImageTestimonial = (props) => {
7
7
  var _a, _b, _c, _d;
8
- const {
9
- numberOfStars,
10
- quote,
11
- images,
12
- name,
13
- position,
14
- logo,
15
- styles
16
- } = {
8
+ const { numberOfStars, quote, images, name, position, logo, styles } = {
17
9
  ...ImageTestimonialDefaults,
18
10
  ...props
19
11
  };
@@ -23,32 +15,77 @@ const ImageTestimonial = (props) => {
23
15
  css,
24
16
  mediaType = "image"
25
17
  } = styles ?? {};
26
- return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full auto-cols-fr grid-cols-1 items-center justify-center gap-12 md:grid-cols-2 md:gap-10 lg:gap-x-20", children: [
27
- /* @__PURE__ */ jsx("div", { className: "order-last md:order-first", children: mediaType === "image" ? /* @__PURE__ */ jsx(CompoundImage, { src: ((_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.src) ?? "", alt: ((_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.alt) ?? "", className: "aspect-square w-full object-cover" }) : /* @__PURE__ */ jsxs("div", { className: "relative aspect-square w-full", children: [
28
- /* @__PURE__ */ jsx(CompoundImage, { src: ((_c = images == null ? void 0 : images[0]) == null ? void 0 : _c.src) ?? "", alt: ((_d = images == null ? void 0 : images[0]) == null ? void 0 : _d.alt) ?? "", className: "size-full object-cover" }),
29
- /* @__PURE__ */ jsx("button", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx("svg", { className: "size-6 text-black", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("polygon", { points: "5,3 19,12 5,21" }) }) }) })
30
- ] }) }),
31
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
32
- /* @__PURE__ */ jsx("div", { className: "mb-6 flex md:mb-8", children: Array(numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "size-6" }, starIndex)) }),
33
- /* @__PURE__ */ jsx("blockquote", { className: "text-xl font-bold md:text-2xl", children: quote }),
34
- /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-nowrap items-center gap-5 md:mt-8", children: [
35
- /* @__PURE__ */ jsxs("div", { children: [
36
- /* @__PURE__ */ jsx("p", { className: "font-semibold", children: name }),
37
- /* @__PURE__ */ jsx("p", { children: position })
38
- ] }),
39
- /* @__PURE__ */ jsx("div", { className: "mx-4 w-px self-stretch bg-background-alternative sm:mx-0" }),
40
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundImage, { src: logo.src, alt: logo.alt, className: "max-h-12" }) })
41
- ] })
42
- ] })
43
- ] }) }) });
18
+ return /* @__PURE__ */ jsx(
19
+ SectionWrapper,
20
+ {
21
+ className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
22
+ style: sectionStyle,
23
+ css,
24
+ children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full auto-cols-fr grid-cols-1 items-center justify-center gap-12 md:grid-cols-2 md:gap-10 lg:gap-x-20", children: [
25
+ /* @__PURE__ */ jsx("div", { className: "order-last md:order-first", children: mediaType === "image" ? /* @__PURE__ */ jsx(
26
+ CompoundImage,
27
+ {
28
+ src: ((_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.src) ?? "",
29
+ alt: ((_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.alt) ?? "",
30
+ className: "aspect-square w-full object-cover"
31
+ }
32
+ ) : /* @__PURE__ */ jsxs("div", { className: "relative aspect-square w-full", children: [
33
+ /* @__PURE__ */ jsx(
34
+ CompoundImage,
35
+ {
36
+ src: ((_c = images == null ? void 0 : images[0]) == null ? void 0 : _c.src) ?? "",
37
+ alt: ((_d = images == null ? void 0 : images[0]) == null ? void 0 : _d.alt) ?? "",
38
+ className: "size-full object-cover"
39
+ }
40
+ ),
41
+ /* @__PURE__ */ jsx("button", { className: "absolute inset-0 flex items-center justify-center bg-black/30", children: /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx(
42
+ "svg",
43
+ {
44
+ className: "size-6 text-black",
45
+ viewBox: "0 0 24 24",
46
+ fill: "currentColor",
47
+ children: /* @__PURE__ */ jsx("polygon", { points: "5,3 19,12 5,21" })
48
+ }
49
+ ) }) })
50
+ ] }) }),
51
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
52
+ /* @__PURE__ */ jsx("div", { className: "mb-6 flex md:mb-8", children: Array(numberOfStars).fill(null).map((_, starIndex) => /* @__PURE__ */ jsx(BiSolidStar, { className: "size-6" }, starIndex)) }),
53
+ /* @__PURE__ */ jsx("blockquote", { className: "text-xl font-bold md:text-2xl", children: quote }),
54
+ /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-nowrap items-center gap-5 md:mt-8", children: [
55
+ /* @__PURE__ */ jsxs("div", { children: [
56
+ /* @__PURE__ */ jsx("p", { className: "font-semibold", children: name }),
57
+ /* @__PURE__ */ jsx("p", { children: position })
58
+ ] }),
59
+ /* @__PURE__ */ jsx("div", { className: "mx-4 w-px self-stretch bg-background-alternative sm:mx-0" }),
60
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
61
+ CompoundImage,
62
+ {
63
+ src: logo.src,
64
+ alt: logo.alt,
65
+ className: "max-h-12"
66
+ }
67
+ ) })
68
+ ] })
69
+ ] })
70
+ ] }) })
71
+ }
72
+ );
44
73
  };
45
74
  const ImageTestimonialDefaults = {
46
75
  numberOfStars: 5,
47
76
  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."',
48
- images: [{ src: "https://picsum.photos/seed/image-testimonial/800/800", alt: "Testimonial image" }],
77
+ images: [
78
+ {
79
+ src: "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=800&h=800&fit=crop",
80
+ alt: "Testimonial image"
81
+ }
82
+ ],
49
83
  name: "Name Surname",
50
84
  position: "Position, Company name",
51
- logo: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo" },
85
+ logo: {
86
+ src: "https://file.springbrand.ai/web_assets/template-logo.svg",
87
+ alt: "Webflow logo"
88
+ },
52
89
  styles: {
53
90
  mediaType: "image"
54
91
  }
@@ -90,7 +90,7 @@ const testimonial = {
90
90
  name: "Name Surname",
91
91
  position: "Position",
92
92
  companyName: "Company name",
93
- logo: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo" }
93
+ logo: { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/netflix.svg", alt: "Webflow logo" }
94
94
  };
95
95
  const ImageTestimonialCarouselDefaults = {
96
96
  testimonials: [testimonial, testimonial],
@@ -25,7 +25,7 @@ const TabTestimonial = (props) => {
25
25
  TabsContent,
26
26
  {
27
27
  value: tab2.value,
28
- className: "data-[state=active]:animate-tabs",
28
+ className: "animate-tabs",
29
29
  children: /* @__PURE__ */ jsxs("div", { className: `flex w-full items-center ${hasImage ? "flex-col md:flex-row" : "justify-center"} px-6 pb-10 pt-6 md:p-8 lg:px-12 lg:py-16`, children: [
30
30
  hasImage && tab2.image && /* @__PURE__ */ jsx("div", { className: "mb-6 w-full md:mb-0 md:w-1/2 md:pr-8", children: /* @__PURE__ */ jsx(CompoundImage, { src: tab2.image.src, alt: tab2.image.alt, className: "aspect-square w-full object-cover" }) }),
31
31
  /* @__PURE__ */ jsxs("div", { className: `${hasImage ? "w-full md:w-1/2" : "mx-auto w-full max-w-lg text-center"}`, children: [
@@ -56,11 +56,11 @@ const TabTestimonial = (props) => {
56
56
  },
57
57
  tab2.value
58
58
  )),
59
- /* @__PURE__ */ jsx(TabsList, { className: "flex-col md:flex-row", children: tabs.map((tab2, index) => /* @__PURE__ */ jsx(
59
+ /* @__PURE__ */ jsx(TabsList, { className: "flex h-auto w-full flex-col rounded-none bg-transparent p-0 group-data-horizontal/tabs:h-auto md:flex-row", children: tabs.map((tab2, index) => /* @__PURE__ */ jsx(
60
60
  TabsTrigger,
61
61
  {
62
62
  value: tab2.value,
63
- className: "flex w-full items-center justify-center gap-4 border-0 border-t px-6 py-4 duration-0 data-[state=active]:bg-background-primary md:border-r md:px-8 md:py-6 md:last-of-type:border-r-0 md:data-[state=active]:[border-top:1px_solid_#fff]",
63
+ className: "flex h-auto w-full items-center justify-center gap-4 rounded-none border-0 border-t px-6 py-4 duration-0 data-active:bg-background-primary md:border-r md:px-8 md:py-6 md:last-of-type:border-r-0 md:data-active:[border-top:1px_solid_#fff]",
64
64
  children: /* @__PURE__ */ jsx(
65
65
  CompoundImage,
66
66
  {
@@ -77,7 +77,7 @@ const TabTestimonial = (props) => {
77
77
  };
78
78
  const tab = {
79
79
  value: "tab-1",
80
- trigger: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo" },
80
+ trigger: { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/slack.svg", alt: "Webflow logo" },
81
81
  content: {
82
82
  numberOfStars: 5,
83
83
  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."',
@@ -65,7 +65,7 @@ const TestimonialCardGridDefaults = {
65
65
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
66
66
  testimonials: [
67
67
  {
68
- image: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 1" },
68
+ image: { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/discord.svg", alt: "Webflow logo 1" },
69
69
  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."',
70
70
  avatar: { src: "https://picsum.photos/seed/testimonial-1/100/100", alt: "Testimonial avatar 1" },
71
71
  name: "Name Surname",
@@ -73,7 +73,7 @@ const TestimonialCardGridDefaults = {
73
73
  numberOfStars: 5
74
74
  },
75
75
  {
76
- image: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 2" },
76
+ image: { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/discord.svg", alt: "Webflow logo 2" },
77
77
  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."',
78
78
  avatar: { src: "https://picsum.photos/seed/testimonial-2/100/100", alt: "Testimonial avatar 2" },
79
79
  name: "Name Surname",
@@ -97,7 +97,7 @@ const TestimonialCarousel = (props) => {
97
97
  };
98
98
  const testimonial = {
99
99
  quote: '"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."',
100
- logo: { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo" },
100
+ logo: { src: "https://cdn.jsdelivr.net/gh/gilbarbara/logos/logos/airbnb.svg", alt: "Webflow logo" },
101
101
  avatar: { src: "https://picsum.photos/seed/testimonial-carousel/100/100", alt: "Testimonial avatar" },
102
102
  name: "Name Surname",
103
103
  position: "Position, Company name",