@lets-events/react 11.2.0 → 11.3.0

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 (56) hide show
  1. package/.eslintrc.json +2 -2
  2. package/.turbo/turbo-build.log +20 -18
  3. package/CHANGELOG.md +6 -0
  4. package/dist/index.d.mts +771 -12
  5. package/dist/index.d.ts +771 -12
  6. package/dist/index.js +283 -146
  7. package/dist/index.mjs +260 -125
  8. package/package.json +1 -1
  9. package/src/components/Alert.tsx +303 -303
  10. package/src/components/Avatar.tsx +55 -55
  11. package/src/components/Badge.tsx +128 -128
  12. package/src/components/Box.tsx +3 -3
  13. package/src/components/Button/index.tsx +16 -13
  14. package/src/components/Button/styledComponents.ts +287 -276
  15. package/src/components/ButtonGroup.tsx +484 -484
  16. package/src/components/Calendar/index.tsx +136 -136
  17. package/src/components/Calendar/styledComponents.ts +209 -209
  18. package/src/components/Card.tsx +48 -48
  19. package/src/components/CheckboxGroup.tsx +214 -214
  20. package/src/components/Container.tsx +39 -39
  21. package/src/components/Drawer/index.tsx +48 -0
  22. package/src/components/Drawer/styledComponents.ts +46 -0
  23. package/src/components/Dropdown.tsx +167 -167
  24. package/src/components/Filter.tsx +164 -164
  25. package/src/components/Flex.tsx +118 -118
  26. package/src/components/FormFields/ErrorFormMessage.tsx +36 -36
  27. package/src/components/FormFields/Form.tsx +25 -25
  28. package/src/components/FormFields/FormLabel.tsx +29 -29
  29. package/src/components/FormFields/TextAreaFormField.tsx +46 -46
  30. package/src/components/FormFields/TextFormField.tsx +46 -46
  31. package/src/components/Grid.tsx +137 -137
  32. package/src/components/Icon.tsx +47 -47
  33. package/src/components/MenuDropdown/index.tsx +30 -0
  34. package/src/components/MenuDropdown/styledComponents.ts +31 -0
  35. package/src/components/Modal.tsx +90 -90
  36. package/src/components/RadioGroup.tsx +210 -210
  37. package/src/components/Section.tsx +33 -33
  38. package/src/components/Step.tsx +164 -164
  39. package/src/components/Switch.tsx +108 -108
  40. package/src/components/Text.tsx +39 -39
  41. package/src/components/TextField.tsx +315 -315
  42. package/src/components/TextareaField.tsx +128 -128
  43. package/src/components/TimePicker.tsx +298 -298
  44. package/src/components/Toast/components/ToastItem.tsx +41 -41
  45. package/src/components/Toast/components/ToastProvider.tsx +63 -63
  46. package/src/components/Toast/hooks/useToast.ts +12 -12
  47. package/src/components/Toast/index.tsx +5 -5
  48. package/src/components/Toast/styles/index.ts +135 -135
  49. package/src/components/Toast/types/index.ts +46 -46
  50. package/src/components/Tooltip/index.tsx +66 -66
  51. package/src/components/Tooltip/styles.ts +77 -77
  52. package/src/hooks/useOnClickOutside.tsx +20 -20
  53. package/src/index.tsx +42 -40
  54. package/src/styles/index.ts +38 -38
  55. package/src/types/typographyValues.ts +178 -178
  56. package/tsconfig.json +3 -3
