@main12/auth-login 0.1.0 → 0.1.2

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 (34) hide show
  1. package/README.md +187 -151
  2. package/dist/components/pages/ForgotPasswordPage.d.ts +1 -1
  3. package/dist/components/pages/ForgotPasswordPage.js +9 -42
  4. package/dist/components/pages/ForgotPasswordPageHero.d.ts +5 -0
  5. package/dist/components/pages/ForgotPasswordPageHero.js +69 -0
  6. package/dist/components/pages/ForgotPasswordPageTailwind.d.ts +5 -0
  7. package/dist/components/pages/ForgotPasswordPageTailwind.js +45 -0
  8. package/dist/components/pages/LoginPage.js +8 -218
  9. package/dist/components/pages/LoginPageHero.d.ts +11 -0
  10. package/dist/components/pages/LoginPageHero.js +298 -0
  11. package/dist/components/pages/LoginPageTailwind.d.ts +11 -0
  12. package/dist/components/pages/LoginPageTailwind.js +222 -0
  13. package/dist/components/pages/SetPasswordPage.d.ts +1 -1
  14. package/dist/components/pages/SetPasswordPage.js +9 -71
  15. package/dist/components/pages/SetPasswordPageHero.d.ts +5 -0
  16. package/dist/components/pages/SetPasswordPageHero.js +93 -0
  17. package/dist/components/pages/SetPasswordPageTailwind.d.ts +5 -0
  18. package/dist/components/pages/SetPasswordPageTailwind.js +74 -0
  19. package/dist/components/pages/SignupPage.d.ts +1 -1
  20. package/dist/components/pages/SignupPage.js +9 -126
  21. package/dist/components/pages/SignupPageHero.d.ts +10 -0
  22. package/dist/components/pages/SignupPageHero.js +150 -0
  23. package/dist/components/pages/SignupPageTailwind.d.ts +10 -0
  24. package/dist/components/pages/SignupPageTailwind.js +129 -0
  25. package/dist/components/pages/VerifyOtpPage.js +8 -83
  26. package/dist/components/pages/VerifyOtpPageHero.d.ts +5 -0
  27. package/dist/components/pages/VerifyOtpPageHero.js +104 -0
  28. package/dist/components/pages/VerifyOtpPageTailwind.d.ts +5 -0
  29. package/dist/components/pages/VerifyOtpPageTailwind.js +87 -0
  30. package/dist/config.d.ts +8 -0
  31. package/dist/config.js +6 -0
  32. package/dist/index.d.ts +4 -4
  33. package/dist/index.js +5 -1
  34. package/package.json +5 -2
package/dist/components/pages/LoginPage.js CHANGED
@@ -1,222 +1,12 @@
1
1
  'use client';
