@opensite/ui 1.7.2 → 1.7.3
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/contact-dark.cjs +137 -95
- package/dist/contact-dark.css +279 -0
- package/dist/contact-dark.d.cts +1 -1
- package/dist/contact-dark.d.ts +1 -1
- package/dist/contact-dark.js +138 -96
- package/dist/contact-faq.cjs +49 -16
- package/dist/contact-faq.css +279 -0
- package/dist/contact-faq.d.cts +1 -1
- package/dist/contact-faq.d.ts +1 -1
- package/dist/contact-faq.js +46 -13
- package/dist/contact-photography.cjs +53 -20
- package/dist/contact-photography.css +279 -0
- package/dist/contact-photography.d.cts +1 -1
- package/dist/contact-photography.d.ts +1 -1
- package/dist/contact-photography.js +49 -16
- package/dist/hero-premium-split-avatars.cjs +1 -1
- package/dist/hero-premium-split-avatars.d.cts +1 -1
- package/dist/hero-premium-split-avatars.d.ts +1 -1
- package/dist/hero-premium-split-avatars.js +1 -1
- package/dist/registry.cjs +240 -126
- package/dist/registry.css +279 -0
- package/dist/registry.js +240 -126
- package/package.json +4 -4
|
@@ -0,0 +1,279 @@
|
|
|
1
|
+
/* components/styles/forms.css */
|
|
2
|
+
.text-input {
|
|
3
|
+
display: flex;
|
|
4
|
+
height: 2.25rem;
|
|
5
|
+
width: 100%;
|
|
6
|
+
border-radius: 0.375rem;
|
|
7
|
+
border: 1px solid var(--input);
|
|
8
|
+
background-color: transparent;
|
|
9
|
+
padding: 0.25rem 0.75rem;
|
|
10
|
+
font-size: 1rem;
|
|
11
|
+
line-height: 1.5rem;
|
|
12
|
+
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
13
|
+
transition-property:
|
|
14
|
+
color,
|
|
15
|
+
background-color,
|
|
16
|
+
border-color,
|
|
17
|
+
text-decoration-color,
|
|
18
|
+
fill,
|
|
19
|
+
stroke;
|
|
20
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
21
|
+
transition-duration: 150ms;
|
|
22
|
+
}
|
|
23
|
+
.text-input::placeholder {
|
|
24
|
+
color: var(--muted-foreground);
|
|
25
|
+
}
|
|
26
|
+
.text-input:focus-visible {
|
|
27
|
+
outline: none;
|
|
28
|
+
ring: 1px;
|
|
29
|
+
ring-color: var(--ring);
|
|
30
|
+
}
|
|
31
|
+
.text-input:disabled {
|
|
32
|
+
cursor: not-allowed;
|
|
33
|
+
opacity: 0.5;
|
|
34
|
+
}
|
|
35
|
+
.text-input--error {
|
|
36
|
+
border-color: rgb(239 68 68);
|
|
37
|
+
ring: 1px;
|
|
38
|
+
ring-color: rgb(239 68 68);
|
|
39
|
+
}
|
|
40
|
+
.textarea {
|
|
41
|
+
display: flex;
|
|
42
|
+
min-height: 5rem;
|
|
43
|
+
width: 100%;
|
|
44
|
+
border-radius: 0.375rem;
|
|
45
|
+
border: 1px solid var(--input);
|
|
46
|
+
background-color: transparent;
|
|
47
|
+
padding: 0.5rem 0.75rem;
|
|
48
|
+
font-size: 1rem;
|
|
49
|
+
line-height: 1.5rem;
|
|
50
|
+
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
51
|
+
transition-property:
|
|
52
|
+
color,
|
|
53
|
+
background-color,
|
|
54
|
+
border-color,
|
|
55
|
+
text-decoration-color,
|
|
56
|
+
fill,
|
|
57
|
+
stroke;
|
|
58
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
59
|
+
transition-duration: 150ms;
|
|
60
|
+
}
|
|
61
|
+
.textarea::placeholder {
|
|
62
|
+
color: var(--muted-foreground);
|
|
63
|
+
}
|
|
64
|
+
.textarea:focus-visible {
|
|
65
|
+
outline: none;
|
|
66
|
+
ring: 1px;
|
|
67
|
+
ring-color: var(--ring);
|
|
68
|
+
}
|
|
69
|
+
.textarea:disabled {
|
|
70
|
+
cursor: not-allowed;
|
|
71
|
+
opacity: 0.5;
|
|
72
|
+
}
|
|
73
|
+
.textarea--error {
|
|
74
|
+
border-color: rgb(239 68 68);
|
|
75
|
+
ring: 1px;
|
|
76
|
+
ring-color: rgb(239 68 68);
|
|
77
|
+
}
|
|
78
|
+
.select {
|
|
79
|
+
position: relative;
|
|
80
|
+
width: 100%;
|
|
81
|
+
}
|
|
82
|
+
.select-trigger {
|
|
83
|
+
display: flex;
|
|
84
|
+
height: 2.25rem;
|
|
85
|
+
width: 100%;
|
|
86
|
+
align-items: center;
|
|
87
|
+
justify-content: space-between;
|
|
88
|
+
white-space: nowrap;
|
|
89
|
+
border-radius: 0.375rem;
|
|
90
|
+
border: 1px solid var(--input);
|
|
91
|
+
background-color: transparent;
|
|
92
|
+
padding: 0.5rem 0.75rem;
|
|
93
|
+
font-size: 0.875rem;
|
|
94
|
+
line-height: 1.25rem;
|
|
95
|
+
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
transition-property:
|
|
98
|
+
color,
|
|
99
|
+
background-color,
|
|
100
|
+
border-color,
|
|
101
|
+
text-decoration-color,
|
|
102
|
+
fill,
|
|
103
|
+
stroke;
|
|
104
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
105
|
+
transition-duration: 150ms;
|
|
106
|
+
}
|
|
107
|
+
.select-trigger:hover {
|
|
108
|
+
background-color: var(--accent);
|
|
109
|
+
}
|
|
110
|
+
.select-trigger:focus-visible {
|
|
111
|
+
outline: none;
|
|
112
|
+
ring: 1px;
|
|
113
|
+
ring-color: var(--ring);
|
|
114
|
+
}
|
|
115
|
+
.select-trigger[aria-disabled=true] {
|
|
116
|
+
cursor: not-allowed;
|
|
117
|
+
opacity: 0.5;
|
|
118
|
+
pointer-events: none;
|
|
119
|
+
}
|
|
120
|
+
.select--error .select-trigger {
|
|
121
|
+
border-color: rgb(239 68 68);
|
|
122
|
+
ring: 1px;
|
|
123
|
+
ring-color: rgb(239 68 68);
|
|
124
|
+
}
|
|
125
|
+
.select-value {
|
|
126
|
+
display: flex;
|
|
127
|
+
align-items: center;
|
|
128
|
+
flex: 1;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
text-overflow: ellipsis;
|
|
131
|
+
}
|
|
132
|
+
.select-placeholder {
|
|
133
|
+
color: var(--muted-foreground);
|
|
134
|
+
}
|
|
135
|
+
.select-icons {
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
gap: 0.25rem;
|
|
139
|
+
margin-left: 0.5rem;
|
|
140
|
+
}
|
|
141
|
+
.select-clear {
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
justify-content: center;
|
|
145
|
+
height: 1rem;
|
|
146
|
+
width: 1rem;
|
|
147
|
+
border-radius: 0.125rem;
|
|
148
|
+
border: none;
|
|
149
|
+
background: transparent;
|
|
150
|
+
color: var(--muted-foreground);
|
|
151
|
+
cursor: pointer;
|
|
152
|
+
font-size: 0.75rem;
|
|
153
|
+
padding: 0;
|
|
154
|
+
transition: opacity 150ms;
|
|
155
|
+
}
|
|
156
|
+
.select-clear:hover {
|
|
157
|
+
opacity: 0.7;
|
|
158
|
+
}
|
|
159
|
+
.select-arrow {
|
|
160
|
+
color: var(--muted-foreground);
|
|
161
|
+
font-size: 0.75rem;
|
|
162
|
+
line-height: 1;
|
|
163
|
+
}
|
|
164
|
+
.select-loading {
|
|
165
|
+
font-size: 0.75rem;
|
|
166
|
+
}
|
|
167
|
+
.select-dropdown {
|
|
168
|
+
position: absolute;
|
|
169
|
+
z-index: 50;
|
|
170
|
+
top: 100%;
|
|
171
|
+
margin-top: 0.25rem;
|
|
172
|
+
min-width: 100%;
|
|
173
|
+
overflow: hidden;
|
|
174
|
+
border-radius: 0.375rem;
|
|
175
|
+
border: 1px solid var(--border);
|
|
176
|
+
background-color: var(--popover);
|
|
177
|
+
color: var(--popover-foreground);
|
|
178
|
+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
179
|
+
}
|
|
180
|
+
.select-search {
|
|
181
|
+
padding: 0.5rem;
|
|
182
|
+
border-bottom: 1px solid var(--border);
|
|
183
|
+
}
|
|
184
|
+
.select-search-input {
|
|
185
|
+
width: 100%;
|
|
186
|
+
border: 1px solid var(--input);
|
|
187
|
+
border-radius: 0.25rem;
|
|
188
|
+
padding: 0.25rem 0.5rem;
|
|
189
|
+
font-size: 0.875rem;
|
|
190
|
+
background-color: transparent;
|
|
191
|
+
outline: none;
|
|
192
|
+
}
|
|
193
|
+
.select-search-input:focus {
|
|
194
|
+
ring: 1px;
|
|
195
|
+
ring-color: var(--ring);
|
|
196
|
+
}
|
|
197
|
+
.select-options {
|
|
198
|
+
max-height: 16rem;
|
|
199
|
+
overflow-y: auto;
|
|
200
|
+
padding: 0.25rem;
|
|
201
|
+
}
|
|
202
|
+
.select-option {
|
|
203
|
+
position: relative;
|
|
204
|
+
display: flex;
|
|
205
|
+
width: 100%;
|
|
206
|
+
cursor: pointer;
|
|
207
|
+
align-items: center;
|
|
208
|
+
border-radius: 0.25rem;
|
|
209
|
+
padding: 0.375rem 0.5rem 0.375rem 2rem;
|
|
210
|
+
font-size: 0.875rem;
|
|
211
|
+
outline: none;
|
|
212
|
+
transition-property: color, background-color;
|
|
213
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
214
|
+
transition-duration: 150ms;
|
|
215
|
+
}
|
|
216
|
+
.select-option:hover {
|
|
217
|
+
background-color: var(--accent);
|
|
218
|
+
color: var(--accent-foreground);
|
|
219
|
+
}
|
|
220
|
+
.select-option--focused {
|
|
221
|
+
background-color: var(--accent);
|
|
222
|
+
color: var(--accent-foreground);
|
|
223
|
+
}
|
|
224
|
+
.select-option--selected {
|
|
225
|
+
font-weight: 500;
|
|
226
|
+
background-color: var(--accent);
|
|
227
|
+
}
|
|
228
|
+
.select-option--disabled {
|
|
229
|
+
pointer-events: none;
|
|
230
|
+
opacity: 0.5;
|
|
231
|
+
}
|
|
232
|
+
.select-no-options {
|
|
233
|
+
padding: 0.5rem 0.75rem;
|
|
234
|
+
text-align: center;
|
|
235
|
+
font-size: 0.875rem;
|
|
236
|
+
color: var(--muted-foreground);
|
|
237
|
+
}
|
|
238
|
+
.select-optgroup {
|
|
239
|
+
padding: 0.25rem 0;
|
|
240
|
+
}
|
|
241
|
+
.select-optgroup-label {
|
|
242
|
+
padding: 0.375rem 0.5rem;
|
|
243
|
+
font-size: 0.75rem;
|
|
244
|
+
font-weight: 600;
|
|
245
|
+
color: var(--muted-foreground);
|
|
246
|
+
}
|
|
247
|
+
.field-label {
|
|
248
|
+
display: block;
|
|
249
|
+
font-size: 0.875rem;
|
|
250
|
+
font-weight: 500;
|
|
251
|
+
line-height: 1.25rem;
|
|
252
|
+
margin-bottom: 0.5rem;
|
|
253
|
+
color: var(--foreground);
|
|
254
|
+
}
|
|
255
|
+
.field-required {
|
|
256
|
+
color: rgb(239 68 68);
|
|
257
|
+
margin-left: 0.125rem;
|
|
258
|
+
}
|
|
259
|
+
.field-description {
|
|
260
|
+
font-size: 0.875rem;
|
|
261
|
+
color: var(--muted-foreground);
|
|
262
|
+
margin-bottom: 0.5rem;
|
|
263
|
+
}
|
|
264
|
+
.field-input {
|
|
265
|
+
}
|
|
266
|
+
.field-error {
|
|
267
|
+
font-size: 0.875rem;
|
|
268
|
+
font-weight: 500;
|
|
269
|
+
color: rgb(239 68 68);
|
|
270
|
+
margin-top: 0.5rem;
|
|
271
|
+
}
|
|
272
|
+
@media (min-width: 768px) {
|
|
273
|
+
.text-input,
|
|
274
|
+
.textarea,
|
|
275
|
+
.select-trigger {
|
|
276
|
+
font-size: 0.875rem;
|
|
277
|
+
line-height: 1.25rem;
|
|
278
|
+
}
|
|
279
|
+
}
|
|
@@ -80,6 +80,6 @@ interface ContactPhotographyProps {
|
|
|
80
80
|
* />
|
|
81
81
|
* ```
|
|
82
82
|
*/
|
|
83
|
-
declare function ContactPhotography({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className,
|
|
83
|
+
declare function ContactPhotography({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactPhotographyProps): React.JSX.Element;
|
|
84
84
|
|
|
85
85
|
export { ContactPhotography, type ContactPhotographyProps };
|
|
@@ -80,6 +80,6 @@ interface ContactPhotographyProps {
|
|
|
80
80
|
* />
|
|
81
81
|
* ```
|
|
82
82
|
*/
|
|
83
|
-
declare function ContactPhotography({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className,
|
|
83
|
+
declare function ContactPhotography({ heading, description, buttonText, buttonIcon, actions, actionsSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactPhotographyProps): React.JSX.Element;
|
|
84
84
|
|
|
85
85
|
export { ContactPhotography, type ContactPhotographyProps };
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default from 'react';
|
|
4
4
|
import { useForm, Form, Field } from '@page-speed/forms';
|
|
5
|
-
import { TextInput
|
|
5
|
+
import { TextInput, TextArea } from '@page-speed/forms/inputs';
|
|
6
6
|
import { clsx } from 'clsx';
|
|
7
7
|
import { twMerge } from 'tailwind-merge';
|
|
8
8
|
import { cva } from 'class-variance-authority';
|
|
@@ -11,8 +11,6 @@ import * as LabelPrimitive from '@radix-ui/react-label';
|
|
|
11
11
|
import { serializeForRails, deserializeErrors } from '@page-speed/forms/integration';
|
|
12
12
|
|
|
13
13
|
// components/blocks/contact/contact-photography.tsx
|
|
14
|
-
var TextInput = TextInput$1;
|
|
15
|
-
var TextArea = TextArea$1;
|
|
16
14
|
function cn(...inputs) {
|
|
17
15
|
return twMerge(clsx(inputs));
|
|
18
16
|
}
|
|
@@ -971,7 +969,6 @@ function ContactPhotography({
|
|
|
971
969
|
actions,
|
|
972
970
|
actionsSlot,
|
|
973
971
|
className,
|
|
974
|
-
containerClassName,
|
|
975
972
|
headerClassName,
|
|
976
973
|
headingClassName,
|
|
977
974
|
descriptionClassName,
|
|
@@ -979,10 +976,11 @@ function ContactPhotography({
|
|
|
979
976
|
cardContentClassName,
|
|
980
977
|
formClassName,
|
|
981
978
|
submitClassName,
|
|
982
|
-
background
|
|
983
|
-
spacing = "
|
|
979
|
+
background,
|
|
980
|
+
spacing = "py-8 md:py-32",
|
|
981
|
+
containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
|
|
984
982
|
pattern,
|
|
985
|
-
patternOpacity
|
|
983
|
+
patternOpacity,
|
|
986
984
|
formConfig,
|
|
987
985
|
onSubmit,
|
|
988
986
|
onSuccess,
|
|
@@ -1041,12 +1039,28 @@ function ContactPhotography({
|
|
|
1041
1039
|
if (actionsSlot) return actionsSlot;
|
|
1042
1040
|
if (actions && actions.length > 0) {
|
|
1043
1041
|
return actions.map((action, index) => {
|
|
1044
|
-
const {
|
|
1045
|
-
return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1046
|
-
icon,
|
|
1042
|
+
const {
|
|
1047
1043
|
label,
|
|
1048
|
-
|
|
1049
|
-
|
|
1044
|
+
icon,
|
|
1045
|
+
iconAfter,
|
|
1046
|
+
children,
|
|
1047
|
+
className: actionClassName,
|
|
1048
|
+
...pressableProps
|
|
1049
|
+
} = action;
|
|
1050
|
+
return /* @__PURE__ */ jsx(
|
|
1051
|
+
Pressable,
|
|
1052
|
+
{
|
|
1053
|
+
asButton: true,
|
|
1054
|
+
className: actionClassName,
|
|
1055
|
+
...pressableProps,
|
|
1056
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1057
|
+
icon,
|
|
1058
|
+
label,
|
|
1059
|
+
iconAfter
|
|
1060
|
+
] })
|
|
1061
|
+
},
|
|
1062
|
+
index
|
|
1063
|
+
);
|
|
1050
1064
|
});
|
|
1051
1065
|
}
|
|
1052
1066
|
return null;
|
|
@@ -1058,11 +1072,30 @@ function ContactPhotography({
|
|
|
1058
1072
|
spacing,
|
|
1059
1073
|
pattern,
|
|
1060
1074
|
patternOpacity,
|
|
1061
|
-
className
|
|
1062
|
-
|
|
1075
|
+
className,
|
|
1076
|
+
containerClassName,
|
|
1077
|
+
children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
1063
1078
|
/* @__PURE__ */ jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
|
|
1064
|
-
heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
1065
|
-
|
|
1079
|
+
heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
|
|
1080
|
+
"h2",
|
|
1081
|
+
{
|
|
1082
|
+
className: cn(
|
|
1083
|
+
"mb-3 text-3xl font-bold tracking-tight text-balance",
|
|
1084
|
+
headingClassName
|
|
1085
|
+
),
|
|
1086
|
+
children: heading
|
|
1087
|
+
}
|
|
1088
|
+
) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
|
|
1089
|
+
description && (typeof description === "string" ? /* @__PURE__ */ jsx(
|
|
1090
|
+
"p",
|
|
1091
|
+
{
|
|
1092
|
+
className: cn(
|
|
1093
|
+
"leading-relaxed text-balance",
|
|
1094
|
+
descriptionClassName
|
|
1095
|
+
),
|
|
1096
|
+
children: description
|
|
1097
|
+
}
|
|
1098
|
+
) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
|
|
1066
1099
|
] }),
|
|
1067
1100
|
/* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxs(
|
|
1068
1101
|
Form,
|
|
@@ -886,10 +886,10 @@ function HeroPremiumSplitAvatars({
|
|
|
886
886
|
image,
|
|
887
887
|
imageSlot,
|
|
888
888
|
background,
|
|
889
|
-
spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
|
|
890
889
|
pattern,
|
|
891
890
|
patternOpacity,
|
|
892
891
|
className,
|
|
892
|
+
spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
|
|
893
893
|
containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
|
|
894
894
|
contentClassName,
|
|
895
895
|
headingClassName,
|
|
@@ -109,6 +109,6 @@ interface HeroPremiumSplitAvatarsProps {
|
|
|
109
109
|
*/
|
|
110
110
|
optixFlowConfig?: OptixFlowConfig;
|
|
111
111
|
}
|
|
112
|
-
declare function HeroPremiumSplitAvatars({ brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, background,
|
|
112
|
+
declare function HeroPremiumSplitAvatars({ brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, background, pattern, patternOpacity, className, spacing, containerClassName, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroPremiumSplitAvatarsProps): React.JSX.Element;
|
|
113
113
|
|
|
114
114
|
export { HeroPremiumSplitAvatars, type HeroPremiumSplitAvatarsProps };
|
|
@@ -109,6 +109,6 @@ interface HeroPremiumSplitAvatarsProps {
|
|
|
109
109
|
*/
|
|
110
110
|
optixFlowConfig?: OptixFlowConfig;
|
|
111
111
|
}
|
|
112
|
-
declare function HeroPremiumSplitAvatars({ brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, background,
|
|
112
|
+
declare function HeroPremiumSplitAvatars({ brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, background, pattern, patternOpacity, className, spacing, containerClassName, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroPremiumSplitAvatarsProps): React.JSX.Element;
|
|
113
113
|
|
|
114
114
|
export { HeroPremiumSplitAvatars, type HeroPremiumSplitAvatarsProps };
|
|
@@ -864,10 +864,10 @@ function HeroPremiumSplitAvatars({
|
|
|
864
864
|
image,
|
|
865
865
|
imageSlot,
|
|
866
866
|
background,
|
|
867
|
-
spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
|
|
868
867
|
pattern,
|
|
869
868
|
patternOpacity,
|
|
870
869
|
className,
|
|
870
|
+
spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
|
|
871
871
|
containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
|
|
872
872
|
contentClassName,
|
|
873
873
|
headingClassName,
|