package/src/components/Button/styledComponents.ts CHANGED
@@ -1,276 +1,287 @@
1
- import { Button as ButtonRadix } from "@radix-ui/themes";
2
- import { typographyButtonValues } from "../../types/typographyValues";
3
-
4
- import { styled } from "../../styles";
5
-
6
- export const ButtonStyled = styled(ButtonRadix, {
7
- $$buttonColor: "inherit",
8
- $$buttonBgColor: "$colors$grey50",
9
- $$buttonBorderColor: "inherit",
10
- $$buttonOutlinedColor: "inherit",
11
-
12
- fontFamily: "$default",
13
- letterSpacing: 0,
14
- border: 0,
15
- transition: "all 300ms ease-out",
16
- cursor: "pointer",
17
- borderRadius: "$xs",
18
- boxShadow:
19
- "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
20
- display: "flex",
21
- alignItems: "center",
22
- justifyContent: "center",
23
- gap: "$10",
24
- padding: "$6 $12",
25
- "&:disabled": {
26
- cursor: "not-allowed",
27
- transition: "none",
28
- },
29
- variants: {
30
- color: {
31
- brand: {
32
- $$buttonColor: "$colors$brand500",
33
- $$buttonBorderColor: "$colors$brand600",
34
- $$buttonOutlinedColor: "$$buttonColor",
35
- "&:hover": {
36
- $$buttonColor: "$colors$brand600",
37
- $$buttonBorderColor: "$colors$brand700",
38
- },
39
- "&:focus": {
40
- $$buttonColor: "$colors$brand400",
41
- $$buttonBorderColor: "$colors$brand300",
42
- $$buttonBgColor: "$colors$grey200",
43
- },
44
- "&:active": {
45
- $$buttonColor: "$colors$brand500",
46
- $$buttonBorderColor: "$colors$brand700",
47
- $$buttonBgColor: "$colors$grey200",
48
- },
49
- },
50
- purple: {
51
- $$buttonColor: "$colors$purple500",
52
- $$buttonBorderColor: "$colors$purple300",
53
- $$buttonOutlinedColor: "$$buttonColor",
54
- "&:hover": {
55
- $$buttonColor: "$colors$purple600",
56
- $$buttonBorderColor: "$colors$purple700",
57
- $$buttonOutlinedColor: "$colors$purple500",
58
- $$buttonBgColor: "$colors$purple50",
59
- },
60
- "&:focus": {
61
- $$buttonColor: "$colors$purple700",
62
- $$buttonOutlinedColor: "$colors$purple500",
63
- $$buttonBgColor: "$colors$purple200",
64
- $$buttonBorderColor: "$colors$purple400",
65
- },
66
- "&:active": {
67
- $$buttonColor: "$colors$purple500",
68
- $$buttonOutlinedColor: "$colors$purple500",
69
- $$buttonBgColor: "$colors$purple100",
70
- $$buttonBorderColor: "$colors$purple300",
71
- },
72
- },
73
- error: {
74
- $$buttonColor: "$colors$error600",
75
- $$buttonBorderColor: "$colors$error500",
76
- $$buttonOutlinedColor: " $colors$error500",
77
- "&:hover": {
78
- $$buttonColor: "$colors$error600",
79
- $$buttonBorderColor: "$colors$error700",
80
- $$buttonBgColor: "$colors$error50",
81
- },
82
- "&:focus": {
83
- $$buttonColor: "$colors$error400",
84
- $$buttonBorderColor: "$colors$error300",
85
- $$buttonBgColor: "$colors$error200",
86
- },
87
- "&:active": {
88
- $$buttonColor: "$colors$error700",
89
- $$buttonBorderColor: "$colors$error700",
90
- $$buttonBgColor: "$colors$re1050",
91
- },
92
- },
93
- info: {
94
- $$buttonColor: "$colors$info500",
95
- $$buttonBorderColor: "$colors$info600",
96
- $$buttonOutlinedColor: "$$buttonColor",
97
- "&:hover": {
98
- $$buttonColor: "$colors$info600",
99
- $$buttonBorderColor: "$colors$info700",
100
- $$buttonBgColor: "$colors$info50",
101
- },
102
- "&:focus": {
103
- $$buttonColor: "$colors$info400",
104
- $$buttonBorderColor: "$colors$info600",
105
- $$buttonBgColor: "$colors$info200",
106
- },
107
- "&:active": {
108
- $$buttonColor: "$colors$info700",
109
- $$buttonBorderColor: "$colors$info700",
110
- $$buttonBgColor: "$colors$info100",
111
- },
112
- },
113
- success: {
114
- $$buttonColor: "$colors$success500",
115
- $$buttonBorderColor: "$colors$success600",
116
- $$buttonOutlinedColor: "$$buttonColor",
117
- "&:hover": {
118
- $$buttonColor: "$colors$success600",
119
- $$buttonBorderColor: "$colors$success700",
120
- $$buttonBgColor: "$colors$success50",
121
- },
122
- "&:focus": {
123
- $$buttonColor: "$colors$success400",
124
- $$buttonBorderColor: "$colors$success600",
125
- $$buttonBgColor: "$colors$success200",
126
- },
127
- "&:active": {
128
- $$buttonColor: "$colors$success700",
129
- $$buttonBorderColor: "$colors$success700",
130
- $$buttonBgColor: "$colors$success100",
131
- },
132
- },
133
- warning: {
134
- $$buttonColor: "$colors$warning500",
135
- $$buttonBorderColor: "$colors$warning600",
136
- $$buttonOutlinedColor: "$$buttonColor",
137
- "&:hover": {
138
- $$buttonColor: "$colors$warning600",
139
- $$buttonBorderColor: "$colors$warning700",
140
- $$buttonBgColor: "$colors$warning50",
141
- },
142
- "&:focus": {
143
- $$buttonColor: "$colors$warning400",
144
- $$buttonBorderColor: "$colors$warning600",
145
- $$buttonBgColor: "$colors$warning200",
146
- },
147
- "&:active": {
148
- $$buttonColor: "$colors$warning700",
149
- $$buttonBorderColor: "$colors$warning700",
150
- $$buttonBgColor: "$colors$warning100",
151
- },
152
- },
153
- neutral: {
154
- $$buttonColor: "$colors$neutral600",
155
- $$buttonBorderColor: "$colors$neutral300",
156
- $$buttonOutlinedColor: "$$buttonColor",
157
- "&:hover": {
158
- $$buttonColor: "$colors$neutral700",
159
- $$buttonBgColor: "$colors$neutral100",
160
- $$buttonBorderColor: "$colors$neutral300",
161
- },
162
- "&:focus": {
163
- $$buttonColor: "$colors$neutral800",
164
- $$buttonBgColor: "$colors$neutral300",
165
- $$buttonBorderColor: "$colors$neutral400",
166
- },
167
- "&:active": {
168
- $$buttonColor: "$colors$neutral500",
169
- $$buttonBgColor: "$colors$neutral300",
170
- $$buttonBorderColor: "$colors$neutral400",
171
- },
172
- },
173
- white: {
174
- $$buttonColor: "$colors$neutral50",
175
- $$buttonBorderColor: "$colors$neutral300",
176
- $$buttonOutlinedColor: "$colors$neutral50",
177
- "&:hover": {
178
- $$buttonColor: "$colors$neutral100",
179
- $$buttonBorderColor: "$colors$neutral300",
180
- $$buttonBgColor: "$colors$neutral100",
181
- },
182
- "&:focus": {
183
- $$buttonBorderColor: "$colors$neutral400",
184
- $$buttonColor: "$colors$neutral300",
185
- $$buttonBgColor: "$colors$neutral200",
186
- },
187
- "&:active": {
188
- $$buttonColor: "$colors$neutral400",
189
- $$buttonBorderColor: "$colors$neutral500",
190
- $$buttonBgColor: "$colors$neutral300",
191
- },
192
- },
193
- },
194
- size: {
195
- extraSmall: {
196
- height: "$24",
197
- fontSize: "$buttonExtraSmall",
198
- lineHeight: "$buttonExtraSmall",
199
- padding: "0 $12",
200
- },
201
- small: {
202
- height: "30px",
203
- fontSize: "$buttonSmall",
204
- lineHeight: "$buttonSmall",
205
- padding: "0 $14",
206
- },
207
- medium: {
208
- height: "40px",
209
- fontSize: "$buttonMedium",
210
- lineHeight: "$buttonMedium",
211
- padding: "0 $16",
212
- },
213
- large: {
214
- height: "48px",
215
- fontSize: "$buttonLarge",
216
- lineHeight: "$buttonLarge",
217
- padding: "0 $20",
218
- },
219
- },
220
- variant: {
221
- text: {
222
- backgroundColor: "transparent",
223
- boxShadow: "none",
224
- padding: 0,
225
- border: 0,
226
- height: 'unset',
227
- color: "$$buttonColor",
228
- },
229
- contained: {
230
- color: "$grey50",
231
- backgroundColor: "$$buttonColor",
232
- border: "1px solid $$buttonBorderColor",
233
- "&:disabled": {
234
- boxShadow: "none",
235
- color: "$neutral400",
236
- backgroundColor: "$neutral200",
237
- $$buttonBorderColor: "$colors$neutral100",
238
- },
239
- },
240
- outlined: {
241
- color: "$$buttonOutlinedColor",
242
- border: "1px solid $$buttonOutlinedColor",
243
- backgroundColor: "$$buttonBgColor",
244
- "&:disabled": {
245
- boxShadow: "none",
246
- borderColor: "$colors$neutral100",
247
- $$buttonColor: "$colors$neutral300",
248
- },
249
- },
250
- },
251
- fontWeight: {
252
- regular: { fontWeight: "$regular" },
253
- medium: { fontWeight: "$medium" },
254
- semibold: { fontWeight: "$semibold" },
255
- bold: { fontWeight: "$bold" },
256
- },
257
- outlinedBgColor: {
258
- neutral: {},
259
- transparent: {
260
- backgroundColor: "transparent",
261
- },
262
- },
263
- radii: {
264
- full: {
265
- borderRadius: "$full",
266
- },
267
- },
268
- },
269
-
270
- defaultVariants: {
271
- variant: "contained",
272
- color: "brand",
273
- size: "medium",
274
- fontWeight: "medium",
275
- },
276
- });
1
+ import { Button as ButtonRadix } from "@radix-ui/themes";
2
+
3
+ import { styled } from "../../styles";
4
+
5
+ export const ButtonStyled = styled(ButtonRadix, {
6
+ $$buttonColor: "inherit",
7
+ $$buttonBgColor: "$colors$grey50",
8
+ $$buttonBorderColor: "inherit",
9
+ $$buttonOutlinedColor: "inherit",
10
+ fontFamily: "$default",
11
+ letterSpacing: 0,
12
+ border: 0,
13
+ transition: "all 300ms ease-out",
14
+ cursor: "pointer",
15
+ borderRadius: "$xs",
16
+ boxShadow:
17
+ "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
18
+ display: "flex",
19
+ alignItems: "center",
20
+ justifyContent: "center",
21
+ gap: "$10",
22
+ padding: "$6 $12",
23
+ "&:disabled": {
24
+ cursor: "not-allowed",
25
+ transition: "none",
26
+ },
27
+ variants: {
28
+ color: {
29
+ brand: {
30
+ $$buttonColor: "$colors$brand500",
31
+ $$buttonBorderColor: "$colors$brand600",
32
+ $$buttonOutlinedColor: "$$buttonColor",
33
+ "&:hover": {
34
+ $$buttonColor: "$colors$brand600",
35
+ $$buttonBorderColor: "$colors$brand700",
36
+ },
37
+ "&:focus": {
38
+ $$buttonColor: "$colors$brand400",
39
+ $$buttonBorderColor: "$colors$brand300",
40
+ $$buttonBgColor: "$colors$grey200",
41
+ },
42
+ "&:active": {
43
+ $$buttonColor: "$colors$brand500",
44
+ $$buttonBorderColor: "$colors$brand700",
45
+ $$buttonBgColor: "$colors$grey200",
46
+ },
47
+ },
48
+ purple: {
49
+ $$buttonColor: "$colors$purple500",
50
+ $$buttonBorderColor: "$colors$purple300",
51
+ $$buttonOutlinedColor: "$$buttonColor",
52
+ "&:hover": {
53
+ $$buttonColor: "$colors$purple600",
54
+ $$buttonBorderColor: "$colors$purple700",
55
+ $$buttonOutlinedColor: "$colors$purple500",
56
+ $$buttonBgColor: "$colors$purple50",
57
+ },
58
+ "&:focus": {
59
+ $$buttonColor: "$colors$purple700",
60
+ $$buttonOutlinedColor: "$colors$purple500",
61
+ $$buttonBgColor: "$colors$purple200",
62
+ $$buttonBorderColor: "$colors$purple400",
63
+ },
64
+ "&:active": {
65
+ $$buttonColor: "$colors$purple500",
66
+ $$buttonOutlinedColor: "$colors$purple500",
67
+ $$buttonBgColor: "$colors$purple100",
68
+ $$buttonBorderColor: "$colors$purple300",
69
+ },
70
+ },
71
+ error: {
72
+ $$buttonColor: "$colors$error600",
73
+ $$buttonBorderColor: "$colors$error500",
74
+ $$buttonOutlinedColor: " $colors$error500",
75
+ "&:hover": {
76
+ $$buttonColor: "$colors$error600",
77
+ $$buttonBorderColor: "$colors$error700",
78
+ $$buttonBgColor: "$colors$error50",
79
+ },
80
+ "&:focus": {
81
+ $$buttonColor: "$colors$error400",
82
+ $$buttonBorderColor: "$colors$error300",
83
+ $$buttonBgColor: "$colors$error200",
84
+ },
85
+ "&:active": {
86
+ $$buttonColor: "$colors$error700",
87
+ $$buttonBorderColor: "$colors$error700",
88
+ $$buttonBgColor: "$colors$re1050",
89
+ },
90
+ },
91
+ info: {
92
+ $$buttonColor: "$colors$info500",
93
+ $$buttonBorderColor: "$colors$info600",
94
+ $$buttonOutlinedColor: "$$buttonColor",
95
+ "&:hover": {
96
+ $$buttonColor: "$colors$info600",
97
+ $$buttonBorderColor: "$colors$info700",
98
+ $$buttonBgColor: "$colors$info50",
99
+ },
100
+ "&:focus": {
101
+ $$buttonColor: "$colors$info400",
102
+ $$buttonBorderColor: "$colors$info600",
103
+ $$buttonBgColor: "$colors$info200",
104
+ },
105
+ "&:active": {
106
+ $$buttonColor: "$colors$info700",
107
+ $$buttonBorderColor: "$colors$info700",
108
+ $$buttonBgColor: "$colors$info100",
109
+ },
110
+ },
111
+ success: {
112
+ $$buttonColor: "$colors$success500",
113
+ $$buttonBorderColor: "$colors$success600",
114
+ $$buttonOutlinedColor: "$$buttonColor",
115
+ "&:hover": {
116
+ $$buttonColor: "$colors$success600",
117
+ $$buttonBorderColor: "$colors$success700",
118
+ $$buttonBgColor: "$colors$success50",
119
+ },
120
+ "&:focus": {
121
+ $$buttonColor: "$colors$success400",
122
+ $$buttonBorderColor: "$colors$success600",
123
+ $$buttonBgColor: "$colors$success200",
124
+ },
125
+ "&:active": {
126
+ $$buttonColor: "$colors$success700",
127
+ $$buttonBorderColor: "$colors$success700",
128
+ $$buttonBgColor: "$colors$success100",
129
+ },
130
+ },
131
+ warning: {
132
+ $$buttonColor: "$colors$warning500",
133
+ $$buttonBorderColor: "$colors$warning600",
134
+ $$buttonOutlinedColor: "$$buttonColor",
135
+ "&:hover": {
136
+ $$buttonColor: "$colors$warning600",
137
+ $$buttonBorderColor: "$colors$warning700",
138
+ $$buttonBgColor: "$colors$warning50",
139
+ },
140
+ "&:focus": {
141
+ $$buttonColor: "$colors$warning400",
142
+ $$buttonBorderColor: "$colors$warning600",
143
+ $$buttonBgColor: "$colors$warning200",
144
+ },
145
+ "&:active": {
146
+ $$buttonColor: "$colors$warning700",
147
+ $$buttonBorderColor: "$colors$warning700",
148
+ $$buttonBgColor: "$colors$warning100",
149
+ },
150
+ },
151
+ neutral: {
152
+ $$buttonColor: "$colors$neutral600",
153
+ $$buttonBorderColor: "$colors$neutral300",
154
+ $$buttonOutlinedColor: "$$buttonColor",
155
+ "&:hover": {
156
+ $$buttonColor: "$colors$neutral700",
157
+ $$buttonBgColor: "$colors$neutral100",
158
+ $$buttonBorderColor: "$colors$neutral300",
159
+ },
160
+ "&:focus": {
161
+ $$buttonColor: "$colors$neutral800",
162
+ $$buttonBgColor: "$colors$neutral300",
163
+ $$buttonBorderColor: "$colors$neutral400",
164
+ },
165
+ "&:active": {
166
+ $$buttonColor: "$colors$neutral500",
167
+ $$buttonBgColor: "$colors$neutral300",
168
+ $$buttonBorderColor: "$colors$neutral400",
169
+ },
170
+ },
171
+ white: {
172
+ $$buttonColor: "$colors$neutral50",
173
+ $$buttonBorderColor: "$colors$neutral300",
174
+ $$buttonOutlinedColor: "$colors$neutral50",
175
+ "&:hover": {
176
+ $$buttonColor: "$colors$neutral100",
177
+ $$buttonBorderColor: "$colors$neutral300",
178
+ $$buttonBgColor: "$colors$neutral100",
179
+ },
180
+ "&:focus": {
181
+ $$buttonBorderColor: "$colors$neutral400",
182
+ $$buttonColor: "$colors$neutral300",
183
+ $$buttonBgColor: "$colors$neutral200",
184
+ },
185
+ "&:active": {
186
+ $$buttonColor: "$colors$neutral400",
187
+ $$buttonBorderColor: "$colors$neutral500",
188
+ $$buttonBgColor: "$colors$neutral300",
189
+ },
190
+ },
191
+ },
192
+ size: {
193
+ extraSmall: {
194
+ height: "$24",
195
+ fontSize: "$buttonExtraSmall",
196
+ lineHeight: "$buttonExtraSmall",
197
+ padding: "0 $12",
198
+ },
199
+ small: {
200
+ height: "30px",
201
+ fontSize: "$buttonSmall",
202
+ lineHeight: "$buttonSmall",
203
+ padding: "0 $14",
204
+ },
205
+ medium: {
206
+ height: "40px",
207
+ fontSize: "$buttonMedium",
208
+ lineHeight: "$buttonMedium",
209
+ padding: "0 $16",
210
+ },
211
+ large: {
212
+ height: "48px",
213
+ fontSize: "$buttonLarge",
214
+ lineHeight: "$buttonLarge",
215
+ padding: "0 $20",
216
+ },
217
+ },
218
+ variant: {
219
+ text: {
220
+ backgroundColor: "transparent",
221
+ boxShadow: "none",
222
+ padding: 0,
223
+ border: 0,
224
+ height: "unset",
225
+ color: "$$buttonColor",
226
+ },
227
+ contained: {
228
+ color: "$grey50",
229
+ backgroundColor: "$$buttonColor",
230
+ border: "1px solid $$buttonBorderColor",
231
+ "&:disabled": {
232
+ boxShadow: "none",
233
+ color: "$neutral400",
234
+ backgroundColor: "$neutral200",
235
+ $$buttonBorderColor: "$colors$neutral100",
236
+ },
237
+ },
238
+ outlined: {
239
+ color: "$$buttonOutlinedColor",
240
+ border: "1px solid $$buttonOutlinedColor",
241
+ backgroundColor: "$$buttonBgColor",
242
+ "&:disabled": {
243
+ boxShadow: "none",
244
+ borderColor: "$colors$neutral100",
245
+ $$buttonColor: "$colors$neutral300",
246
+ },
247
+ },
248
+ menuDropdownItem: {
249
+ backgroundColor: "transparent",
250
+ boxShadow: "none",
251
+ padding: "0.25rem 0.5rem",
252
+ border: 0,
253
+ height: "unset",
254
+ color: "$$buttonColor",
255
+ width: "100%",
256
+ borderRadius: 0,
257
+ "&:hover": {
258
+ backgroundColor: "$dark100",
259
+ },
260
+ },
261
+ },
262
+ fontWeight: {
263
+ regular: { fontWeight: "$regular" },
264
+ medium: { fontWeight: "$medium" },
265
+ semibold: { fontWeight: "$semibold" },
266
+ bold: { fontWeight: "$bold" },
267
+ },
268
+ outlinedBgColor: {
269
+ neutral: {},
270
+ transparent: {
271
+ backgroundColor: "transparent",
272
+ },
273
+ },
274
+ radii: {
275
+ full: {
276
+ borderRadius: "$full",
277
+ },
278
+ },
279
+ },
280
+
281
+ defaultVariants: {
282
+ variant: "contained",
283
+ color: "brand",
284
+ size: "medium",
285
+ fontWeight: "medium",
286
+ },
287
+ });