@levo-so/studio 0.1.80 → 0.1.82

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 (47) hide show
  1. package/dist/{BillingStep-BEQv34t2.js → BillingStep-DcZbhRY9.js} +1 -1
  2. package/dist/{MessageCard-CRDamYvO.js → MessageCard-B-uaKUq5.js} +1 -1
  3. package/dist/components/LoginForm/AuthMethodRenderer.d.ts +1 -0
  4. package/dist/components/LoginForm/AuthMethodRenderer.d.ts.map +1 -1
  5. package/dist/components/LoginForm/MagicLinkAuthForm.d.ts +1 -0
  6. package/dist/components/LoginForm/MagicLinkAuthForm.d.ts.map +1 -1
  7. package/dist/components/LoginForm/OtpAuthForm.d.ts +5 -1
  8. package/dist/components/LoginForm/OtpAuthForm.d.ts.map +1 -1
  9. package/dist/components/LoginForm/WhatsAppAuthForm.d.ts +5 -1
  10. package/dist/components/LoginForm/WhatsAppAuthForm.d.ts.map +1 -1
  11. package/dist/components/LoginForm/index.d.ts +1 -0
  12. package/dist/components/LoginForm/index.d.ts.map +1 -1
  13. package/dist/components/accessCard/LoginCard/index.d.ts.map +1 -1
  14. package/dist/components/accessCard/PendingApprovalCard/index.d.ts +11 -0
  15. package/dist/components/accessCard/PendingApprovalCard/index.d.ts.map +1 -0
  16. package/dist/components/withBlockProps.d.ts.map +1 -1
  17. package/dist/constants/authentication.d.ts +4 -0
  18. package/dist/constants/authentication.d.ts.map +1 -1
  19. package/dist/contentEngine/head_code.d.ts.map +1 -1
  20. package/dist/core/LevoBlock.d.ts +2 -2
  21. package/dist/core/LevoBlock.d.ts.map +1 -1
  22. package/dist/core/LevoPage.d.ts +2 -0
  23. package/dist/core/LevoPage.d.ts.map +1 -1
  24. package/dist/elements/forum/ForumPost.d.ts +3 -2
  25. package/dist/elements/forum/ForumPost.d.ts.map +1 -1
  26. package/dist/elements/forum/comments/Comments.d.ts.map +1 -1
  27. package/dist/elements/forum/utility/index.d.ts +2 -2
  28. package/dist/elements/forum/utility/index.d.ts.map +1 -1
  29. package/dist/{index-BEAsxxm1.js → index-BM9B_-Oa.js} +2 -2
  30. package/dist/{index-DNVhz-wO.js → index-Btn2IEPB.js} +1 -1
  31. package/dist/{index-CWWCoArW.js → index-CjQJ_4Xf.js} +2 -2
  32. package/dist/{index-nHEycEE9.js → index-D6LjzTKx.js} +2 -2
  33. package/dist/{index-DFWJOU6m.js → index-DvqlCYn2.js} +345 -321
  34. package/dist/index-ekxl-RSq.js +43 -0
  35. package/dist/index-qvImrx6Q.js +83 -0
  36. package/dist/index-vtvLeTPv.js +793 -0
  37. package/dist/index.js +111 -109
  38. package/dist/interfaces/block.d.ts +1 -1
  39. package/dist/interfaces/block.d.ts.map +1 -1
  40. package/dist/interfaces/sites.d.ts +1 -0
  41. package/dist/interfaces/sites.d.ts.map +1 -1
  42. package/dist/pixel/propertyMap.d.ts +1 -1
  43. package/dist/pixel/propertyMap.d.ts.map +1 -1
  44. package/dist/studio.css +1 -1
  45. package/package.json +14 -8
  46. package/dist/index-FmZgz8ql.js +0 -35
  47. package/dist/index-xFzpnJIa.js +0 -766