2
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
- import React, { Suspense } from 'react';
4
- import { useSearchParams } from 'next/navigation';
5
- import { Button, Input, Divider, Spinner } from '../ui/index.js';
6
- import { useLoginFlow } from '../../auth/application/hooks/useLoginFlow.js';
7
- import { AuthLayout } from '../AuthLayout.js';
8
- function LoginContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass }) {
9
- const searchParams = useSearchParams();
10
- const resolvedRedirect = searchParams.get('redirect') || redirectTo;
11
- const { step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin } = useLoginFlow({
12
- redirectTo: resolvedRedirect,
13
- onPasswordLogin
14
- });
15
- const stepTitle = step === 'otp-prompt' ? 'Verify Identity' : step === 'email' ? 'Welcome Back' : 'Enter Password';
16
- const stepSubtitle = step === 'otp-prompt' ? "We need to verify it's you." : step === 'email' ? 'Sign in with your email to continue.' : 'Enter your password to sign in.';
17
- return /*#__PURE__*/ _jsxs(AuthLayout, {
18
- logo: logo,
19
- title: stepTitle,
20
- subtitle: stepSubtitle,
21
- poweredBy: poweredBy,
22
- cardClassName: cardClassName,
23
- backgroundClass: backgroundClass,
24
- footer: /*#__PURE__*/ _jsxs("p", {
25
- className: "text-center text-gray-600 text-sm",
26
- children: [
27
- "Don't have an account?",
28
- ' ',
29
- /*#__PURE__*/ _jsx("a", {
30
- href: signupUrl,
31
- className: "text-gray-900 font-medium hover:underline",
32
- children: "Sign up"
33
- })
34
- ]
35
- }),
36
- children: [
37
- step === 'email' && /*#__PURE__*/ _jsxs("div", {
38
- className: "animate-[fadeIn_0.3s_ease-out]",
39
- children: [
40
- showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
41
- children: [
42
- /*#__PURE__*/ _jsxs(Button, {
43
- fullWidth: true,
44
- variant: "bordered",
45
- size: "lg",
46
- className: "mb-4",
47
- onPress: handleGoogleLogin,
48
- children: [
49
- /*#__PURE__*/ _jsx("span", {
50
- className: "text-lg",
51
- children: "G"
52
- }),
53
- " Continue with Google"
54
- ]
55
- }),
56
- /*#__PURE__*/ _jsxs("div", {
57
- className: "flex items-center gap-4 my-4",
58
- children: [
59
- /*#__PURE__*/ _jsx(Divider, {
60
- className: "flex-1"
61
- }),
62
- /*#__PURE__*/ _jsx("span", {
63
- className: "text-gray-500 text-sm",
64
- children: "or"
65
- }),
66
- /*#__PURE__*/ _jsx(Divider, {
67
- className: "flex-1"
68
- })
69
- ]
70
- })
71
- ]
72
- }),
73
- /*#__PURE__*/ _jsxs("form", {
74
- onSubmit: handleEmailSubmit,
75
- className: "space-y-4",
76
- children: [
77
- error && /*#__PURE__*/ _jsx("div", {
78
- className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
79
- children: error
80
- }),
81
- /*#__PURE__*/ _jsx(Input, {
82
- type: "email",
83
- label: "Email",
84
- value: email,
85
- onValueChange: setEmail,
86
- isRequired: true
87
- }),
88
- /*#__PURE__*/ _jsx(Button, {
89
- type: "submit",
90
- variant: "primary",
91
- isLoading: isLoading,
92
- children: "Continue"
93
- })
94
- ]
95
- })
96
- ]
97
- }),
98
- step === 'password' && /*#__PURE__*/ _jsxs("div", {
99
- className: "animate-[fadeIn_0.3s_ease-out]",
100
- children: [
101
- /*#__PURE__*/ _jsxs("div", {
102
- className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
103
- children: [
104
- /*#__PURE__*/ _jsx("span", {
105
- className: "text-gray-900 text-sm",
106
- children: email
107
- }),
108
- /*#__PURE__*/ _jsx("button", {
109
- type: "button",
110
- onClick: handleEditEmail,
111
- className: "text-gray-600 text-sm font-medium hover:text-gray-900",
112
- children: "Edit"
113
- })
114
- ]
115
- }),
116
- /*#__PURE__*/ _jsxs("form", {
117
- onSubmit: handlePasswordSubmit,
118
- className: "space-y-4",
119
- children: [
120
- error && /*#__PURE__*/ _jsx("div", {
121
- className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
122
- children: error
123
- }),
124
- /*#__PURE__*/ _jsxs("div", {
125
- className: "relative",
126
- children: [
127
- /*#__PURE__*/ _jsx(Input, {
128
- type: showPassword ? 'text' : 'password',
129
- label: "Password",
130
- value: password,
131
- onValueChange: setPassword,
132
- isRequired: true,
133
- autoFocus: true
134
- }),
135
- /*#__PURE__*/ _jsx("button", {
136
- type: "button",
137
- onClick: ()=>setShowPassword(!showPassword),
138
- className: "absolute right-4 top-9 text-gray-400 hover:text-gray-600",
139
- children: showPassword ? '🙈' : '👁'
140
- })
141
- ]
142
- }),
143
- /*#__PURE__*/ _jsx("div", {
144
- className: "text-left",
145
- children: /*#__PURE__*/ _jsx("a", {
146
- href: "/forgot-password",
147
- className: "text-sm text-gray-700 hover:text-gray-900 hover:underline",
148
- children: "Forgot password?"
149
- })
150
- }),
151
- /*#__PURE__*/ _jsx(Button, {
152
- type: "submit",
153
- variant: "primary",
154
- isLoading: isLoading,
155
- children: "Continue"
156
- })
157
- ]
158
- })
159
- ]
160
- }),
161
- step === 'otp-prompt' && /*#__PURE__*/ _jsxs("div", {
162
- className: "animate-[fadeIn_0.3s_ease-out]",
163
- children: [
164
- /*#__PURE__*/ _jsxs("div", {
165
- className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
166
- children: [
167
- /*#__PURE__*/ _jsx("span", {
168
- className: "text-gray-900 text-sm",
169
- children: email
170
- }),
171
- /*#__PURE__*/ _jsx("button", {
172
- type: "button",
173
- onClick: handleEditEmail,
174
- className: "text-gray-600 text-sm font-medium hover:text-gray-900",
175
- children: "Edit"
176
- })
177
- ]
178
- }),
179
- error && /*#__PURE__*/ _jsx("div", {
180
- className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm mb-4",
181
- children: error
182
- }),
183
- /*#__PURE__*/ _jsx("div", {
184
- className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4",
185
- children: /*#__PURE__*/ _jsxs("div", {
186
- className: "flex gap-3",
187
- children: [
188
- /*#__PURE__*/ _jsx("span", {
189
- className: "text-blue-500 text-lg",
190
- children: "✉"
191
- }),
192
- /*#__PURE__*/ _jsx("p", {
193
- className: "text-sm text-blue-700",
194
- children: "We'll send a verification code to this email."
195
- })
196
- ]
197
- })
198
- }),
199
- /*#__PURE__*/ _jsx(Button, {
200
- variant: "primary",
201
- isLoading: isSendingOtp,
202
- onPress: handleSendOtp,
203
- children: isSendingOtp ? 'Sending...' : 'Send Code'
204
- })
205
- ]
206
- })
207
- ]
208
- });
209
- }
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { pluginConfig } from '../../config.js';
4
+ import LoginPageTailwind from './LoginPageTailwind.js';
5
+ import LoginPageHero from './LoginPageHero.js';
210
6
  export default function LoginPage(props) {
211
- return /*#__PURE__*/ _jsx(Suspense, {
212
- fallback: /*#__PURE__*/ _jsx("div", {
213
- className: "min-h-screen flex items-center justify-center",
214
- children: /*#__PURE__*/ _jsx(Spinner, {
215
- size: "lg"
216
- })
217
- }),
218
- children: /*#__PURE__*/ _jsx(LoginContent, {
219
- ...props
220
- })
7
+ return pluginConfig.style === 'hero-ui' ? /*#__PURE__*/ _jsx(LoginPageHero, {
8
+ ...props
9
+ }) : /*#__PURE__*/ _jsx(LoginPageTailwind, {
10
+ ...props
221
11
  });
222
12
  }
package/dist/components/pages/LoginPageHero.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { AuthLayoutConfig } from '../AuthLayout.js';
2
+ export interface LoginPageHeroProps extends AuthLayoutConfig {
3
+ onPasswordLogin: (credentials: {
4
+ email: string;
5
+ password: string;
6
+ }) => Promise<void>;
7
+ redirectTo?: string;
8
+ showGoogleOAuth?: boolean;
9
+ signupUrl?: string;
10
+ }
11
+ export default function LoginPageHero(props: LoginPageHeroProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/pages/LoginPageHero.js ADDED
@@ -0,0 +1,298 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import React, { Suspense } from 'react';
4
+ import { useSearchParams } from 'next/navigation';
5
+ import { Button, Input, Divider, Spinner as HSpinner } from '@heroui/react';
6
+ import { motion, AnimatePresence } from 'framer-motion';
7
+ import { Icon } from '@iconify/react';
8
+ import { useLoginFlow } from '../../auth/application/hooks/useLoginFlow.js';
9
+ import { AuthLayout } from '../AuthLayout.js';
10
+ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass }) {
11
+ const searchParams = useSearchParams();
12
+ const resolvedRedirect = searchParams.get('redirect') || redirectTo;
13
+ const { step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin } = useLoginFlow({
14
+ redirectTo: resolvedRedirect,
15
+ onPasswordLogin
16
+ });
17
+ const stepTitle = step === 'otp-prompt' ? 'Verify Identity' : step === 'email' ? 'Welcome Back' : 'Enter Password';
18
+ const stepSubtitle = step === 'otp-prompt' ? "We need to verify it's you." : step === 'email' ? 'Sign in with your email to continue.' : 'Enter your password to sign in.';
19
+ return /*#__PURE__*/ _jsx(AuthLayout, {
20
+ logo: logo,
21
+ title: stepTitle,
22
+ subtitle: stepSubtitle,
23
+ poweredBy: poweredBy,
24
+ cardClassName: cardClassName,
25
+ backgroundClass: backgroundClass,
26
+ footer: /*#__PURE__*/ _jsxs("p", {
27
+ className: "text-center text-gray-600 text-sm",
28
+ children: [
29
+ "Don't have an account?",
30
+ ' ',
31
+ /*#__PURE__*/ _jsx("a", {
32
+ href: signupUrl,
33
+ className: "text-gray-900 font-medium hover:underline",
34
+ children: "Sign up"
35
+ })
36
+ ]
37
+ }),
38
+ children: /*#__PURE__*/ _jsxs(AnimatePresence, {
39
+ mode: "wait",
40
+ children: [
41
+ step === 'email' && /*#__PURE__*/ _jsxs(motion.div, {
42
+ initial: {
43
+ opacity: 0,
44
+ x: -20
45
+ },
46
+ animate: {
47
+ opacity: 1,
48
+ x: 0
49
+ },
50
+ exit: {
51
+ opacity: 0,
52
+ x: 20
53
+ },
54
+ transition: {
55
+ duration: 0.3
56
+ },
57
+ children: [
58
+ showGoogleOAuth && /*#__PURE__*/ _jsxs(_Fragment, {
59
+ children: [
60
+ /*#__PURE__*/ _jsx(Button, {
61
+ fullWidth: true,
62
+ variant: "bordered",
63
+ size: "lg",
64
+ className: "mb-4 h-12 border-gray-300 rounded-full text-gray-700 hover:bg-gray-50",
65
+ startContent: /*#__PURE__*/ _jsx(Icon, {
66
+ icon: "flat-color-icons:google",
67
+ width: 20
68
+ }),
69
+ onPress: handleGoogleLogin,
70
+ children: "Continue with Google"
71
+ }),
72
+ /*#__PURE__*/ _jsxs("div", {
73
+ className: "flex items-center gap-4 my-4",
74
+ children: [
75
+ /*#__PURE__*/ _jsx(Divider, {
76
+ className: "flex-1"
77
+ }),
78
+ /*#__PURE__*/ _jsx("span", {
79
+ className: "text-gray-500 text-sm",
80
+ children: "or"
81
+ }),
82
+ /*#__PURE__*/ _jsx(Divider, {
83
+ className: "flex-1"
84
+ })
85
+ ]
86
+ })
87
+ ]
88
+ }),
89
+ /*#__PURE__*/ _jsxs("form", {
90
+ onSubmit: handleEmailSubmit,
91
+ className: "space-y-4",
92
+ children: [
93
+ error && /*#__PURE__*/ _jsx(motion.div, {
94
+ className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
95
+ initial: {
96
+ opacity: 0
97
+ },
98
+ animate: {
99
+ opacity: 1
100
+ },
101
+ children: error
102
+ }),
103
+ /*#__PURE__*/ _jsx(Input, {
104
+ type: "email",
105
+ label: "Email",
106
+ value: email,
107
+ onValueChange: setEmail,
108
+ variant: "bordered",
109
+ size: "lg",
110
+ isRequired: true,
111
+ classNames: {
112
+ input: 'text-gray-900',
113
+ label: 'text-gray-600',
114
+ inputWrapper: 'border-gray-300 hover:border-gray-400 bg-white'
115
+ }
116
+ }),
117
+ /*#__PURE__*/ _jsx(Button, {
118
+ type: "submit",
119
+ fullWidth: true,
120
+ size: "lg",
121
+ color: "primary",
122
+ isLoading: isLoading,
123
+ className: "h-12 font-semibold",
124
+ children: "Continue"
125
+ })
126
+ ]
127
+ })
128
+ ]
129
+ }, "email"),
130
+ step === 'password' && /*#__PURE__*/ _jsxs(motion.div, {
131
+ initial: {
132
+ opacity: 0,
133
+ x: 20
134
+ },
135
+ animate: {
136
+ opacity: 1,
137
+ x: 0
138
+ },
139
+ exit: {
140
+ opacity: 0,
141
+ x: -20
142
+ },
143
+ transition: {
144
+ duration: 0.3
145
+ },
146
+ children: [
147
+ /*#__PURE__*/ _jsxs("div", {
148
+ className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
149
+ children: [
150
+ /*#__PURE__*/ _jsx("span", {
151
+ className: "text-gray-900 text-sm",
152
+ children: email
153
+ }),
154
+ /*#__PURE__*/ _jsx("button", {
155
+ type: "button",
156
+ onClick: handleEditEmail,
157
+ className: "text-gray-600 text-sm font-medium hover:text-gray-900",
158
+ children: "Edit"
159
+ })
160
+ ]
161
+ }),
162
+ /*#__PURE__*/ _jsxs("form", {
163
+ onSubmit: handlePasswordSubmit,
164
+ className: "space-y-4",
165
+ children: [
166
+ error && /*#__PURE__*/ _jsx(motion.div, {
167
+ className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm",
168
+ initial: {
169
+ opacity: 0
170
+ },
171
+ animate: {
172
+ opacity: 1
173
+ },
174
+ children: error
175
+ }),
176
+ /*#__PURE__*/ _jsx(Input, {
177
+ type: showPassword ? 'text' : 'password',
178
+ label: "Password",
179
+ value: password,
180
+ onValueChange: setPassword,
181
+ variant: "bordered",
182
+ size: "lg",
183
+ isRequired: true,
184
+ autoFocus: true,
185
+ classNames: {
186
+ input: 'text-gray-900',
187
+ label: 'text-gray-600',
188
+ inputWrapper: 'border-gray-300 hover:border-gray-400 bg-white'
189
+ },
190
+ endContent: /*#__PURE__*/ _jsx("button", {
191
+ type: "button",
192
+ onClick: ()=>setShowPassword(!showPassword),
193
+ children: /*#__PURE__*/ _jsx(Icon, {
194
+ icon: showPassword ? 'lucide:eye-off' : 'lucide:eye',
195
+ className: "text-gray-400",
196
+ width: 20
197
+ })
198
+ })
199
+ }),
200
+ /*#__PURE__*/ _jsx("div", {
201
+ className: "text-left",
202
+ children: /*#__PURE__*/ _jsx("a", {
203
+ href: "/forgot-password",
204
+ className: "text-sm text-gray-700 hover:underline",
205
+ children: "Forgot password?"
206
+ })
207
+ }),
208
+ /*#__PURE__*/ _jsx(Button, {
209
+ type: "submit",
210
+ fullWidth: true,
211
+ size: "lg",
212
+ color: "primary",
213
+ isLoading: isLoading,
214
+ className: "h-12 font-semibold",
215
+ children: "Continue"
216
+ })
217
+ ]
218
+ })
219
+ ]
220
+ }, "password"),
221
+ step === 'otp-prompt' && /*#__PURE__*/ _jsxs(motion.div, {
222
+ initial: {
223
+ opacity: 0,
224
+ x: 20
225
+ },
226
+ animate: {
227
+ opacity: 1,
228
+ x: 0
229
+ },
230
+ exit: {
231
+ opacity: 0,
232
+ x: -20
233
+ },
234
+ transition: {
235
+ duration: 0.3
236
+ },
237
+ children: [
238
+ /*#__PURE__*/ _jsxs("div", {
239
+ className: "flex items-center justify-between border border-gray-300 rounded-xl px-4 py-3 mb-4",
240
+ children: [
241
+ /*#__PURE__*/ _jsx("span", {
242
+ className: "text-gray-900 text-sm",
243
+ children: email
244
+ }),
245
+ /*#__PURE__*/ _jsx("button", {
246
+ type: "button",
247
+ onClick: handleEditEmail,
248
+ className: "text-gray-600 text-sm font-medium hover:text-gray-900",
249
+ children: "Edit"
250
+ })
251
+ ]
252
+ }),
253
+ error && /*#__PURE__*/ _jsx("div", {
254
+ className: "bg-red-50 text-red-600 border border-red-200 rounded-lg p-3 text-sm mb-4",
255
+ children: error
256
+ }),
257
+ /*#__PURE__*/ _jsxs("div", {
258
+ className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4 flex gap-3",
259
+ children: [
260
+ /*#__PURE__*/ _jsx(Icon, {
261
+ icon: "lucide:mail",
262
+ className: "text-blue-500 mt-0.5",
263
+ width: 20
264
+ }),
265
+ /*#__PURE__*/ _jsx("p", {
266
+ className: "text-sm text-blue-700",
267
+ children: "We'll send a verification code to this email."
268
+ })
269
+ ]
270
+ }),
271
+ /*#__PURE__*/ _jsx(Button, {
272
+ fullWidth: true,
273
+ size: "lg",
274
+ color: "primary",
275
+ isLoading: isSendingOtp,
276
+ onPress: handleSendOtp,
277
+ className: "h-12 font-semibold",
278
+ children: isSendingOtp ? 'Sending...' : 'Send Code'
279
+ })
280
+ ]
281
+ }, "otp-prompt")
282
+ ]
283
+ })
284
+ });
285
+ }
286
+ export default function LoginPageHero(props) {
287
+ return /*#__PURE__*/ _jsx(Suspense, {
288
+ fallback: /*#__PURE__*/ _jsx("div", {
289
+ className: "min-h-screen flex items-center justify-center",
290
+ children: /*#__PURE__*/ _jsx(HSpinner, {
291
+ size: "lg"
292
+ })
293
+ }),
294
+ children: /*#__PURE__*/ _jsx(LoginHeroContent, {
295
+ ...props
296
+ })
297
+ });
298
+ }
package/dist/components/pages/LoginPageTailwind.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { AuthLayoutConfig } from '../AuthLayout.js';
2
+ export interface LoginPageProps extends AuthLayoutConfig {
3
+ onPasswordLogin: (credentials: {
4
+ email: string;
5
+ password: string;
6
+ }) => Promise<void>;
7
+ redirectTo?: string;
8
+ showGoogleOAuth?: boolean;
9
+ signupUrl?: string;
10
+ }
11
+ export default function LoginPage(props: LoginPageProps): import("react/jsx-runtime").JSX.Element;