@@ -1,766 +0,0 @@
1
- "use client";
2
- import { jsx as e, jsxs as l, Fragment as q } from "react/jsx-runtime";
3
- import { useLevo as Q, LevoOAuth as I, successToast as X, errorHandler as Z } from "@levo-so/react";
4
- import { useState as _, useEffect as G, useRef as R, useMemo as F } from "react";
5
- import { g as $, A as ee } from "./index-DFWJOU6m.js";
6
- import { getLevoError as B } from "@levo-so/core";
7
- import { useFormik as A } from "formik";
8
- import { parsePhoneNumberWithError as te } from "libphonenumber-js";
9
- import * as k from "yup";
10
- import ne from "react-otp-input";
11
- import { ChevronDown as re } from "lucide-react";
12
- import { Popover as L } from "radix-ui";
13
- import { usePhoneInput as oe, defaultCountries as P, parseCountry as M, FlagImage as j } from "react-international-phone";
14
- import "react-international-phone/style.css";
15
- const z = k.string().required("Email is required").email("Please enter a valid email address").trim(), H = k.string().required("Please enter the verification code").length(4, "Verification code must be 4 digits").matches(/^\d+$/, "Verification code must contain only numbers"), U = k.string().required("Phone number is required").test("phone", "The phone number has incorrect format", (o) => {
16
- if (!o) return !1;
17
- try {
18
- return te(o)?.isValid() ?? !1;
19
- } catch {
20
- return !1;
21
- }
22
- }), K = k.object({
23
- email: z
24
- }), ie = k.object({
25
- email: z,
26
- otp: H
27
- }), se = k.object({
28
- phone: U
29
- }), ae = k.object({
30
- phone: U,
31
- otp: H
32
- }), le = K, ce = "_button_1je4h_2", de = "_content_1je4h_70", ue = "_icon_1je4h_77", me = "_spinner_1je4h_89", pe = "_iconEnter_1je4h_103", he = "_text_1je4h_119", N = {
33
- button: ce,
34
- content: de,
35
- icon: ue,
36
- spinner: me,
37
- iconEnter: pe,
38
- text: he
39
- }, E = ({
40
- className: o,
41
- children: c,
42
- isLoading: t = !1,
43
- isError: a = !1,
44
- loadingText: u = "Loading...",
45
- successText: s = "Success!",
46
- errorText: r = "Error!",
47
- variant: h = "default",
48
- size: p = "default",
49
- disabled: n,
50
- ...y
51
- }) => {
52
- const [v, i] = _(!1), [g, C] = _(!1), [S, m] = _(t);
53
- G(() => {
54
- if (S && !t)
55
- if (a) {
56
- C(!0);
57
- const T = setTimeout(() => {
58
- C(!1);
59
- }, 2e3);
60
- return () => clearTimeout(T);
61
- } else {
62
- i(!0);
63
- const T = setTimeout(() => {
64
- i(!1);
65
- }, 2e3);
66
- return () => clearTimeout(T);
67
- }
68
- m(t);
69
- }, [t, S, a]);
70
- const f = () => t ? u : v ? s : g ? r : c, V = () => g ? "destructive" : v ? "success" : h, w = () => t ? /* @__PURE__ */ e("div", { className: `${N.icon} ${N.iconEnter}`, children: /* @__PURE__ */ e("svg", { className: N.spinner, viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
71
- "circle",
72
- {
73
- cx: "12",
74
- cy: "12",
75
- r: "10",
76
- stroke: "currentColor",
77
- strokeWidth: "4",
78
- fill: "none",
79
- strokeDasharray: "32",
80
- strokeDashoffset: "32"
81
- }
82
- ) }) }) : v && !t ? /* @__PURE__ */ e("div", { className: `${N.icon} ${N.iconEnter}`, children: /* @__PURE__ */ l("svg", { viewBox: "0 0 24 24", children: [
83
- /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
84
- /* @__PURE__ */ e(
85
- "path",
86
- {
87
- d: "m9 12 2 2 4-4",
88
- stroke: "white",
89
- strokeWidth: "2",
90
- fill: "none",
91
- strokeLinecap: "round",
92
- strokeLinejoin: "round"
93
- }
94
- )
95
- ] }) }) : g && !t ? /* @__PURE__ */ e("div", { className: `${N.icon} ${N.iconEnter}`, children: /* @__PURE__ */ l(
96
- "svg",
97
- {
98
- xmlns: "http://www.w3.org/2000/svg",
99
- width: "24",
100
- height: "24",
101
- viewBox: "0 0 24 24",
102
- fill: "none",
103
- stroke: "currentColor",
104
- strokeWidth: "2",
105
- strokeLinecap: "round",
106
- strokeLinejoin: "round",
107
- children: [
108
- /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
109
- /* @__PURE__ */ e("path", { d: "m15 9-6 6" }),
110
- /* @__PURE__ */ e("path", { d: "m9 9 6 6" })
111
- ]
112
- }
113
- ) }) : null;
114
- return /* @__PURE__ */ e(
115
- "button",
116
- {
117
- className: `${N.button} ${o || ""}`,
118
- "data-variant": V(),
119
- "data-size": p,
120
- disabled: n || t,
121
- ...y,
122
- children: /* @__PURE__ */ l("div", { className: N.content, children: [
123
- w(),
124
- /* @__PURE__ */ e("span", { className: N.text, children: f() })
125
- ] })
126
- }
127
- );
128
- }, fe = "_container_wx5fd_1", ge = "_label_wx5fd_5", _e = "_inputWrapper_wx5fd_13", ve = "_input_wx5fd_13", be = "_editButton_wx5fd_38", W = {
129
- container: fe,
130
- label: ge,
131
- inputWrapper: _e,
132
- input: ve,
133
- editButton: be
134
- }, Y = ({ email: o, setEmail: c, otpSent: t, handleReset: a }) => /* @__PURE__ */ l("div", { className: W.container, children: [
135
- /* @__PURE__ */ e("label", { className: W.label, children: "Email" }),
136
- /* @__PURE__ */ l("div", { className: W.inputWrapper, children: [
137
- /* @__PURE__ */ e(
138
- "input",
139
- {
140
- type: "email",
141
- value: o,
142
- onChange: (u) => c(u.target.value),
143
- className: W.input,
144
- placeholder: "Enter your email",
145
- disabled: t
146
- }
147
- ),
148
- t && /* @__PURE__ */ e(
149
- E,
150
- {
151
- variant: "outline",
152
- onClick: () => a(),
153
- className: W.editButton,
154
- children: "Edit"
155
- }
156
- )
157
- ] })
158
- ] }), ye = "_container_x1dec_1", Ne = "_iconWrapper_x1dec_9", Se = "_icon_x1dec_9", xe = "_content_x1dec_26", Ce = "_title_x1dec_30", we = "_message_x1dec_37", Ee = "_submessage_x1dec_49", Te = "_actions_x1dec_55", ke = "_resetButton_x1dec_59", x = {
159
- container: ye,
160
- iconWrapper: Ne,
161
- icon: Se,
162
- content: xe,
163
- title: Ce,
164
- message: we,
165
- submessage: Ee,
166
- actions: Te,
167
- resetButton: ke
168
- }, Be = ({ email: o, onReset: c }) => /* @__PURE__ */ l("div", { className: x.container, children: [
169
- /* @__PURE__ */ e("div", { className: x.iconWrapper, children: /* @__PURE__ */ e("svg", { className: x.icon, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
170
- "path",
171
- {
172
- strokeLinecap: "round",
173
- strokeLinejoin: "round",
174
- strokeWidth: 2,
175
- d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
176
- }
177
- ) }) }),
178
- /* @__PURE__ */ l("div", { className: x.content, children: [
179
- /* @__PURE__ */ e("h3", { className: x.title, children: "Check your email" }),
180
- /* @__PURE__ */ l("p", { className: x.message, children: [
181
- "We've sent a magic link to ",
182
- /* @__PURE__ */ e("strong", { children: o })
183
- ] }),
184
- /* @__PURE__ */ e("p", { className: x.submessage, children: "Click the link in your email to sign in. The link will expire in 15 minutes." })
185
- ] }),
186
- /* @__PURE__ */ e("div", { className: x.actions, children: /* @__PURE__ */ e(E, { variant: "outline", onClick: c, className: x.resetButton, children: "Use a different email" }) })
187
- ] }), We = "_container_1mfd3_1", Oe = "_errorContainer_1mfd3_5", Le = "_divider_1mfd3_9", Ie = "_dividerLine_1mfd3_15", $e = "_dividerText_1mfd3_21", Ve = "_formSection_1mfd3_27", Ae = "_buttonWrapper_1mfd3_33", De = "_fullWidthButton_1mfd3_36", Re = "_oauthContainer_1mfd3_41", Fe = "_googleButton_1mfd3_54", Pe = "_googleIcon_1mfd3_78", Me = "_errorContent_1mfd3_90", je = "_errorText_1mfd3_107", qe = "_errorTitle_1mfd3_112", Ge = "_errorMessage_1mfd3_119", ze = "_errorDismiss_1mfd3_125", d = {
188
- container: We,
189
- errorContainer: Oe,
190
- divider: Le,
191
- dividerLine: Ie,
192
- dividerText: $e,
193
- formSection: Ve,
194
- buttonWrapper: Ae,
195
- fullWidthButton: De,
196
- oauthContainer: Re,
197
- googleButton: Fe,
198
- googleIcon: Pe,
199
- errorContent: Me,
200
- errorText: je,
201
- errorTitle: qe,
202
- errorMessage: Ge,
203
- errorDismiss: ze
204
- }, D = ({ error: o, onDismiss: c }) => /* @__PURE__ */ e("div", { className: d.errorContainer, children: /* @__PURE__ */ l("div", { className: d.errorContent, children: [
205
- /* @__PURE__ */ l("div", { className: d.errorText, children: [
206
- o.title && /* @__PURE__ */ e("div", { className: d.errorTitle, children: o.title }),
207
- /* @__PURE__ */ e("div", { className: d.errorMessage, children: o.message || "An unexpected error occurred" })
208
- ] }),
209
- c && /* @__PURE__ */ e("button", { onClick: c, className: d.errorDismiss, "aria-label": "Dismiss error", children: "×" })
210
- ] }) }), He = ({ onMagicLinkSent: o }) => {
211
- const { sendMagicLink: c } = $(), [t, a] = _(!1), [u, s] = _(null);
212
- G(() => {
213
- o?.(t);
214
- }, [t, o]);
215
- const r = A({
216
- initialValues: {
217
- email: ""
218
- },
219
- validationSchema: le,
220
- validateOnChange: !1,
221
- validateOnBlur: !1,
222
- onSubmit: async (p, { setSubmitting: n, setFieldError: y }) => {
223
- try {
224
- s(null), await c(p.email), a(!0);
225
- } catch (v) {
226
- const i = B(v);
227
- i.hasFieldErrors ? i.fieldErrors.forEach((g) => {
228
- y(g.param, g.message);
229
- }) : s(i);
230
- } finally {
231
- n(!1);
232
- }
233
- }
234
- }), h = () => {
235
- a(!1), r.resetForm(), s(null);
236
- };
237
- return t ? /* @__PURE__ */ e(Be, { email: r.values.email, onReset: h }) : /* @__PURE__ */ l(
238
- "form",
239
- {
240
- onSubmit: r.handleSubmit,
241
- style: {
242
- display: "flex",
243
- flexDirection: "column",
244
- gap: "1rem"
245
- },
246
- children: [
247
- /* @__PURE__ */ e(
248
- Y,
249
- {
250
- email: r.values.email,
251
- setEmail: (p) => r.setFieldValue("email", p),
252
- otpSent: !1,
253
- handleReset: h
254
- }
255
- ),
256
- /* @__PURE__ */ e("div", { className: d.buttonWrapper, children: /* @__PURE__ */ e(
257
- E,
258
- {
259
- type: "submit",
260
- isLoading: r.isSubmitting,
261
- isError: !!u,
262
- disabled: r.isSubmitting,
263
- className: d.fullWidthButton,
264
- loadingText: "Sending Magic Link...",
265
- errorText: "Failed to Send",
266
- children: "Send Magic Link"
267
- }
268
- ) }),
269
- u && /* @__PURE__ */ e(D, { error: u, onDismiss: () => s(null) })
270
- ]
271
- }
272
- );
273
- }, Ue = "_container_1c9qn_1", Ke = "_label_1c9qn_5", Ye = "_inputGroup_1c9qn_13", Je = "_input_1c9qn_13", Qe = "_resendButton_1c9qn_36", O = {
274
- container: Ue,
275
- label: Ke,
276
- inputGroup: Ye,
277
- input: Je,
278
- resendButton: Qe
279
- }, J = ({
280
- otpSent: o,
281
- isResendingOtp: c,
282
- otp: t,
283
- resendOTP: a,
284
- setOtp: u
285
- }) => {
286
- const [s, r] = _(0), h = () => {
287
- a(() => {
288
- r(30);
289
- const p = setInterval(() => {
290
- r((n) => n <= 1 ? (clearInterval(p), 0) : n - 1);
291
- }, 1e3);
292
- });
293
- };
294
- return o ? /* @__PURE__ */ l("div", { className: O.container, children: [
295
- /* @__PURE__ */ e("label", { className: O.label, children: "Verification Code" }),
296
- /* @__PURE__ */ e("div", { className: O.inputGroup, children: /* @__PURE__ */ e(
297
- ne,
298
- {
299
- value: t,
300
- onChange: u,
301
- numInputs: 4,
302
- inputStyle: {
303
- marginRight: "12px"
304
- },
305
- inputType: "tel",
306
- skipDefaultStyles: !0,
307
- renderInput: ({ className: p, ...n }) => /* @__PURE__ */ e("input", { className: `${O.input} ${p}`, ...n })
308
- }
309
- ) }),
310
- /* @__PURE__ */ e(
311
- "button",
312
- {
313
- onClick: h,
314
- disabled: c || s > 0,
315
- className: O.resendButton,
316
- children: c ? "Resending..." : s > 0 ? `Resend in ${s}s` : "Resend Code"
317
- }
318
- )
319
- ] }) : null;
320
- }, Xe = () => {
321
- const { sendOTP: o, verifyOTP: c, resendOTP: t } = $(), [a, u] = _(!1), [s, r] = _(null), [h, p] = _(!1), n = A({
322
- initialValues: {
323
- email: "",
324
- otp: ""
325
- },
326
- validationSchema: a ? ie : K,
327
- validateOnChange: !1,
328
- validateOnBlur: !1,
329
- onSubmit: async (i, { setSubmitting: g, setFieldError: C }) => {
330
- try {
331
- r(null), a ? await c(i.email, i.otp) : (await o({ email: i.email }), u(!0));
332
- } catch (S) {
333
- const m = B(S);
334
- m.hasFieldErrors ? m.fieldErrors.forEach((f) => {
335
- C(f.param, f.message);
336
- }) : r(m);
337
- } finally {
338
- g(!1);
339
- }
340
- }
341
- }), y = () => {
342
- u(!1), n.resetForm(), r(null);
343
- }, v = async () => {
344
- try {
345
- p(!0), r(null), await t({ email: n.values.email });
346
- } catch (i) {
347
- const g = B(i);
348
- r(g);
349
- } finally {
350
- p(!1);
351
- }
352
- };
353
- return /* @__PURE__ */ l(
354
- "form",
355
- {
356
- onSubmit: n.handleSubmit,
357
- style: {
358
- display: "flex",
359
- flexDirection: "column",
360
- gap: "1rem"
361
- },
362
- children: [
363
- /* @__PURE__ */ e(
364
- Y,
365
- {
366
- email: n.values.email,
367
- setEmail: (i) => n.setFieldValue("email", i),
368
- otpSent: a,
369
- handleReset: y
370
- }
371
- ),
372
- /* @__PURE__ */ e(
373
- J,
374
- {
375
- otpSent: a,
376
- otp: n.values.otp,
377
- setOtp: (i) => n.setFieldValue("otp", i),
378
- isResendingOtp: h,
379
- resendOTP: v
380
- }
381
- ),
382
- /* @__PURE__ */ e("div", { className: d.buttonWrapper, children: a ? /* @__PURE__ */ e(
383
- E,
384
- {
385
- type: "submit",
386
- isLoading: n.isSubmitting,
387
- isError: !!s,
388
- disabled: n.isSubmitting || !n.values.otp,
389
- className: d.fullWidthButton,
390
- loadingText: "Verifying...",
391
- errorText: "Verification Failed",
392
- children: "Verify & Sign In"
393
- }
394
- ) : /* @__PURE__ */ e(
395
- E,
396
- {
397
- type: "submit",
398
- isLoading: n.isSubmitting,
399
- isError: !!s,
400
- disabled: n.isSubmitting,
401
- className: d.fullWidthButton,
402
- loadingText: "Sending Code...",
403
- errorText: "Failed to Send",
404
- children: "Send Code"
405
- }
406
- ) }),
407
- s && /* @__PURE__ */ e(D, { error: s, onDismiss: () => r(null) })
408
- ]
409
- }
410
- );
411
- }, Ze = "_label_1fvbo_1", et = "_inputWrapper_1fvbo_9", tt = "_phoneInputWrapper_1fvbo_14", nt = "_input_1fvbo_9", rt = "_selector_1fvbo_41", ot = "_editButton_1fvbo_69", it = "_dropdownContent_1fvbo_73", st = "_countryItem_1fvbo_89", at = "_flag_1fvbo_111", lt = "_countryName_1fvbo_118", ct = "_dialCode_1fvbo_125", b = {
412
- label: Ze,
413
- inputWrapper: et,
414
- phoneInputWrapper: tt,
415
- input: nt,
416
- selector: rt,
417
- editButton: ot,
418
- dropdownContent: it,
419
- countryItem: st,
420
- flag: at,
421
- countryName: lt,
422
- dialCode: ct
423
- }, dt = ({ phone: o, setPhone: c, otpSent: t, handleReset: a }) => {
424
- const [u, s] = _(!1), [r, h] = _(""), p = R(null), n = R(null), { inputValue: y, handlePhoneValueChange: v, inputRef: i, country: g, setCountry: C } = oe({
425
- defaultCountry: "in",
426
- value: o,
427
- countries: P,
428
- onChange: (m) => {
429
- c(m.phone);
430
- },
431
- disableDialCodePrefill: !0,
432
- forceDialCode: !0
433
- }), S = P.filter((m) => {
434
- const f = M(m);
435
- return f.name.toLowerCase().includes(r.toLowerCase()) || f.dialCode.includes(r);
436
- });
437
- return /* @__PURE__ */ l("div", { children: [
438
- /* @__PURE__ */ e("label", { className: b.label, children: "Phone Number" }),
439
- /* @__PURE__ */ l("div", { className: b.inputWrapper, children: [
440
- /* @__PURE__ */ l("div", { className: b.phoneInputWrapper, children: [
441
- /* @__PURE__ */ l(L.Root, { open: u, onOpenChange: s, children: [
442
- /* @__PURE__ */ e(L.Trigger, { asChild: !0, disabled: t, children: /* @__PURE__ */ l("button", { type: "button", className: b.selector, disabled: t, children: [
443
- /* @__PURE__ */ e(j, { iso2: g.iso2, style: { width: "24px", height: "16px" } }),
444
- /* @__PURE__ */ e(re, { size: 16, style: { marginLeft: "4px", opacity: 0.5 } })
445
- ] }) }),
446
- /* @__PURE__ */ e(L.Portal, { children: /* @__PURE__ */ l(
447
- L.Content,
448
- {
449
- className: b.dropdownContent,
450
- align: "start",
451
- side: "bottom",
452
- sideOffset: 4,
453
- onOpenAutoFocus: (m) => {
454
- m.preventDefault(), n.current?.focus();
455
- },
456
- children: [
457
- /* @__PURE__ */ e("div", { style: { padding: "0.5rem" }, children: /* @__PURE__ */ e(
458
- "input",
459
- {
460
- ref: n,
461
- type: "text",
462
- placeholder: "Search country...",
463
- value: r,
464
- onChange: (m) => h(m.target.value),
465
- onKeyDown: (m) => {
466
- m.key === "ArrowDown" && (m.preventDefault(), p.current?.firstElementChild?.focus());
467
- },
468
- className: b.input,
469
- style: {
470
- borderRadius: "0.375rem",
471
- borderLeft: "1px solid #d1d5db"
472
- }
473
- }
474
- ) }),
475
- /* @__PURE__ */ l("div", { ref: p, style: { overflowY: "auto", flex: 1 }, children: [
476
- S.map((m) => {
477
- const f = M(m), V = f.iso2 === g.iso2;
478
- return /* @__PURE__ */ l(
479
- "button",
480
- {
481
- type: "button",
482
- className: b.countryItem,
483
- "data-selected": V,
484
- onClick: () => {
485
- C(f.iso2), s(!1), h("");
486
- },
487
- onKeyDown: (w) => {
488
- if (w.key === "ArrowDown")
489
- w.preventDefault(), w.currentTarget.nextElementSibling?.focus();
490
- else if (w.key === "ArrowUp") {
491
- w.preventDefault();
492
- const T = w.currentTarget.previousElementSibling;
493
- T ? T.focus() : n.current?.focus();
494
- }
495
- },
496
- children: [
497
- /* @__PURE__ */ e(j, { iso2: f.iso2, className: b.flag }),
498
- /* @__PURE__ */ e("span", { className: b.countryName, children: f.name }),
499
- /* @__PURE__ */ l("span", { className: b.dialCode, children: [
500
- "+",
501
- f.dialCode
502
- ] })
503
- ]
504
- },
505
- f.iso2
506
- );
507
- }),
508
- S.length === 0 && /* @__PURE__ */ e(
509
- "div",
510
- {
511
- style: {
512
- padding: "1rem",
513
- textAlign: "center",
514
- color: "#6b7280",
515
- fontSize: "0.875rem"
516
- },
517
- children: "No countries found"
518
- }
519
- )
520
- ] })
521
- ]
522
- }
523
- ) })
524
- ] }),
525
- /* @__PURE__ */ e(
526
- "input",
527
- {
528
- ref: i,
529
- type: "tel",
530
- value: y,
531
- onChange: v,
532
- className: b.input,
533
- disabled: t
534
- }
535
- )
536
- ] }),
537
- t && /* @__PURE__ */ e(
538
- E,
539
- {
540
- variant: "outline",
541
- onClick: () => a(),
542
- className: b.editButton,
543
- children: "Edit"
544
- }
545
- )
546
- ] })
547
- ] });
548
- }, ut = () => {
549
- const { sendOTP: o, verifyOTP: c, resendOTP: t } = $(), [a, u] = _(!1), [s, r] = _(null), [h, p] = _(!1), n = A({
550
- initialValues: {
551
- phone: "",
552
- otp: ""
553
- },
554
- validationSchema: a ? ae : se,
555
- validateOnChange: !1,
556
- validateOnBlur: !1,
557
- onSubmit: async (i, { setSubmitting: g, setFieldError: C }) => {
558
- try {
559
- r(null), a ? await c(i.phone, i.otp) : (await o({ phone: i.phone, medium: "whatsapp" }), u(!0));
560
- } catch (S) {
561
- const m = B(S);
562
- m.hasFieldErrors ? m.fieldErrors.forEach((f) => {
563
- C(f.param, f.message);
564
- }) : r(m);
565
- } finally {
566
- g(!1);
567
- }
568
- }
569
- }), y = () => {
570
- u(!1), n.resetForm(), r(null);
571
- }, v = async () => {
572
- try {
573
- p(!0), r(null), await t({ phone: n.values.phone, medium: "whatsapp" });
574
- } catch (i) {
575
- const g = B(i);
576
- r(g);
577
- } finally {
578
- p(!1);
579
- }
580
- };
581
- return /* @__PURE__ */ l(
582
- "form",
583
- {
584
- onSubmit: n.handleSubmit,
585
- style: {
586
- display: "flex",
587
- flexDirection: "column",
588
- gap: "1rem"
589
- },
590
- children: [
591
- /* @__PURE__ */ e(
592
- dt,
593
- {
594
- phone: n.values.phone,
595
- setPhone: (i) => n.setFieldValue("phone", i),
596
- otpSent: a,
597
- handleReset: y
598
- }
599
- ),
600
- /* @__PURE__ */ e(
601
- J,
602
- {
603
- otpSent: a,
604
- otp: n.values.otp,
605
- setOtp: (i) => n.setFieldValue("otp", i),
606
- isResendingOtp: h,
607
- resendOTP: v
608
- }
609
- ),
610
- /* @__PURE__ */ e("div", { className: d.buttonWrapper, children: a ? /* @__PURE__ */ e(
611
- E,
612
- {
613
- type: "submit",
614
- isLoading: n.isSubmitting,
615
- isError: !!s,
616
- disabled: n.isSubmitting,
617
- className: d.fullWidthButton,
618
- loadingText: "Verifying...",
619
- errorText: "Verification Failed",
620
- children: "Verify & Sign In"
621
- }
622
- ) : /* @__PURE__ */ e(
623
- E,
624
- {
625
- type: "submit",
626
- isLoading: n.isSubmitting,
627
- isError: !!s,
628
- disabled: n.isSubmitting,
629
- className: d.fullWidthButton,
630
- loadingText: "Sending Code...",
631
- errorText: "Failed to Send",
632
- children: "Send Code"
633
- }
634
- ) }),
635
- s && /* @__PURE__ */ e(D, { error: s })
636
- ]
637
- }
638
- );
639
- }, mt = ({
640
- method: o,
641
- onMagicLinkSent: c
642
- }) => {
643
- switch (o) {
644
- case "otp":
645
- return /* @__PURE__ */ e(Xe, {});
646
- case "whatsapp":
647
- return /* @__PURE__ */ e(ut, {});
648
- case "magiclink":
649
- return /* @__PURE__ */ e(He, { onMagicLinkSent: c });
650
- default:
651
- return null;
652
- }
653
- }, pt = ({ method: o }) => {
654
- switch (o) {
655
- case "google":
656
- return /* @__PURE__ */ e(I.Button, { provider: "google", children: /* @__PURE__ */ l("button", { type: "button", className: d.googleButton, children: [
657
- /* @__PURE__ */ e("img", { className: d.googleIcon, src: "https://static.levocdn.com/png/google.png" }),
658
- "Continue with Google"
659
- ] }) });
660
- case "microsoft":
661
- return /* @__PURE__ */ e(I.Button, { provider: "microsoft", children: /* @__PURE__ */ l("button", { type: "button", className: d.googleButton, children: [
662
- /* @__PURE__ */ e("img", { className: d.googleIcon, src: "https://static.levocdn.com/png/microsoft.png" }),
663
- "Continue with Microsoft"
664
- ] }) });
665
- case "linkedin":
666
- return /* @__PURE__ */ e(I.Button, { provider: "linkedin", children: /* @__PURE__ */ l("button", { type: "button", className: d.googleButton, children: [
667
- /* @__PURE__ */ e("img", { className: d.googleIcon, src: "https://static.levocdn.com/png/linkedin.png" }),
668
- "Continue with LinkedIn"
669
- ] }) });
670
- case "oauth":
671
- default:
672
- return /* @__PURE__ */ e(q, {});
673
- }
674
- }, ht = ({
675
- otpSent: o,
676
- oAuthTitle: c,
677
- onOAuthSuccess: t,
678
- onOAuthError: a,
679
- oAuthMethods: u
680
- }) => {
681
- const { logger: s } = Q();
682
- return /* @__PURE__ */ e("div", { className: d.oauthContainer, children: !o && /* @__PURE__ */ e(
683
- I.Container,
684
- {
685
- title: c,
686
- onSuccess: () => {
687
- X("You are logged in successfully", "Login Successful", {
688
- position: "top-right"
689
- }), t && t();
690
- },
691
- onError: (r) => {
692
- const h = B(r);
693
- s?.error("OAuth login failed", h.message), a && a(h);
694
- },
695
- children: u?.map((r) => /* @__PURE__ */ e(pt, { method: r }, r))
696
- }
697
- ) });
698
- }, ft = ({
699
- oAuthMethods: o,
700
- oAuthTitle: c = "Studio",
701
- showDivider: t,
702
- dividerText: a,
703
- onOAuthSuccess: u,
704
- onOAuthError: s
705
- }) => /* @__PURE__ */ l(q, { children: [
706
- /* @__PURE__ */ e(
707
- ht,
708
- {
709
- otpSent: !t,
710
- oAuthTitle: c,
711
- onOAuthSuccess: u,
712
- onOAuthError: s,
713
- oAuthMethods: o
714
- }
715
- ),
716
- t && /* @__PURE__ */ l("div", { className: d.divider, children: [
717
- /* @__PURE__ */ e("div", { className: d.dividerLine }),
718
- /* @__PURE__ */ e("div", { className: d.dividerText, children: a }),
719
- /* @__PURE__ */ e("div", { className: d.dividerLine })
720
- ] })
721
- ] }), kt = ({
722
- className: o,
723
- oAuthTitle: c = "Studio",
724
- page: t,
725
- magicLinkSent: a,
726
- setMagicLinkSent: u,
727
- oAuthMethods: s
728
- }) => {
729
- const { refetchLoginStatus: r } = $(), h = F(() => t?.access?.[0]?.kind === "authentication" && t?.access?.[0]?.options?.primary_method || "otp", [t?.access]), p = F(() => s || (t?.access?.[0]?.kind === "authentication" ? t?.access?.[0]?.options?.methods?.filter((i) => ee.includes(i)) || [] : []), [t?.access, s]), n = () => {
730
- r();
731
- }, y = (i) => {
732
- Z(i);
733
- }, v = () => {
734
- switch (h) {
735
- case "whatsapp":
736
- return "or sign in with WhatsApp";
737
- case "magiclink":
738
- case "otp":
739
- default:
740
- return "or sign in with email";
741
- }
742
- };
743
- return /* @__PURE__ */ l("div", { className: `${d.container} ${o || ""}`, children: [
744
- p.length > 0 && !a && /* @__PURE__ */ e(
745
- ft,
746
- {
747
- oAuthMethods: p,
748
- oAuthTitle: c,
749
- showDivider: !0,
750
- dividerText: v(),
751
- onOAuthSuccess: n,
752
- onOAuthError: y
753
- }
754
- ),
755
- /* @__PURE__ */ e("div", { className: d.formSection, children: /* @__PURE__ */ e(
756
- mt,
757
- {
758
- method: h,
759
- onMagicLinkSent: u
760
- }
761
- ) })
762
- ] });
763
- };
764
- export {
765
- kt as L
766
- };