azirid-react 0.6.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.
package/dist/index.js ADDED
@@ -0,0 +1,3275 @@
1
+ import { createContext, forwardRef, useMemo, useCallback, useContext, useEffect, useState, useRef } from 'react';
2
+ import { useForm } from 'react-hook-form';
3
+ import { zodResolver } from '@hookform/resolvers/zod';
4
+ import { z } from 'zod';
5
+ import { clsx } from 'clsx';
6
+ import { twMerge } from 'tailwind-merge';
7
+ import { QueryClient, QueryClientProvider, useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
8
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
9
+ import { cva } from 'class-variance-authority';
10
+ import { Slot } from 'radix-ui';
11
+
12
+ function createLoginSchema(v) {
13
+ return z.object({
14
+ email: z.string({ required_error: v.emailRequired }).min(1, v.emailRequired).email(v.emailInvalid),
15
+ password: z.string({ required_error: v.passwordRequired }).min(1, v.passwordRequired)
16
+ });
17
+ }
18
+ function createSignupSchema(v) {
19
+ return z.object({
20
+ email: z.string({ required_error: v.emailRequired }).min(1, v.emailRequired).email(v.emailInvalid),
21
+ password: z.string({ required_error: v.passwordRequired }).min(10, v.passwordMinLength),
22
+ acceptedTosVersion: z.string().optional(),
23
+ acceptedPrivacyVersion: z.string().optional()
24
+ });
25
+ }
26
+ var loginSchema = z.object({
27
+ email: z.string({ required_error: "El correo es requerido" }).min(1, "El correo es requerido").email("Correo electr\xF3nico inv\xE1lido"),
28
+ password: z.string({ required_error: "La contrase\xF1a es requerida" }).min(1, "La contrase\xF1a es requerida")
29
+ });
30
+ var signupSchema = z.object({
31
+ email: z.string({ required_error: "El correo es requerido" }).min(1, "El correo es requerido").email("Correo electr\xF3nico inv\xE1lido"),
32
+ password: z.string({ required_error: "La contrase\xF1a es requerida" }).min(10, "La contrase\xF1a debe tener al menos 10 caracteres"),
33
+ acceptedTosVersion: z.string().optional(),
34
+ acceptedPrivacyVersion: z.string().optional()
35
+ });
36
+ var changePasswordSchema = z.object({
37
+ currentPassword: z.string({ required_error: "La contrase\xF1a actual es requerida" }).min(1, "La contrase\xF1a actual es requerida"),
38
+ newPassword: z.string({ required_error: "La nueva contrase\xF1a es requerida" }).min(10, "La contrase\xF1a debe tener al menos 10 caracteres")
39
+ });
40
+ var magicLinkRequestSchema = z.object({
41
+ email: z.string({ required_error: "El correo es requerido" }).min(1, "El correo es requerido").email("Correo electr\xF3nico inv\xE1lido")
42
+ });
43
+ var magicLinkVerifySchema = z.object({
44
+ token: z.string({ required_error: "El token es requerido" }).min(1, "El token es requerido")
45
+ });
46
+ var socialLoginSchema = z.object({
47
+ provider: z.enum(["google", "github"], {
48
+ required_error: "El proveedor es requerido"
49
+ }),
50
+ providerAccountId: z.string({ required_error: "El ID de proveedor es requerido" }).min(1, "El ID de proveedor es requerido"),
51
+ email: z.string({ required_error: "El correo es requerido" }).min(1, "El correo es requerido").email("Correo electr\xF3nico inv\xE1lido"),
52
+ emailVerified: z.boolean().optional(),
53
+ firstName: z.string().optional(),
54
+ lastName: z.string().optional(),
55
+ createUserIfNotExists: z.boolean().optional(),
56
+ turnstileToken: z.string().optional(),
57
+ acceptedTosVersion: z.string().optional(),
58
+ acceptedPrivacyVersion: z.string().optional()
59
+ });
60
+ var passkeyRegisterStartSchema = z.object({
61
+ deviceName: z.string().optional()
62
+ });
63
+ function cn(...inputs) {
64
+ return twMerge(clsx(inputs));
65
+ }
66
+
67
+ // src/client/index.ts
68
+ function isAuthError(err) {
69
+ return err instanceof Error && typeof err.status === "number" && (err.status === 401 || err.status === 403);
70
+ }
71
+ var SUFFIXES = {
72
+ login: "login",
73
+ signup: "signup",
74
+ logout: "logout",
75
+ me: "me",
76
+ refresh: "refresh",
77
+ bootstrap: "session/bootstrap",
78
+ magicLinkRequest: "magic-link/request",
79
+ magicLinkVerify: "magic-link/verify",
80
+ socialLogin: "social/login",
81
+ changePassword: "password/change",
82
+ passkeyLogin: "passkeys/login",
83
+ passkeyLoginStart: "passkeys/login/start",
84
+ passkeyLoginVerify: "passkeys/login/verify",
85
+ passkeyRegisterStart: "passkeys/register/start",
86
+ passkeyRegisterVerify: "passkeys/register/verify",
87
+ passkeys: "passkeys",
88
+ providers: "billing/providers",
89
+ plans: "billing/plans",
90
+ subscription: "billing/subscription",
91
+ checkout: "billing/checkout",
92
+ billingPortal: "billing/portal",
93
+ invoices: "billing/invoices",
94
+ submitTransferProof: "billing/transfer-proof",
95
+ transferProofs: "billing/transfer-proofs",
96
+ payphoneConfirm: "billing/payphone/confirm",
97
+ referralMe: "referrals/me",
98
+ referralStats: "referrals/stats"
99
+ };
100
+ var BASE_PATHS = {
101
+ /** Proxy mode (Next.js): requests go to the same origin via route handler */
102
+ proxy: "/api/auth",
103
+ /** Direct mode: requests go straight to the Azirid API */
104
+ direct: "/v1/users/auth"
105
+ };
106
+ function buildPaths(basePath) {
107
+ const bp = basePath.replace(/\/$/, "");
108
+ return Object.fromEntries(
109
+ Object.entries(SUFFIXES).map(([key, suffix]) => [key, `${bp}/${suffix}`])
110
+ );
111
+ }
112
+ var PATHS = buildPaths(BASE_PATHS.direct);
113
+ function createAccessClient(config, appContext) {
114
+ const baseUrl = config.baseUrl.replace(/\/$/, "");
115
+ const paths = config.basePath ? buildPaths(config.basePath) : PATHS;
116
+ const storageKeyRt = "__azrt";
117
+ const storageKeyCsrf = "__azxc";
118
+ function ssGet(key) {
119
+ try {
120
+ return typeof sessionStorage !== "undefined" ? sessionStorage.getItem(key) : null;
121
+ } catch {
122
+ return null;
123
+ }
124
+ }
125
+ function ssSet(key, value) {
126
+ try {
127
+ if (typeof sessionStorage === "undefined") return;
128
+ if (value) sessionStorage.setItem(key, value);
129
+ else sessionStorage.removeItem(key);
130
+ } catch {
131
+ }
132
+ }
133
+ let accessToken = null;
134
+ let refreshToken = ssGet(storageKeyRt);
135
+ let csrfToken = ssGet(storageKeyCsrf);
136
+ let refreshPromise = null;
137
+ function setAccessToken(token) {
138
+ accessToken = token;
139
+ }
140
+ function getAccessToken() {
141
+ return accessToken;
142
+ }
143
+ function setRefreshToken(token) {
144
+ refreshToken = token;
145
+ ssSet(storageKeyRt, token);
146
+ }
147
+ function getRefreshToken() {
148
+ return refreshToken;
149
+ }
150
+ function setCsrfToken(token) {
151
+ csrfToken = token;
152
+ ssSet(storageKeyCsrf, token);
153
+ }
154
+ const csrfCookieName = "_axc";
155
+ function getCsrfToken() {
156
+ if (csrfToken) return csrfToken;
157
+ if (typeof document === "undefined") return null;
158
+ const match = document.cookie.match(new RegExp(`(?:^|;\\s*)${csrfCookieName}=([^;]*)`));
159
+ return match ? decodeURIComponent(match[1]) : null;
160
+ }
161
+ const sessionPaths = [paths.refresh, paths.bootstrap, paths.logout];
162
+ async function refreshTokensInternal() {
163
+ const reqHeaders = {
164
+ "Content-Type": "application/json",
165
+ ...config.headers
166
+ };
167
+ if (appContext?.publishableKey) {
168
+ reqHeaders["X-Publishable-Key"] = appContext.publishableKey;
169
+ }
170
+ const csrf = getCsrfToken();
171
+ if (csrf) reqHeaders["X-CSRF-Token"] = csrf;
172
+ const bodyPayload = {};
173
+ if (refreshToken) {
174
+ bodyPayload["rt"] = refreshToken;
175
+ }
176
+ const res = await fetch(`${baseUrl}${paths.refresh}`, {
177
+ method: "POST",
178
+ headers: reqHeaders,
179
+ credentials: "include",
180
+ body: JSON.stringify(bodyPayload)
181
+ });
182
+ if (!res.ok) {
183
+ accessToken = null;
184
+ setRefreshToken(null);
185
+ setCsrfToken(null);
186
+ throw new Error("Session expired");
187
+ }
188
+ const raw = await res.json();
189
+ const json = raw && typeof raw === "object" && "data" in raw && "meta" in raw ? raw.data : raw;
190
+ accessToken = json.at ?? json.accessToken ?? null;
191
+ const rt = json.rt ?? json.refreshToken;
192
+ const xc = json.xc ?? json.csrfToken;
193
+ if (rt) setRefreshToken(rt);
194
+ if (xc) setCsrfToken(xc);
195
+ }
196
+ function refreshTokens() {
197
+ if (refreshPromise) return refreshPromise;
198
+ refreshPromise = refreshTokensInternal().finally(() => {
199
+ refreshPromise = null;
200
+ });
201
+ return refreshPromise;
202
+ }
203
+ async function request(method, path, body) {
204
+ const headers = {
205
+ "Content-Type": "application/json",
206
+ ...config.headers
207
+ };
208
+ if (appContext?.publishableKey) {
209
+ headers["X-Publishable-Key"] = appContext.publishableKey;
210
+ }
211
+ const isSessionPath = sessionPaths.includes(path);
212
+ if (accessToken && !isSessionPath) {
213
+ headers["Authorization"] = `Bearer ${accessToken}`;
214
+ }
215
+ const csrf = getCsrfToken();
216
+ if (csrf) {
217
+ headers["X-CSRF-Token"] = csrf;
218
+ }
219
+ let requestBody = body;
220
+ if (isSessionPath && refreshToken) {
221
+ const existing = typeof body === "object" && body !== null ? body : {};
222
+ if (!existing["rt"]) {
223
+ requestBody = { ...existing, rt: refreshToken };
224
+ }
225
+ }
226
+ let res = await fetch(`${baseUrl}${path}`, {
227
+ method,
228
+ headers,
229
+ credentials: "include",
230
+ ...requestBody !== void 0 ? { body: JSON.stringify(requestBody) } : {}
231
+ });
232
+ const skipRefreshPaths = [
233
+ paths.refresh,
234
+ paths.login,
235
+ paths.signup,
236
+ paths.bootstrap,
237
+ paths.logout
238
+ ];
239
+ if (res.status === 401 && !skipRefreshPaths.includes(path)) {
240
+ try {
241
+ await refreshTokens();
242
+ } catch {
243
+ let msg = "Session expired";
244
+ try {
245
+ const json2 = await res.json();
246
+ msg = json2.message || json2.error?.message || (typeof json2.error === "string" ? json2.error : null) || msg;
247
+ } catch {
248
+ }
249
+ throw new Error(msg);
250
+ }
251
+ const retryHeaders = {
252
+ "Content-Type": "application/json",
253
+ ...config.headers
254
+ };
255
+ if (appContext?.publishableKey) {
256
+ retryHeaders["X-Publishable-Key"] = appContext.publishableKey;
257
+ }
258
+ if (accessToken && !isSessionPath) {
259
+ retryHeaders["Authorization"] = `Bearer ${accessToken}`;
260
+ }
261
+ const retryCsrf = getCsrfToken();
262
+ if (retryCsrf) {
263
+ retryHeaders["X-CSRF-Token"] = retryCsrf;
264
+ }
265
+ res = await fetch(`${baseUrl}${path}`, {
266
+ method,
267
+ headers: retryHeaders,
268
+ credentials: "include",
269
+ ...requestBody !== void 0 ? { body: JSON.stringify(requestBody) } : {}
270
+ });
271
+ }
272
+ if (!res.ok) {
273
+ let msg = `Error ${res.status}`;
274
+ try {
275
+ const json2 = await res.json();
276
+ msg = json2.message || json2.error?.message || (typeof json2.error === "string" ? json2.error : null) || msg;
277
+ } catch {
278
+ }
279
+ const err = new Error(msg);
280
+ err.status = res.status;
281
+ throw err;
282
+ }
283
+ if (res.status === 204) return void 0;
284
+ const json = await res.json();
285
+ if (json && typeof json === "object" && "data" in json && "meta" in json) {
286
+ return json.data;
287
+ }
288
+ return json;
289
+ }
290
+ return {
291
+ post: (path, body) => request("POST", path, body),
292
+ get: (path) => request("GET", path),
293
+ patch: (path, body) => request("PATCH", path, body),
294
+ del: (path) => request("DELETE", path),
295
+ paths,
296
+ baseUrl,
297
+ appContext,
298
+ setAccessToken,
299
+ getAccessToken,
300
+ setRefreshToken,
301
+ getRefreshToken,
302
+ setCsrfToken,
303
+ getCsrfToken,
304
+ refreshSession: refreshTokens
305
+ };
306
+ }
307
+
308
+ // src/i18n/es.ts
309
+ var es = {
310
+ login: {
311
+ title: "Inicia sesi\xF3n en tu cuenta",
312
+ description: "Ingresa tus credenciales para acceder al dashboard.",
313
+ submit: "Iniciar sesi\xF3n",
314
+ emailLabel: "Correo electr\xF3nico",
315
+ emailPlaceholder: "tu@empresa.com",
316
+ passwordLabel: "Contrase\xF1a",
317
+ passwordPlaceholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
318
+ },
319
+ signup: {
320
+ title: "Crea tu cuenta",
321
+ description: "Ingresa tus datos para registrarte.",
322
+ submit: "Crear cuenta",
323
+ emailLabel: "Correo electr\xF3nico",
324
+ emailPlaceholder: "tu@empresa.com",
325
+ passwordLabel: "Contrase\xF1a",
326
+ passwordPlaceholder: "M\xEDn. 10 caracteres",
327
+ confirmPasswordLabel: "Confirmar contrase\xF1a",
328
+ confirmPasswordPlaceholder: "Repite tu contrase\xF1a"
329
+ },
330
+ forgotPassword: {
331
+ title: "Recuperar contrase\xF1a",
332
+ description: "Ingresa tu correo electr\xF3nico y te enviaremos un enlace para restablecer tu contrase\xF1a.",
333
+ submit: "Enviar enlace",
334
+ emailLabel: "Correo electr\xF3nico",
335
+ emailPlaceholder: "tu@empresa.com",
336
+ successMessage: "Revisa tu correo electr\xF3nico para restablecer tu contrase\xF1a."
337
+ },
338
+ resetPassword: {
339
+ title: "Restablecer contrase\xF1a",
340
+ description: "Ingresa tu nueva contrase\xF1a.",
341
+ submit: "Restablecer contrase\xF1a",
342
+ newPasswordLabel: "Nueva contrase\xF1a",
343
+ newPasswordPlaceholder: "M\xEDn. 10 caracteres",
344
+ confirmPasswordLabel: "Confirmar contrase\xF1a",
345
+ confirmPasswordPlaceholder: "Repite tu contrase\xF1a"
346
+ },
347
+ social: {
348
+ google: "Continuar con Google",
349
+ apple: "Continuar con Apple",
350
+ separator: "o continuar con correo",
351
+ comingSoon: "Pr\xF3ximamente"
352
+ },
353
+ passwordToggle: {
354
+ show: "Ver",
355
+ hide: "Ocultar"
356
+ },
357
+ securedBy: "Protegido por",
358
+ billing: {
359
+ pay: "Pagar",
360
+ selectPaymentMethod: "Selecciona m\xE9todo de pago",
361
+ creditCard: "Tarjeta de cr\xE9dito/d\xE9bito",
362
+ paypal: "PayPal",
363
+ payphone: "Payphone",
364
+ bankTransfer: "Transferencia bancaria",
365
+ cancel: "Cancelar",
366
+ processing: "Procesando..."
367
+ },
368
+ validation: {
369
+ emailRequired: "El correo es requerido",
370
+ emailInvalid: "Correo electr\xF3nico inv\xE1lido",
371
+ passwordRequired: "La contrase\xF1a es requerida",
372
+ passwordMinLength: "La contrase\xF1a debe tener al menos 10 caracteres",
373
+ confirmPasswordRequired: "Confirma tu contrase\xF1a",
374
+ passwordsMismatch: "Las contrase\xF1as no coinciden",
375
+ tokenRequired: "El token es requerido",
376
+ newPasswordRequired: "La nueva contrase\xF1a es requerida",
377
+ currentPasswordRequired: "La contrase\xF1a actual es requerida",
378
+ mfaCodeRequired: "El c\xF3digo es requerido",
379
+ mfaCodeLength: "El c\xF3digo debe tener 6 d\xEDgitos",
380
+ providerRequired: "El proveedor es requerido",
381
+ providerIdRequired: "El ID de proveedor es requerido",
382
+ urlInvalid: "URL inv\xE1lida"
383
+ }
384
+ };
385
+
386
+ // src/i18n/en.ts
387
+ var en = {
388
+ login: {
389
+ title: "Sign in to your account",
390
+ description: "Enter your credentials to access the dashboard.",
391
+ submit: "Sign in",
392
+ emailLabel: "Email",
393
+ emailPlaceholder: "you@company.com",
394
+ passwordLabel: "Password",
395
+ passwordPlaceholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
396
+ },
397
+ signup: {
398
+ title: "Create your account",
399
+ description: "Enter your details to sign up.",
400
+ submit: "Create account",
401
+ emailLabel: "Email",
402
+ emailPlaceholder: "you@company.com",
403
+ passwordLabel: "Password",
404
+ passwordPlaceholder: "Min. 10 characters",
405
+ confirmPasswordLabel: "Confirm password",
406
+ confirmPasswordPlaceholder: "Repeat your password"
407
+ },
408
+ forgotPassword: {
409
+ title: "Reset password",
410
+ description: "Enter your email and we'll send you a link to reset your password.",
411
+ submit: "Send link",
412
+ emailLabel: "Email",
413
+ emailPlaceholder: "you@company.com",
414
+ successMessage: "Check your email to reset your password."
415
+ },
416
+ resetPassword: {
417
+ title: "Reset password",
418
+ description: "Enter your new password.",
419
+ submit: "Reset password",
420
+ newPasswordLabel: "New password",
421
+ newPasswordPlaceholder: "Min. 10 characters",
422
+ confirmPasswordLabel: "Confirm password",
423
+ confirmPasswordPlaceholder: "Repeat your password"
424
+ },
425
+ social: {
426
+ google: "Continue with Google",
427
+ apple: "Continue with Apple",
428
+ separator: "or continue with email",
429
+ comingSoon: "Coming soon"
430
+ },
431
+ passwordToggle: {
432
+ show: "Show",
433
+ hide: "Hide"
434
+ },
435
+ securedBy: "Secured by",
436
+ billing: {
437
+ pay: "Pay",
438
+ selectPaymentMethod: "Select payment method",
439
+ creditCard: "Credit/Debit Card",
440
+ paypal: "PayPal",
441
+ payphone: "Payphone",
442
+ bankTransfer: "Bank Transfer",
443
+ cancel: "Cancel",
444
+ processing: "Processing..."
445
+ },
446
+ validation: {
447
+ emailRequired: "Email is required",
448
+ emailInvalid: "Invalid email address",
449
+ passwordRequired: "Password is required",
450
+ passwordMinLength: "Password must be at least 10 characters",
451
+ confirmPasswordRequired: "Please confirm your password",
452
+ passwordsMismatch: "Passwords do not match",
453
+ tokenRequired: "Token is required",
454
+ newPasswordRequired: "New password is required",
455
+ currentPasswordRequired: "Current password is required",
456
+ mfaCodeRequired: "Code is required",
457
+ mfaCodeLength: "Code must be 6 digits",
458
+ providerRequired: "Provider is required",
459
+ providerIdRequired: "Provider ID is required",
460
+ urlInvalid: "Invalid URL"
461
+ }
462
+ };
463
+
464
+ // src/i18n/index.ts
465
+ var dictionaries = { es, en };
466
+ function resolveMessages(locale = "es", overrides) {
467
+ const base = dictionaries[locale] ?? dictionaries.es;
468
+ if (!overrides) return base;
469
+ return {
470
+ login: { ...base.login, ...overrides.login },
471
+ signup: { ...base.signup, ...overrides.signup },
472
+ forgotPassword: { ...base.forgotPassword, ...overrides.forgotPassword },
473
+ resetPassword: { ...base.resetPassword, ...overrides.resetPassword },
474
+ social: { ...base.social, ...overrides.social },
475
+ passwordToggle: { ...base.passwordToggle, ...overrides.passwordToggle },
476
+ securedBy: overrides.securedBy ?? base.securedBy,
477
+ billing: { ...base.billing, ...overrides.billing },
478
+ validation: { ...base.validation, ...overrides.validation }
479
+ };
480
+ }
481
+
482
+ // src/styles/generated.ts
483
+ var css = `/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
484
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-azirid] *,[data-azirid] :before,[data-azirid] :after,[data-azirid] ::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-content:""}}[data-azirid]{--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-blue-500:oklch(62.3% .214 259.815);--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--leading-snug:1.375;--radius-md:calc(var(--aa-radius) - 2px);--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--aa-font-sans,ui-sans-serif, system-ui, sans-serif);--default-mono-font-family:var(--font-mono)}.\\@container\\/card-header{container:card-header/inline-size}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.start{inset-inline-start:var(--spacing)}.z-10{z-index:10}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mr-2{margin-right:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.w-4{width:calc(var(--spacing) * 4)}.w-auto{width:auto}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.auto-rows-min{grid-auto-rows:min-content}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.self-center{align-self:center}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.overflow-hidden{overflow:hidden}.rounded-\\[min\\(var\\(--radius-md\\)\\,10px\\)\\]{border-radius:min(var(--radius-md), 10px)}.rounded-\\[min\\(var\\(--radius-md\\)\\,12px\\)\\]{border-radius:min(var(--radius-md), 12px)}.rounded-lg{border-radius:var(--aa-radius)}.rounded-md{border-radius:calc(var(--aa-radius) - 2px)}.rounded-xl{border-radius:calc(var(--aa-radius) + 4px)}.rounded-t-xl{border-top-left-radius:calc(var(--aa-radius) + 4px);border-top-right-radius:calc(var(--aa-radius) + 4px)}.rounded-b-xl{border-bottom-right-radius:calc(var(--aa-radius) + 4px);border-bottom-left-radius:calc(var(--aa-radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-border{border-color:var(--aa-border)}.border-destructive,.border-destructive\\/50{border-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\\/50{border-color:color-mix(in oklab, var(--aa-destructive) 50%, transparent)}}.border-input{border-color:var(--aa-input)}.border-transparent{border-color:#0000}.bg-background{background-color:var(--aa-background)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-border{background-color:var(--aa-border)}.bg-card{background-color:var(--aa-card)}.bg-destructive,.bg-destructive\\/10{background-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\\/10{background-color:color-mix(in oklab, var(--aa-destructive) 10%, transparent)}}.bg-muted,.bg-muted\\/50{background-color:var(--aa-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\\/50{background-color:color-mix(in oklab, var(--aa-muted) 50%, transparent)}}.bg-primary{background-color:var(--aa-primary)}.bg-secondary{background-color:var(--aa-secondary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-clip-padding{background-clip:padding-box}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.text-center{text-align:center}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[0\\.8rem\\]{font-size:.8rem}.leading-none{--tw-leading:1;line-height:1}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-card-foreground{color:var(--aa-card-foreground)}.text-destructive{color:var(--aa-destructive)}.text-muted-foreground{color:var(--aa-muted-foreground)}.text-primary{color:var(--aa-primary)}.text-primary-foreground{color:var(--aa-primary-foreground)}.text-secondary-foreground{color:var(--aa-secondary-foreground)}.uppercase{text-transform:uppercase}.underline-offset-4{text-underline-offset:4px}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-foreground,.ring-foreground\\/10{--tw-ring-color:var(--aa-foreground)}@supports (color:color-mix(in lab, red, red)){.ring-foreground\\/10{--tw-ring-color:color-mix(in oklab, var(--aa-foreground) 10%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.group-data-\\[disabled\\=true\\]\\:pointer-events-none:is(:where(.group)[data-disabled=true] *){pointer-events:none}.group-data-\\[disabled\\=true\\]\\:opacity-50:is(:where(.group)[data-disabled=true] *){opacity:.5}.group-data-\\[size\\=sm\\]\\/card\\:p-3:is(:where(.group\\/card)[data-size=sm] *){padding:calc(var(--spacing) * 3)}.group-data-\\[size\\=sm\\]\\/card\\:px-3:is(:where(.group\\/card)[data-size=sm] *){padding-inline:calc(var(--spacing) * 3)}.group-data-\\[size\\=sm\\]\\/card\\:text-sm:is(:where(.group\\/card)[data-size=sm] *){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.peer-disabled\\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.file\\:inline-flex::file-selector-button{display:inline-flex}.file\\:h-6::file-selector-button{height:calc(var(--spacing) * 6)}.file\\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\\:bg-transparent::file-selector-button{background-color:#0000}.file\\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\\:text-foreground::file-selector-button{color:var(--aa-foreground)}.placeholder\\:text-muted-foreground::placeholder{color:var(--aa-muted-foreground)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:inset-0:after{content:var(--tw-content);inset:calc(var(--spacing) * 0)}.after\\:top-1\\/2:after{content:var(--tw-content);top:50%}.after\\:z-0:after{content:var(--tw-content);z-index:0}.after\\:flex:after{content:var(--tw-content);display:flex}.after\\:items-center:after{content:var(--tw-content);align-items:center}.after\\:border-t:after{content:var(--tw-content);border-top-style:var(--tw-border-style);border-top-width:1px}.after\\:border-border:after{content:var(--tw-content);border-color:var(--aa-border)}@media (hover:hover){.hover\\:bg-destructive\\/20:hover{background-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-destructive\\/20:hover{background-color:color-mix(in oklab, var(--aa-destructive) 20%, transparent)}}.hover\\:bg-muted:hover{background-color:var(--aa-muted)}.hover\\:bg-secondary\\/80:hover{background-color:var(--aa-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\\:bg-secondary\\/80:hover{background-color:color-mix(in oklab, var(--aa-secondary) 80%, transparent)}}.hover\\:text-foreground:hover{color:var(--aa-foreground)}.hover\\:underline:hover{text-decoration-line:underline}}.focus-visible\\:border-destructive\\/40:focus-visible{border-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.focus-visible\\:border-destructive\\/40:focus-visible{border-color:color-mix(in oklab, var(--aa-destructive) 40%, transparent)}}.focus-visible\\:border-ring:focus-visible{border-color:var(--aa-ring)}.focus-visible\\:ring-3:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\\:ring-destructive\\/20:focus-visible{--tw-ring-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.focus-visible\\:ring-destructive\\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--aa-destructive) 20%, transparent)}}.focus-visible\\:ring-ring\\/50:focus-visible{--tw-ring-color:var(--aa-ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\\:ring-ring\\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--aa-ring) 50%, transparent)}}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:bg-input\\/50:disabled{background-color:var(--aa-input)}@supports (color:color-mix(in lab, red, red)){.disabled\\:bg-input\\/50:disabled{background-color:color-mix(in oklab, var(--aa-input) 50%, transparent)}}.disabled\\:opacity-50:disabled{opacity:.5}:where([data-slot=button-group]) .in-data-\\[slot\\=button-group\\]\\:rounded-lg{border-radius:var(--aa-radius)}.has-data-\\[icon\\=inline-end\\]\\:pr-1\\.5:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 1.5)}.has-data-\\[icon\\=inline-end\\]\\:pr-2:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 2)}.has-data-\\[icon\\=inline-end\\]\\:pr-3:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 3)}.has-data-\\[icon\\=inline-start\\]\\:pl-1\\.5:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 1.5)}.has-data-\\[icon\\=inline-start\\]\\:pl-2:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 2)}.has-data-\\[icon\\=inline-start\\]\\:pl-3:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 3)}.has-data-\\[slot\\=card-action\\]\\:grid-cols-\\[1fr_auto\\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-data-\\[slot\\=card-description\\]\\:grid-rows-\\[auto_auto\\]:has([data-slot=card-description]){grid-template-rows:auto auto}.has-data-\\[slot\\=card-footer\\]\\:pb-0:has([data-slot=card-footer]){padding-bottom:calc(var(--spacing) * 0)}.has-\\[\\>img\\:first-child\\]\\:pt-0:has(>img:first-child){padding-top:calc(var(--spacing) * 0)}.aria-expanded\\:bg-muted[aria-expanded=true]{background-color:var(--aa-muted)}.aria-expanded\\:bg-secondary[aria-expanded=true]{background-color:var(--aa-secondary)}.aria-expanded\\:text-foreground[aria-expanded=true]{color:var(--aa-foreground)}.aria-expanded\\:text-secondary-foreground[aria-expanded=true]{color:var(--aa-secondary-foreground)}.aria-invalid\\:border-destructive[aria-invalid=true]{border-color:var(--aa-destructive)}.aria-invalid\\:ring-3[aria-invalid=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.aria-invalid\\:ring-destructive\\/20[aria-invalid=true]{--tw-ring-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.aria-invalid\\:ring-destructive\\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--aa-destructive) 20%, transparent)}}.data-horizontal\\:h-px[data-horizontal]{height:1px}.data-horizontal\\:w-full[data-horizontal]{width:100%}.data-vertical\\:w-px[data-vertical]{width:1px}.data-vertical\\:self-stretch[data-vertical]{align-self:stretch}.data-\\[size\\=sm\\]\\:gap-3[data-size=sm]{gap:calc(var(--spacing) * 3)}.data-\\[size\\=sm\\]\\:py-3[data-size=sm]{padding-block:calc(var(--spacing) * 3)}.data-\\[size\\=sm\\]\\:has-data-\\[slot\\=card-footer\\]\\:pb-0[data-size=sm]:has([data-slot=card-footer]){padding-bottom:calc(var(--spacing) * 0)}@media (min-width:48rem){.md\\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.dark\\:border-input:is(.dark *){border-color:var(--aa-input)}.dark\\:bg-destructive\\/20:is(.dark *){background-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\\:bg-destructive\\/20:is(.dark *){background-color:color-mix(in oklab, var(--aa-destructive) 20%, transparent)}}.dark\\:bg-input\\/30:is(.dark *){background-color:var(--aa-input)}@supports (color:color-mix(in lab, red, red)){.dark\\:bg-input\\/30:is(.dark *){background-color:color-mix(in oklab, var(--aa-input) 30%, transparent)}}@media (hover:hover){.dark\\:hover\\:bg-destructive\\/30:is(.dark *):hover{background-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:bg-destructive\\/30:is(.dark *):hover{background-color:color-mix(in oklab, var(--aa-destructive) 30%, transparent)}}.dark\\:hover\\:bg-input\\/50:is(.dark *):hover{background-color:var(--aa-input)}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:bg-input\\/50:is(.dark *):hover{background-color:color-mix(in oklab, var(--aa-input) 50%, transparent)}}.dark\\:hover\\:bg-muted\\/50:is(.dark *):hover{background-color:var(--aa-muted)}@supports (color:color-mix(in lab, red, red)){.dark\\:hover\\:bg-muted\\/50:is(.dark *):hover{background-color:color-mix(in oklab, var(--aa-muted) 50%, transparent)}}}.dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible{--tw-ring-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\\:focus-visible\\:ring-destructive\\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab, var(--aa-destructive) 40%, transparent)}}.dark\\:disabled\\:bg-input\\/80:is(.dark *):disabled{background-color:var(--aa-input)}@supports (color:color-mix(in lab, red, red)){.dark\\:disabled\\:bg-input\\/80:is(.dark *):disabled{background-color:color-mix(in oklab, var(--aa-input) 80%, transparent)}}.dark\\:aria-invalid\\:border-destructive\\/50:is(.dark *)[aria-invalid=true]{border-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\\:aria-invalid\\:border-destructive\\/50:is(.dark *)[aria-invalid=true]{border-color:color-mix(in oklab, var(--aa-destructive) 50%, transparent)}}.dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--aa-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\\:aria-invalid\\:ring-destructive\\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--aa-destructive) 40%, transparent)}}.\\[\\&_a\\]\\:underline a{text-decoration-line:underline}.\\[\\&_a\\]\\:underline-offset-4 a{text-underline-offset:4px}@media (hover:hover){.\\[\\&_a\\]\\:hover\\:text-primary a:hover{color:var(--aa-primary)}}.\\[\\&_svg\\]\\:pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:shrink-0 svg{flex-shrink:0}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3 svg:not([class*=size-]){width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-3\\.5 svg:not([class*=size-]){width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 svg:not([class*=size-]){width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\\[\\.border-b\\]\\:pb-4.border-b{padding-bottom:calc(var(--spacing) * 4)}.group-data-\\[size\\=sm\\]\\/card\\:\\[\\.border-b\\]\\:pb-3:is(:where(.group\\/card)[data-size=sm] *).border-b{padding-bottom:calc(var(--spacing) * 3)}@media (hover:hover){.\\[a\\]\\:hover\\:bg-primary\\/80:is(a):hover{background-color:var(--aa-primary)}@supports (color:color-mix(in lab, red, red)){.\\[a\\]\\:hover\\:bg-primary\\/80:is(a):hover{background-color:color-mix(in oklab, var(--aa-primary) 80%, transparent)}}}:is(.\\*\\:\\[img\\:first-child\\]\\:rounded-t-xl>*):is(img:first-child){border-top-left-radius:calc(var(--aa-radius) + 4px);border-top-right-radius:calc(var(--aa-radius) + 4px)}:is(.\\*\\:\\[img\\:last-child\\]\\:rounded-b-xl>*):is(img:last-child){border-bottom-right-radius:calc(var(--aa-radius) + 4px);border-bottom-left-radius:calc(var(--aa-radius) + 4px)}[data-azirid]{--aa-radius:.625rem;--aa-background:oklch(100% 0 0);--aa-foreground:oklch(14.5% 0 0);--aa-card:oklch(100% 0 0);--aa-card-foreground:oklch(14.5% 0 0);--aa-popover:oklch(100% 0 0);--aa-popover-foreground:oklch(14.5% 0 0);--aa-primary:oklch(20.5% 0 0);--aa-primary-foreground:oklch(98.5% 0 0);--aa-secondary:oklch(97% 0 0);--aa-secondary-foreground:oklch(20.5% 0 0);--aa-muted:oklch(97% 0 0);--aa-muted-foreground:oklch(55.6% 0 0);--aa-accent:oklch(97% 0 0);--aa-accent-foreground:oklch(20.5% 0 0);--aa-destructive:oklch(57.7% .245 27.325);--aa-border:oklch(92.2% 0 0);--aa-input:oklch(92.2% 0 0);--aa-ring:oklch(70.8% 0 0);--aa-font-sans:ui-sans-serif, system-ui, sans-serif}@layer base{[data-azirid]{font-family:var(--aa-font-sans);color:var(--aa-foreground);background-color:var(--aa-background);-webkit-text-size-adjust:100%;tab-size:4;-webkit-font-smoothing:antialiased;line-height:1.5}[data-azirid] *,[data-azirid] :before,[data-azirid] :after{box-sizing:border-box;border:0 solid;border-color:var(--aa-border);margin:0;padding:0}[data-azirid] hr{height:0;color:inherit;border-top-width:1px}[data-azirid] h1,[data-azirid] h2,[data-azirid] h3,[data-azirid] h4,[data-azirid] h5,[data-azirid] h6{font-size:inherit;font-weight:inherit}[data-azirid] a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}[data-azirid] b,[data-azirid] strong{font-weight:bolder}[data-azirid] code,[data-azirid] kbd,[data-azirid] samp,[data-azirid] pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}[data-azirid] small{font-size:80%}[data-azirid] table{text-indent:0;border-color:inherit;border-collapse:collapse}[data-azirid] button,[data-azirid] input,[data-azirid] optgroup,[data-azirid] select,[data-azirid] textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}[data-azirid] button,[data-azirid] select{text-transform:none}[data-azirid] button,[data-azirid] input[type=button],[data-azirid] input[type=reset],[data-azirid] input[type=submit]{-webkit-appearance:button;background-color:#0000;background-image:none}[data-azirid] :-moz-focusring{outline:auto}[data-azirid] ::-moz-focus-inner{border-style:none;padding:0}[data-azirid] :-moz-ui-invalid{box-shadow:none}[data-azirid] progress{vertical-align:baseline}[data-azirid] ::-webkit-inner-spin-button{height:auto}[data-azirid] ::-webkit-outer-spin-button{height:auto}[data-azirid] [type=search]{-webkit-appearance:textfield;outline-offset:-2px}[data-azirid] ::-webkit-search-decoration{-webkit-appearance:none}[data-azirid] ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[data-azirid] summary{display:list-item}[data-azirid] ol,[data-azirid] ul,[data-azirid] menu{margin:0;padding:0;list-style:none}[data-azirid] textarea{resize:vertical}[data-azirid] ::placeholder{opacity:1;color:currentColor}@supports (color:color-mix(in lab, red, red)){[data-azirid] ::placeholder{color:color-mix(in oklch, currentColor 50%, transparent)}}[data-azirid] img,[data-azirid] svg,[data-azirid] video,[data-azirid] canvas,[data-azirid] audio,[data-azirid] iframe,[data-azirid] embed,[data-azirid] object{vertical-align:middle;display:block}[data-azirid] img,[data-azirid] video{max-width:100%;height:auto}[data-azirid] [hidden]:not([hidden=until-found]){display:none}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}`;
485
+
486
+ // src/utils/inject-styles.ts
487
+ var STYLE_ID = "azirid-access-styles";
488
+ var injected = false;
489
+ function injectStyles() {
490
+ if (injected || typeof document === "undefined") return;
491
+ if (document.getElementById(STYLE_ID)) {
492
+ injected = true;
493
+ return;
494
+ }
495
+ const style = document.createElement("style");
496
+ style.id = STYLE_ID;
497
+ style.textContent = css;
498
+ document.head.appendChild(style);
499
+ injected = true;
500
+ }
501
+ function removeStyles() {
502
+ if (typeof document === "undefined") return;
503
+ document.getElementById(STYLE_ID)?.remove();
504
+ injected = false;
505
+ }
506
+ var AziridContext = createContext(null);
507
+ AziridContext.displayName = "AziridContext";
508
+ var ClientContext = createContext(null);
509
+ ClientContext.displayName = "AccessClientContext";
510
+ var BrandingContext = createContext(null);
511
+ BrandingContext.displayName = "BrandingContext";
512
+ function useAccessClient() {
513
+ const ctx = useContext(ClientContext);
514
+ if (!ctx) {
515
+ throw new Error("useAccessClient must be used within an <AziridProvider>.");
516
+ }
517
+ return ctx;
518
+ }
519
+ function useBranding() {
520
+ const ctx = useContext(BrandingContext);
521
+ return ctx?.branding ?? null;
522
+ }
523
+ function useMessages() {
524
+ const ctx = useContext(BrandingContext);
525
+ if (ctx) return ctx.messages;
526
+ return resolveMessages("es");
527
+ }
528
+ var defaultQueryClient = new QueryClient({
529
+ defaultOptions: {
530
+ queries: { retry: false, refetchOnWindowFocus: false }
531
+ }
532
+ });
533
+ function AziridProviderInner({
534
+ children,
535
+ client,
536
+ props
537
+ }) {
538
+ const queryClient = useQueryClient();
539
+ const [user, setUser] = useState(null);
540
+ const [accessToken, setAccessToken] = useState(null);
541
+ const [error, setError] = useState(null);
542
+ const [branding, setBranding] = useState(null);
543
+ const [isBootstrapping, setIsBootstrapping] = useState(props.autoBootstrap ?? true);
544
+ const messages = useMemo(
545
+ () => resolveMessages(props.locale ?? "es", props.messages),
546
+ [props.locale, props.messages]
547
+ );
548
+ const brandingValue = useMemo(
549
+ () => ({ branding, messages }),
550
+ [branding, messages]
551
+ );
552
+ const isProxyMode = !props.apiUrl;
553
+ const syncUrl = useMemo(() => {
554
+ if (props.sessionSyncUrl === false) return null;
555
+ if (props.sessionSyncUrl) return props.sessionSyncUrl;
556
+ if (isProxyMode) return null;
557
+ if (client.appContext?.publishableKey?.startsWith("pk_dev")) {
558
+ return "/api/auth/session";
559
+ }
560
+ return null;
561
+ }, [props.sessionSyncUrl, client.appContext?.publishableKey, isProxyMode]);
562
+ const syncSession = useCallback(
563
+ (token) => {
564
+ if (!syncUrl) return;
565
+ if (token) {
566
+ fetch(syncUrl, {
567
+ method: "POST",
568
+ headers: { "Content-Type": "application/json" },
569
+ body: JSON.stringify({ token })
570
+ }).catch(() => {
571
+ });
572
+ } else {
573
+ fetch(syncUrl, { method: "DELETE" }).catch(() => {
574
+ });
575
+ }
576
+ },
577
+ [syncUrl]
578
+ );
579
+ const updateAccessToken = useCallback(
580
+ (token) => {
581
+ setAccessToken(token);
582
+ client.setAccessToken(token);
583
+ syncSession(token);
584
+ },
585
+ [client, syncSession]
586
+ );
587
+ const saveSessionTokens = useCallback(
588
+ (data) => {
589
+ const rt = data.rt ?? data.refreshToken;
590
+ const xc = data.xc ?? data.csrfToken;
591
+ if (rt) client.setRefreshToken(rt);
592
+ if (xc) client.setCsrfToken(xc);
593
+ },
594
+ [client]
595
+ );
596
+ const clearSession = useCallback(() => {
597
+ setUser(null);
598
+ updateAccessToken(null);
599
+ client.setRefreshToken(null);
600
+ client.setCsrfToken(null);
601
+ }, [client, updateAccessToken]);
602
+ const withAppContext = useCallback(
603
+ (body) => {
604
+ if (client.appContext?.tenantId) {
605
+ return { ...body, tenantId: client.appContext.tenantId };
606
+ }
607
+ return body;
608
+ },
609
+ [client]
610
+ );
611
+ useEffect(() => {
612
+ const autoBootstrap = props.autoBootstrap ?? true;
613
+ if (!autoBootstrap) return;
614
+ let cancelled = false;
615
+ async function bootstrap() {
616
+ setIsBootstrapping(true);
617
+ try {
618
+ const response = await client.post(client.paths.bootstrap);
619
+ if (cancelled) return;
620
+ if (response.branding) {
621
+ setBranding(response.branding);
622
+ }
623
+ if (response.authenticated) {
624
+ const r = response;
625
+ setUser(response.user);
626
+ updateAccessToken(r.at ?? r.accessToken);
627
+ saveSessionTokens(r);
628
+ }
629
+ } catch (err) {
630
+ if (typeof console !== "undefined") {
631
+ const msg = err instanceof Error ? err.message : JSON.stringify(err);
632
+ console.warn("[azirid-access] bootstrap failed:", msg);
633
+ }
634
+ } finally {
635
+ if (!cancelled) {
636
+ setIsBootstrapping(false);
637
+ }
638
+ }
639
+ }
640
+ bootstrap();
641
+ return () => {
642
+ cancelled = true;
643
+ };
644
+ }, [client, props.autoBootstrap, updateAccessToken, saveSessionTokens]);
645
+ const silentRefresh = useCallback(async () => {
646
+ if (!client.getAccessToken()) return;
647
+ try {
648
+ await client.refreshSession();
649
+ updateAccessToken(client.getAccessToken());
650
+ } catch (err) {
651
+ if (isAuthError(err)) {
652
+ clearSession();
653
+ props.onSessionExpired?.();
654
+ }
655
+ }
656
+ }, [client, updateAccessToken, clearSession, props]);
657
+ useEffect(() => {
658
+ const intervalMs = props.refreshInterval ?? 5e4;
659
+ if (intervalMs <= 0) return;
660
+ const id = setInterval(silentRefresh, intervalMs);
661
+ return () => clearInterval(id);
662
+ }, [props.refreshInterval, silentRefresh]);
663
+ useEffect(() => {
664
+ function handleVisibilityChange() {
665
+ if (document.visibilityState === "visible") {
666
+ silentRefresh();
667
+ }
668
+ }
669
+ document.addEventListener("visibilitychange", handleVisibilityChange);
670
+ return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
671
+ }, [silentRefresh]);
672
+ const normalizeToken = useCallback(
673
+ (data) => data.at ?? data.accessToken,
674
+ []
675
+ );
676
+ const loginMutation = useMutation({
677
+ mutationFn: (data) => client.post(client.paths.login, withAppContext(data)),
678
+ onSuccess: (data) => {
679
+ setUser(data.user);
680
+ updateAccessToken(normalizeToken(data));
681
+ saveSessionTokens(data);
682
+ setError(null);
683
+ props.onLoginSuccess?.(data);
684
+ },
685
+ onError: (err) => {
686
+ setError(err.message);
687
+ props.onError?.(err.message);
688
+ }
689
+ });
690
+ const signupMutation = useMutation({
691
+ mutationFn: (data) => {
692
+ const { confirmPassword: _, ...payload } = data;
693
+ return client.post(client.paths.signup, withAppContext({ ...payload }));
694
+ },
695
+ onSuccess: (data) => {
696
+ setUser(data.user);
697
+ updateAccessToken(normalizeToken(data));
698
+ saveSessionTokens(data);
699
+ setError(null);
700
+ props.onSignupSuccess?.(data);
701
+ },
702
+ onError: (err) => {
703
+ setError(err.message);
704
+ props.onError?.(err.message);
705
+ }
706
+ });
707
+ const logoutMutation = useMutation({
708
+ mutationFn: () => client.post(client.paths.logout),
709
+ onSettled: () => {
710
+ clearSession();
711
+ setError(null);
712
+ queryClient.clear();
713
+ props.onLogoutSuccess?.();
714
+ }
715
+ });
716
+ const refreshFn = useCallback(async () => {
717
+ try {
718
+ await client.refreshSession();
719
+ updateAccessToken(client.getAccessToken());
720
+ } catch (err) {
721
+ clearSession();
722
+ queryClient.clear();
723
+ props.onSessionExpired?.();
724
+ throw err;
725
+ }
726
+ }, [client, queryClient, props, updateAccessToken, clearSession]);
727
+ const login = useCallback(
728
+ (data) => loginMutation.mutate(data),
729
+ [loginMutation]
730
+ );
731
+ const signup = useCallback((data) => signupMutation.mutate(data), [signupMutation]);
732
+ const logout = useCallback(() => logoutMutation.mutate(), [logoutMutation]);
733
+ const clearError = useCallback(() => setError(null), []);
734
+ const setUserFn = useCallback((u) => {
735
+ setUser(u);
736
+ }, []);
737
+ const value = useMemo(
738
+ () => ({
739
+ user,
740
+ accessToken,
741
+ isAuthenticated: user !== null,
742
+ isLoading: loginMutation.isPending || signupMutation.isPending,
743
+ error,
744
+ login,
745
+ signup,
746
+ logout,
747
+ clearError,
748
+ refresh: refreshFn,
749
+ setUser: setUserFn,
750
+ isLoginPending: loginMutation.isPending,
751
+ isSignupPending: signupMutation.isPending,
752
+ isBootstrapping,
753
+ loginMutation,
754
+ signupMutation,
755
+ logoutMutation
756
+ }),
757
+ [
758
+ user,
759
+ accessToken,
760
+ error,
761
+ login,
762
+ signup,
763
+ logout,
764
+ clearError,
765
+ refreshFn,
766
+ setUserFn,
767
+ loginMutation,
768
+ signupMutation,
769
+ logoutMutation,
770
+ isBootstrapping
771
+ ]
772
+ );
773
+ return /* @__PURE__ */ jsx(ClientContext.Provider, { value: client, children: /* @__PURE__ */ jsx(AziridContext.Provider, { value, children: /* @__PURE__ */ jsx(BrandingContext.Provider, { value: brandingValue, children }) }) });
774
+ }
775
+ function AziridProvider(props) {
776
+ useEffect(() => {
777
+ injectStyles();
778
+ return () => removeStyles();
779
+ }, []);
780
+ const client = useMemo(() => {
781
+ const appContext = props.publishableKey ? {
782
+ publishableKey: props.publishableKey,
783
+ tenantId: props.tenantId
784
+ } : void 0;
785
+ const isProxy = !props.apiUrl;
786
+ const baseUrl = isProxy ? "" : props.apiUrl.replace(/\/$/, "");
787
+ const basePath = isProxy ? BASE_PATHS.proxy : BASE_PATHS.direct;
788
+ return createAccessClient(
789
+ { baseUrl, basePath, headers: props.fetchOptions },
790
+ appContext
791
+ );
792
+ }, [props.publishableKey, props.tenantId, props.fetchOptions, props.apiUrl]);
793
+ return /* @__PURE__ */ jsx(QueryClientProvider, { client: defaultQueryClient, children: /* @__PURE__ */ jsx(AziridProviderInner, { client, props, children: props.children }) });
794
+ }
795
+ function useAzirid() {
796
+ const ctx = useContext(AziridContext);
797
+ if (!ctx) {
798
+ throw new Error(
799
+ "useAzirid must be used within an <AziridProvider>. Wrap your app (or the relevant subtree) with <AziridProvider>."
800
+ );
801
+ }
802
+ return ctx;
803
+ }
804
+ var buttonVariants = cva(
805
+ "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
806
+ {
807
+ variants: {
808
+ variant: {
809
+ default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
810
+ outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
811
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
812
+ ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
813
+ destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
814
+ link: "text-primary underline-offset-4 hover:underline"
815
+ },
816
+ size: {
817
+ default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
818
+ xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
819
+ sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
820
+ lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
821
+ icon: "size-8",
822
+ "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
823
+ "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
824
+ "icon-lg": "size-9"
825
+ }
826
+ },
827
+ defaultVariants: {
828
+ variant: "default",
829
+ size: "default"
830
+ }
831
+ }
832
+ );
833
+ function Button({
834
+ className,
835
+ variant = "default",
836
+ size = "default",
837
+ asChild = false,
838
+ ...props
839
+ }) {
840
+ const Comp = asChild ? Slot.Root : "button";
841
+ return /* @__PURE__ */ jsx(
842
+ Comp,
843
+ {
844
+ "data-slot": "button",
845
+ "data-variant": variant,
846
+ "data-size": size,
847
+ className: cn(buttonVariants({ variant, size, className })),
848
+ ...props
849
+ }
850
+ );
851
+ }
852
+ function Card({
853
+ className,
854
+ size = "default",
855
+ ...props
856
+ }) {
857
+ return /* @__PURE__ */ jsx(
858
+ "div",
859
+ {
860
+ "data-slot": "card",
861
+ "data-size": size,
862
+ className: cn(
863
+ "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
864
+ className
865
+ ),
866
+ ...props
867
+ }
868
+ );
869
+ }
870
+ function CardHeader({ className, ...props }) {
871
+ return /* @__PURE__ */ jsx(
872
+ "div",
873
+ {
874
+ "data-slot": "card-header",
875
+ className: cn(
876
+ "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
877
+ className
878
+ ),
879
+ ...props
880
+ }
881
+ );
882
+ }
883
+ function CardTitle({ className, ...props }) {
884
+ return /* @__PURE__ */ jsx(
885
+ "div",
886
+ {
887
+ "data-slot": "card-title",
888
+ className: cn(
889
+ "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
890
+ className
891
+ ),
892
+ ...props
893
+ }
894
+ );
895
+ }
896
+ function CardDescription({ className, ...props }) {
897
+ return /* @__PURE__ */ jsx(
898
+ "div",
899
+ {
900
+ "data-slot": "card-description",
901
+ className: cn("text-muted-foreground text-sm", className),
902
+ ...props
903
+ }
904
+ );
905
+ }
906
+ function CardContent({ className, ...props }) {
907
+ return /* @__PURE__ */ jsx(
908
+ "div",
909
+ {
910
+ "data-slot": "card-content",
911
+ className: cn("px-4 group-data-[size=sm]/card:px-3", className),
912
+ ...props
913
+ }
914
+ );
915
+ }
916
+ function FieldGroup({ className, ...props }) {
917
+ return /* @__PURE__ */ jsx("div", { "data-slot": "field-group", className: cn("flex flex-col gap-6", className), ...props });
918
+ }
919
+ function Field({ className, ...props }) {
920
+ return /* @__PURE__ */ jsx("div", { "data-slot": "field", className: cn("grid gap-3", className), ...props });
921
+ }
922
+ function FieldLabel({ className, ...props }) {
923
+ return /* @__PURE__ */ jsx(
924
+ "label",
925
+ {
926
+ "data-slot": "field-label",
927
+ className: cn("text-sm leading-none font-medium", className),
928
+ ...props
929
+ }
930
+ );
931
+ }
932
+ function FieldDescription({ className, ...props }) {
933
+ return /* @__PURE__ */ jsx(
934
+ "div",
935
+ {
936
+ "data-slot": "field-description",
937
+ className: cn(
938
+ "text-muted-foreground [&_a]:hover:text-primary text-sm [&_a]:underline [&_a]:underline-offset-4",
939
+ className
940
+ ),
941
+ ...props
942
+ }
943
+ );
944
+ }
945
+ function FieldSeparator({ className, children, ...props }) {
946
+ return /* @__PURE__ */ jsx(
947
+ "div",
948
+ {
949
+ "data-slot": "field-separator",
950
+ className: cn(
951
+ "after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t",
952
+ className
953
+ ),
954
+ ...props,
955
+ children: /* @__PURE__ */ jsx(
956
+ "span",
957
+ {
958
+ "data-slot": "field-separator-content",
959
+ className: "bg-card text-muted-foreground relative z-10 px-2",
960
+ children
961
+ }
962
+ )
963
+ }
964
+ );
965
+ }
966
+ function Input({ className, type, ...props }) {
967
+ return /* @__PURE__ */ jsx(
968
+ "input",
969
+ {
970
+ type,
971
+ "data-slot": "input",
972
+ className: cn(
973
+ "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
974
+ className
975
+ ),
976
+ ...props
977
+ }
978
+ );
979
+ }
980
+ var LoginForm = forwardRef(
981
+ ({
982
+ onSubmit: onSubmitProp,
983
+ schema: schemaProp,
984
+ isLoading: externalLoading,
985
+ error: externalError,
986
+ className,
987
+ style,
988
+ title: titleProp,
989
+ description: descriptionProp,
990
+ logo: logoProp,
991
+ submitText: submitTextProp,
992
+ footer,
993
+ forgotPassword,
994
+ showSocialButtons = true,
995
+ labels,
996
+ defaultValues
997
+ }, ref) => {
998
+ const msg = useMessages();
999
+ const branding = useBranding();
1000
+ const title = titleProp ?? (branding?.displayName || msg.login.title);
1001
+ const description = descriptionProp ?? msg.login.description;
1002
+ const submitText = submitTextProp ?? msg.login.submit;
1003
+ const logo = logoProp !== void 0 ? logoProp : branding?.logoUrl ? /* @__PURE__ */ jsx("img", { src: branding.logoUrl, alt: branding.displayName ?? "", className: "h-10 w-auto" }) : null;
1004
+ const schema = useMemo(
1005
+ () => schemaProp ?? createLoginSchema(msg.validation),
1006
+ [schemaProp, msg.validation]
1007
+ );
1008
+ let ctxLogin;
1009
+ let ctxError = null;
1010
+ let ctxLoading = false;
1011
+ try {
1012
+ const ctx = useAzirid();
1013
+ ctxLogin = ctx.login;
1014
+ ctxError = ctx.error;
1015
+ ctxLoading = ctx.isLoginPending;
1016
+ } catch {
1017
+ }
1018
+ const {
1019
+ register,
1020
+ handleSubmit,
1021
+ formState: { errors, isSubmitting }
1022
+ } = useForm({
1023
+ resolver: zodResolver(schema),
1024
+ defaultValues: { email: "", password: "", ...defaultValues }
1025
+ });
1026
+ const onSubmit = useCallback(
1027
+ async (values) => {
1028
+ if (onSubmitProp) {
1029
+ await onSubmitProp(values);
1030
+ } else if (ctxLogin) {
1031
+ ctxLogin(values);
1032
+ }
1033
+ },
1034
+ [onSubmitProp, ctxLogin]
1035
+ );
1036
+ const loading = externalLoading ?? ctxLoading ?? isSubmitting;
1037
+ const error = externalError ?? ctxError;
1038
+ const wrapperStyle = useMemo(() => {
1039
+ if (!branding?.primaryColor) return style ?? {};
1040
+ return {
1041
+ ...style,
1042
+ "--aa-primary": branding.primaryColor,
1043
+ "--aa-primary-foreground": "#fff"
1044
+ };
1045
+ }, [style, branding?.primaryColor]);
1046
+ return /* @__PURE__ */ jsxs("div", { "data-azirid": true, className: cn("flex flex-col gap-6", className), style: wrapperStyle, children: [
1047
+ logo && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 self-center font-medium", children: logo }),
1048
+ /* @__PURE__ */ jsxs(Card, { children: [
1049
+ /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
1050
+ title && /* @__PURE__ */ jsx(CardTitle, { className: "text-xl", children: title }),
1051
+ description && /* @__PURE__ */ jsx(CardDescription, { children: description })
1052
+ ] }),
1053
+ /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("form", { ref, onSubmit: handleSubmit(onSubmit), noValidate: true, children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
1054
+ error && /* @__PURE__ */ jsx(
1055
+ "div",
1056
+ {
1057
+ role: "alert",
1058
+ className: "border-destructive/50 bg-destructive/10 text-destructive rounded-md border px-4 py-3 text-sm",
1059
+ children: error
1060
+ }
1061
+ ),
1062
+ showSocialButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
1063
+ /* @__PURE__ */ jsxs(Field, { children: [
1064
+ /* @__PURE__ */ jsxs(Button, { variant: "outline", type: "button", className: "w-full", children: [
1065
+ /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
1066
+ "path",
1067
+ {
1068
+ d: "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701",
1069
+ fill: "currentColor"
1070
+ }
1071
+ ) }),
1072
+ msg.social.apple
1073
+ ] }),
1074
+ /* @__PURE__ */ jsxs(Button, { variant: "outline", type: "button", className: "w-full", children: [
1075
+ /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
1076
+ "path",
1077
+ {
1078
+ d: "M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z",
1079
+ fill: "currentColor"
1080
+ }
1081
+ ) }),
1082
+ msg.social.google
1083
+ ] })
1084
+ ] }),
1085
+ /* @__PURE__ */ jsx(FieldSeparator, { children: msg.social.separator })
1086
+ ] }),
1087
+ /* @__PURE__ */ jsxs(Field, { children: [
1088
+ /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "aa-login-email", children: labels?.email ?? msg.login.emailLabel }),
1089
+ /* @__PURE__ */ jsx(
1090
+ Input,
1091
+ {
1092
+ id: "aa-login-email",
1093
+ type: "email",
1094
+ autoComplete: "email",
1095
+ placeholder: labels?.emailPlaceholder ?? msg.login.emailPlaceholder,
1096
+ disabled: loading,
1097
+ "aria-invalid": !!errors.email,
1098
+ "aria-describedby": errors.email ? "aa-login-email-err" : void 0,
1099
+ ...register("email")
1100
+ }
1101
+ ),
1102
+ errors.email && /* @__PURE__ */ jsx("p", { id: "aa-login-email-err", className: "text-destructive text-xs", children: errors.email.message })
1103
+ ] }),
1104
+ /* @__PURE__ */ jsxs(Field, { children: [
1105
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
1106
+ /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "aa-login-password", children: labels?.password ?? msg.login.passwordLabel }),
1107
+ forgotPassword && /* @__PURE__ */ jsx("span", { className: "ml-auto text-sm underline-offset-4 hover:underline", children: forgotPassword })
1108
+ ] }),
1109
+ /* @__PURE__ */ jsx(
1110
+ Input,
1111
+ {
1112
+ id: "aa-login-password",
1113
+ type: "password",
1114
+ autoComplete: "current-password",
1115
+ placeholder: labels?.passwordPlaceholder ?? msg.login.passwordPlaceholder,
1116
+ disabled: loading,
1117
+ "aria-invalid": !!errors.password,
1118
+ "aria-describedby": errors.password ? "aa-login-pass-err" : void 0,
1119
+ ...register("password")
1120
+ }
1121
+ ),
1122
+ errors.password && /* @__PURE__ */ jsx("p", { id: "aa-login-pass-err", className: "text-destructive text-xs", children: errors.password.message })
1123
+ ] }),
1124
+ /* @__PURE__ */ jsxs(Field, { children: [
1125
+ /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: loading, className: "w-full", children: [
1126
+ loading && /* @__PURE__ */ jsxs(
1127
+ "svg",
1128
+ {
1129
+ className: "mr-2 h-4 w-4 animate-spin",
1130
+ xmlns: "http://www.w3.org/2000/svg",
1131
+ fill: "none",
1132
+ viewBox: "0 0 24 24",
1133
+ "aria-hidden": "true",
1134
+ children: [
1135
+ /* @__PURE__ */ jsx(
1136
+ "circle",
1137
+ {
1138
+ className: "opacity-25",
1139
+ cx: "12",
1140
+ cy: "12",
1141
+ r: "10",
1142
+ stroke: "currentColor",
1143
+ strokeWidth: "4"
1144
+ }
1145
+ ),
1146
+ /* @__PURE__ */ jsx(
1147
+ "path",
1148
+ {
1149
+ className: "opacity-75",
1150
+ fill: "currentColor",
1151
+ d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
1152
+ }
1153
+ )
1154
+ ]
1155
+ }
1156
+ ),
1157
+ submitText
1158
+ ] }),
1159
+ footer && /* @__PURE__ */ jsx(FieldDescription, { className: "text-center", children: footer })
1160
+ ] })
1161
+ ] }) }) })
1162
+ ] })
1163
+ ] });
1164
+ }
1165
+ );
1166
+ LoginForm.displayName = "LoginForm";
1167
+ var SignupForm = forwardRef(
1168
+ ({
1169
+ onSubmit: onSubmitProp,
1170
+ schema: schemaProp,
1171
+ isLoading: externalLoading,
1172
+ error: externalError,
1173
+ className,
1174
+ style,
1175
+ title: titleProp,
1176
+ description: descriptionProp,
1177
+ logo: logoProp,
1178
+ submitText: submitTextProp,
1179
+ footer,
1180
+ showSocialButtons = true,
1181
+ labels
1182
+ }, ref) => {
1183
+ const msg = useMessages();
1184
+ const branding = useBranding();
1185
+ const title = titleProp ?? (branding?.displayName || msg.signup.title);
1186
+ const description = descriptionProp ?? msg.signup.description;
1187
+ const submitText = submitTextProp ?? msg.signup.submit;
1188
+ const logo = logoProp !== void 0 ? logoProp : branding?.logoUrl ? /* @__PURE__ */ jsx("img", { src: branding.logoUrl, alt: branding.displayName ?? "", className: "h-10 w-auto" }) : null;
1189
+ const schema = useMemo(
1190
+ () => schemaProp ?? createSignupSchema(msg.validation),
1191
+ [schemaProp, msg.validation]
1192
+ );
1193
+ let ctxSignup;
1194
+ let ctxError = null;
1195
+ let ctxLoading = false;
1196
+ try {
1197
+ const ctx = useAzirid();
1198
+ ctxSignup = ctx.signup;
1199
+ ctxError = ctx.error;
1200
+ ctxLoading = ctx.isSignupPending;
1201
+ } catch {
1202
+ }
1203
+ const {
1204
+ register,
1205
+ handleSubmit,
1206
+ formState: { errors, isSubmitting }
1207
+ } = useForm({
1208
+ resolver: zodResolver(schema),
1209
+ defaultValues: { email: "", password: "" }
1210
+ });
1211
+ const onSubmit = useCallback(
1212
+ async (values) => {
1213
+ if (onSubmitProp) {
1214
+ await onSubmitProp(values);
1215
+ } else if (ctxSignup) {
1216
+ ctxSignup(values);
1217
+ }
1218
+ },
1219
+ [onSubmitProp, ctxSignup]
1220
+ );
1221
+ const loading = externalLoading ?? ctxLoading ?? isSubmitting;
1222
+ const error = externalError ?? ctxError;
1223
+ const wrapperStyle = useMemo(() => {
1224
+ if (!branding?.primaryColor) return style ?? {};
1225
+ return {
1226
+ ...style,
1227
+ "--aa-primary": branding.primaryColor,
1228
+ "--aa-primary-foreground": "#fff"
1229
+ };
1230
+ }, [style, branding?.primaryColor]);
1231
+ return /* @__PURE__ */ jsxs("div", { "data-azirid": true, className: cn("flex flex-col gap-6", className), style: wrapperStyle, children: [
1232
+ logo && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 self-center font-medium", children: logo }),
1233
+ /* @__PURE__ */ jsxs(Card, { children: [
1234
+ /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
1235
+ title && /* @__PURE__ */ jsx(CardTitle, { className: "text-xl", children: title }),
1236
+ description && /* @__PURE__ */ jsx(CardDescription, { children: description })
1237
+ ] }),
1238
+ /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("form", { ref, onSubmit: handleSubmit(onSubmit), noValidate: true, children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
1239
+ error && /* @__PURE__ */ jsx(
1240
+ "div",
1241
+ {
1242
+ role: "alert",
1243
+ className: "border-destructive/50 bg-destructive/10 text-destructive rounded-md border px-4 py-3 text-sm",
1244
+ children: error
1245
+ }
1246
+ ),
1247
+ showSocialButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
1248
+ /* @__PURE__ */ jsxs(Field, { children: [
1249
+ /* @__PURE__ */ jsxs(Button, { variant: "outline", type: "button", className: "w-full", children: [
1250
+ /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
1251
+ "path",
1252
+ {
1253
+ d: "M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701",
1254
+ fill: "currentColor"
1255
+ }
1256
+ ) }),
1257
+ msg.social.apple
1258
+ ] }),
1259
+ /* @__PURE__ */ jsxs(Button, { variant: "outline", type: "button", className: "w-full", children: [
1260
+ /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
1261
+ "path",
1262
+ {
1263
+ d: "M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z",
1264
+ fill: "currentColor"
1265
+ }
1266
+ ) }),
1267
+ msg.social.google
1268
+ ] })
1269
+ ] }),
1270
+ /* @__PURE__ */ jsx(FieldSeparator, { children: msg.social.separator })
1271
+ ] }),
1272
+ /* @__PURE__ */ jsxs(Field, { children: [
1273
+ /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "aa-signup-email", children: labels?.email ?? msg.signup.emailLabel }),
1274
+ /* @__PURE__ */ jsx(
1275
+ Input,
1276
+ {
1277
+ id: "aa-signup-email",
1278
+ type: "email",
1279
+ autoComplete: "email",
1280
+ placeholder: labels?.emailPlaceholder ?? msg.signup.emailPlaceholder,
1281
+ disabled: loading,
1282
+ "aria-invalid": !!errors.email,
1283
+ "aria-describedby": errors.email ? "aa-signup-email-err" : void 0,
1284
+ ...register("email")
1285
+ }
1286
+ ),
1287
+ errors.email && /* @__PURE__ */ jsx("p", { id: "aa-signup-email-err", className: "text-destructive text-xs", children: errors.email.message })
1288
+ ] }),
1289
+ /* @__PURE__ */ jsxs(Field, { children: [
1290
+ /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "aa-signup-password", children: labels?.password ?? msg.signup.passwordLabel }),
1291
+ /* @__PURE__ */ jsx(
1292
+ Input,
1293
+ {
1294
+ id: "aa-signup-password",
1295
+ type: "password",
1296
+ autoComplete: "new-password",
1297
+ placeholder: labels?.passwordPlaceholder ?? msg.signup.passwordPlaceholder,
1298
+ disabled: loading,
1299
+ "aria-invalid": !!errors.password,
1300
+ "aria-describedby": errors.password ? "aa-signup-pass-err" : void 0,
1301
+ ...register("password")
1302
+ }
1303
+ ),
1304
+ errors.password && /* @__PURE__ */ jsx("p", { id: "aa-signup-pass-err", className: "text-destructive text-xs", children: errors.password.message })
1305
+ ] }),
1306
+ /* @__PURE__ */ jsxs(Field, { children: [
1307
+ /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: loading, className: "w-full", children: [
1308
+ loading && /* @__PURE__ */ jsxs(
1309
+ "svg",
1310
+ {
1311
+ className: "mr-2 h-4 w-4 animate-spin",
1312
+ xmlns: "http://www.w3.org/2000/svg",
1313
+ fill: "none",
1314
+ viewBox: "0 0 24 24",
1315
+ "aria-hidden": "true",
1316
+ children: [
1317
+ /* @__PURE__ */ jsx(
1318
+ "circle",
1319
+ {
1320
+ className: "opacity-25",
1321
+ cx: "12",
1322
+ cy: "12",
1323
+ r: "10",
1324
+ stroke: "currentColor",
1325
+ strokeWidth: "4"
1326
+ }
1327
+ ),
1328
+ /* @__PURE__ */ jsx(
1329
+ "path",
1330
+ {
1331
+ className: "opacity-75",
1332
+ fill: "currentColor",
1333
+ d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
1334
+ }
1335
+ )
1336
+ ]
1337
+ }
1338
+ ),
1339
+ submitText
1340
+ ] }),
1341
+ footer && /* @__PURE__ */ jsx(FieldDescription, { className: "text-center", children: footer })
1342
+ ] })
1343
+ ] }) }) })
1344
+ ] })
1345
+ ] });
1346
+ }
1347
+ );
1348
+ SignupForm.displayName = "SignupForm";
1349
+ function useReferral() {
1350
+ const client = useAccessClient();
1351
+ const query = useQuery({
1352
+ queryKey: ["azirid-access", "referral", "me"],
1353
+ queryFn: () => client.get(client.paths.referralMe),
1354
+ enabled: !!client.getAccessToken()
1355
+ });
1356
+ const copyToClipboard = useCallback(async () => {
1357
+ if (query.data?.referralUrl) {
1358
+ await navigator.clipboard.writeText(query.data.referralUrl);
1359
+ return true;
1360
+ }
1361
+ return false;
1362
+ }, [query.data?.referralUrl]);
1363
+ return useMemo(
1364
+ () => ({ ...query, copyToClipboard }),
1365
+ [query, copyToClipboard]
1366
+ );
1367
+ }
1368
+ var styles = {
1369
+ card: {
1370
+ border: "1px solid #e5e7eb",
1371
+ borderRadius: "12px",
1372
+ padding: "24px",
1373
+ backgroundColor: "#ffffff",
1374
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
1375
+ },
1376
+ title: {
1377
+ margin: "0 0 4px 0",
1378
+ fontSize: "18px",
1379
+ fontWeight: 600,
1380
+ color: "#111827"
1381
+ },
1382
+ description: {
1383
+ margin: "0 0 16px 0",
1384
+ fontSize: "14px",
1385
+ color: "#6b7280"
1386
+ },
1387
+ codeContainer: {
1388
+ display: "flex",
1389
+ alignItems: "center",
1390
+ gap: "8px",
1391
+ marginBottom: "16px"
1392
+ },
1393
+ codeInput: {
1394
+ flex: 1,
1395
+ padding: "10px 12px",
1396
+ border: "1px solid #d1d5db",
1397
+ borderRadius: "8px",
1398
+ backgroundColor: "#f9fafb",
1399
+ fontSize: "14px",
1400
+ fontFamily: "monospace",
1401
+ color: "#374151",
1402
+ outline: "none"
1403
+ },
1404
+ copyButton: {
1405
+ padding: "10px 16px",
1406
+ border: "1px solid #d1d5db",
1407
+ borderRadius: "8px",
1408
+ backgroundColor: "#ffffff",
1409
+ fontSize: "14px",
1410
+ fontWeight: 500,
1411
+ color: "#374151",
1412
+ cursor: "pointer",
1413
+ whiteSpace: "nowrap",
1414
+ transition: "background-color 0.15s"
1415
+ },
1416
+ copyButtonCopied: {
1417
+ backgroundColor: "#ecfdf5",
1418
+ borderColor: "#a7f3d0",
1419
+ color: "#065f46"
1420
+ },
1421
+ statsRow: {
1422
+ display: "flex",
1423
+ gap: "24px"
1424
+ },
1425
+ stat: {
1426
+ display: "flex",
1427
+ flexDirection: "column",
1428
+ gap: "2px"
1429
+ },
1430
+ statValue: {
1431
+ fontSize: "20px",
1432
+ fontWeight: 600,
1433
+ color: "#111827"
1434
+ },
1435
+ statLabel: {
1436
+ fontSize: "12px",
1437
+ color: "#6b7280"
1438
+ },
1439
+ skeleton: {
1440
+ backgroundColor: "#f3f4f6",
1441
+ borderRadius: "8px",
1442
+ animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
1443
+ },
1444
+ emptyMessage: {
1445
+ fontSize: "14px",
1446
+ color: "#9ca3af",
1447
+ textAlign: "center",
1448
+ padding: "12px 0"
1449
+ }
1450
+ };
1451
+ function ReferralCard({
1452
+ className,
1453
+ style,
1454
+ title = "Refer a Friend",
1455
+ description = "Share your referral link and earn rewards for every friend who signs up."
1456
+ }) {
1457
+ const { data, isLoading } = useReferral();
1458
+ const [copied, setCopied] = useState(false);
1459
+ const handleCopy = useCallback(async () => {
1460
+ if (!data?.referralUrl) return;
1461
+ try {
1462
+ await navigator.clipboard.writeText(data.referralUrl);
1463
+ setCopied(true);
1464
+ setTimeout(() => setCopied(false), 2e3);
1465
+ } catch {
1466
+ }
1467
+ }, [data?.referralUrl]);
1468
+ if (isLoading) {
1469
+ return /* @__PURE__ */ jsxs("div", { className, style: { ...styles.card, ...style }, children: [
1470
+ /* @__PURE__ */ jsx("div", { style: { ...styles.skeleton, height: "20px", width: "140px", marginBottom: "8px" } }),
1471
+ /* @__PURE__ */ jsx("div", { style: { ...styles.skeleton, height: "14px", width: "260px", marginBottom: "16px" } }),
1472
+ /* @__PURE__ */ jsx("div", { style: { ...styles.skeleton, height: "42px", width: "100%", marginBottom: "16px" } }),
1473
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "24px" }, children: [
1474
+ /* @__PURE__ */ jsx("div", { style: { ...styles.skeleton, height: "40px", width: "80px" } }),
1475
+ /* @__PURE__ */ jsx("div", { style: { ...styles.skeleton, height: "40px", width: "80px" } }),
1476
+ /* @__PURE__ */ jsx("div", { style: { ...styles.skeleton, height: "40px", width: "80px" } })
1477
+ ] })
1478
+ ] });
1479
+ }
1480
+ if (!data?.referralCode) {
1481
+ return /* @__PURE__ */ jsxs("div", { className, style: { ...styles.card, ...style }, children: [
1482
+ /* @__PURE__ */ jsx("h3", { style: styles.title, children: title }),
1483
+ /* @__PURE__ */ jsx("p", { style: styles.emptyMessage, children: "Referral program is not available at this time." })
1484
+ ] });
1485
+ }
1486
+ return /* @__PURE__ */ jsxs("div", { className, style: { ...styles.card, ...style }, children: [
1487
+ /* @__PURE__ */ jsx("h3", { style: styles.title, children: title }),
1488
+ /* @__PURE__ */ jsx("p", { style: styles.description, children: description }),
1489
+ /* @__PURE__ */ jsxs("div", { style: styles.codeContainer, children: [
1490
+ /* @__PURE__ */ jsx(
1491
+ "input",
1492
+ {
1493
+ type: "text",
1494
+ readOnly: true,
1495
+ value: data.referralUrl,
1496
+ style: styles.codeInput,
1497
+ onClick: (e) => e.target.select()
1498
+ }
1499
+ ),
1500
+ /* @__PURE__ */ jsx(
1501
+ "button",
1502
+ {
1503
+ type: "button",
1504
+ onClick: handleCopy,
1505
+ style: {
1506
+ ...styles.copyButton,
1507
+ ...copied ? styles.copyButtonCopied : {}
1508
+ },
1509
+ children: copied ? "Copied!" : "Copy"
1510
+ }
1511
+ )
1512
+ ] }),
1513
+ /* @__PURE__ */ jsxs("div", { style: styles.statsRow, children: [
1514
+ /* @__PURE__ */ jsxs("div", { style: styles.stat, children: [
1515
+ /* @__PURE__ */ jsx("span", { style: styles.statValue, children: data.totalReferred }),
1516
+ /* @__PURE__ */ jsx("span", { style: styles.statLabel, children: "Total Referred" })
1517
+ ] }),
1518
+ /* @__PURE__ */ jsxs("div", { style: styles.stat, children: [
1519
+ /* @__PURE__ */ jsx("span", { style: styles.statValue, children: data.completedReferrals }),
1520
+ /* @__PURE__ */ jsx("span", { style: styles.statLabel, children: "Completed" })
1521
+ ] }),
1522
+ /* @__PURE__ */ jsxs("div", { style: styles.stat, children: [
1523
+ /* @__PURE__ */ jsx("span", { style: styles.statValue, children: data.pendingReferrals }),
1524
+ /* @__PURE__ */ jsx("span", { style: styles.statLabel, children: "Pending" })
1525
+ ] })
1526
+ ] })
1527
+ ] });
1528
+ }
1529
+ ReferralCard.displayName = "ReferralCard";
1530
+ function useReferralStats() {
1531
+ const client = useAccessClient();
1532
+ return useQuery({
1533
+ queryKey: ["azirid-access", "referral", "stats"],
1534
+ queryFn: () => client.get(client.paths.referralStats),
1535
+ enabled: !!client.getAccessToken()
1536
+ });
1537
+ }
1538
+ var statusColors = {
1539
+ PENDING: { bg: "#fef3c7", color: "#92400e" },
1540
+ COMPLETED: { bg: "#d1fae5", color: "#065f46" },
1541
+ EXPIRED: { bg: "#fee2e2", color: "#991b1b" }
1542
+ };
1543
+ var rewardStatusColors = {
1544
+ PENDING: { bg: "#fef3c7", color: "#92400e" },
1545
+ GRANTED: { bg: "#d1fae5", color: "#065f46" },
1546
+ EXPIRED: { bg: "#fee2e2", color: "#991b1b" },
1547
+ FAILED: { bg: "#fee2e2", color: "#991b1b" }
1548
+ };
1549
+ var styles2 = {
1550
+ container: {
1551
+ border: "1px solid #e5e7eb",
1552
+ borderRadius: "12px",
1553
+ backgroundColor: "#ffffff",
1554
+ overflow: "hidden",
1555
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
1556
+ },
1557
+ header: {
1558
+ padding: "16px 24px",
1559
+ borderBottom: "1px solid #e5e7eb"
1560
+ },
1561
+ title: {
1562
+ margin: 0,
1563
+ fontSize: "16px",
1564
+ fontWeight: 600,
1565
+ color: "#111827"
1566
+ },
1567
+ summaryRow: {
1568
+ display: "flex",
1569
+ gap: "24px",
1570
+ padding: "12px 24px",
1571
+ backgroundColor: "#f9fafb",
1572
+ borderBottom: "1px solid #e5e7eb"
1573
+ },
1574
+ summaryItem: {
1575
+ display: "flex",
1576
+ alignItems: "center",
1577
+ gap: "6px",
1578
+ fontSize: "13px",
1579
+ color: "#6b7280"
1580
+ },
1581
+ summaryValue: {
1582
+ fontWeight: 600,
1583
+ color: "#111827"
1584
+ },
1585
+ table: {
1586
+ width: "100%",
1587
+ borderCollapse: "collapse",
1588
+ fontSize: "14px"
1589
+ },
1590
+ th: {
1591
+ padding: "12px 24px",
1592
+ textAlign: "left",
1593
+ fontSize: "12px",
1594
+ fontWeight: 500,
1595
+ color: "#6b7280",
1596
+ textTransform: "uppercase",
1597
+ letterSpacing: "0.05em",
1598
+ borderBottom: "1px solid #e5e7eb",
1599
+ backgroundColor: "#f9fafb"
1600
+ },
1601
+ td: {
1602
+ padding: "12px 24px",
1603
+ borderBottom: "1px solid #f3f4f6",
1604
+ color: "#374151"
1605
+ },
1606
+ badge: (bg, color) => ({
1607
+ display: "inline-block",
1608
+ padding: "2px 8px",
1609
+ borderRadius: "9999px",
1610
+ fontSize: "12px",
1611
+ fontWeight: 500,
1612
+ backgroundColor: bg,
1613
+ color
1614
+ }),
1615
+ skeleton: {
1616
+ backgroundColor: "#f3f4f6",
1617
+ borderRadius: "4px",
1618
+ height: "14px"
1619
+ },
1620
+ emptyRow: {
1621
+ padding: "24px",
1622
+ textAlign: "center",
1623
+ color: "#9ca3af",
1624
+ fontSize: "14px"
1625
+ }
1626
+ };
1627
+ function formatDate(dateStr) {
1628
+ try {
1629
+ return new Date(dateStr).toLocaleDateString(void 0, {
1630
+ year: "numeric",
1631
+ month: "short",
1632
+ day: "numeric"
1633
+ });
1634
+ } catch {
1635
+ return dateStr;
1636
+ }
1637
+ }
1638
+ function ReferralStats({ className, style }) {
1639
+ const { data, isLoading } = useReferralStats();
1640
+ if (isLoading) {
1641
+ return /* @__PURE__ */ jsxs("div", { className, style: { ...styles2.container, ...style }, children: [
1642
+ /* @__PURE__ */ jsx("div", { style: styles2.header, children: /* @__PURE__ */ jsx("div", { style: { ...styles2.skeleton, width: "140px", height: "18px" } }) }),
1643
+ /* @__PURE__ */ jsx("div", { style: { padding: "24px" }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
1644
+ "div",
1645
+ {
1646
+ style: { ...styles2.skeleton, width: "100%", height: "16px", marginBottom: "16px" }
1647
+ },
1648
+ i
1649
+ )) })
1650
+ ] });
1651
+ }
1652
+ return /* @__PURE__ */ jsxs("div", { className, style: { ...styles2.container, ...style }, children: [
1653
+ /* @__PURE__ */ jsx("div", { style: styles2.header, children: /* @__PURE__ */ jsx("h3", { style: styles2.title, children: "Referral History" }) }),
1654
+ data && /* @__PURE__ */ jsxs("div", { style: styles2.summaryRow, children: [
1655
+ /* @__PURE__ */ jsxs("span", { style: styles2.summaryItem, children: [
1656
+ "Total: ",
1657
+ /* @__PURE__ */ jsx("span", { style: styles2.summaryValue, children: data.totalReferred })
1658
+ ] }),
1659
+ /* @__PURE__ */ jsxs("span", { style: styles2.summaryItem, children: [
1660
+ "Completed: ",
1661
+ /* @__PURE__ */ jsx("span", { style: styles2.summaryValue, children: data.completedReferrals })
1662
+ ] }),
1663
+ /* @__PURE__ */ jsxs("span", { style: styles2.summaryItem, children: [
1664
+ "Pending: ",
1665
+ /* @__PURE__ */ jsx("span", { style: styles2.summaryValue, children: data.pendingReferrals })
1666
+ ] }),
1667
+ /* @__PURE__ */ jsxs("span", { style: styles2.summaryItem, children: [
1668
+ "Rewards: ",
1669
+ /* @__PURE__ */ jsx("span", { style: styles2.summaryValue, children: data.totalRewards })
1670
+ ] })
1671
+ ] }),
1672
+ /* @__PURE__ */ jsxs("table", { style: styles2.table, children: [
1673
+ /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
1674
+ /* @__PURE__ */ jsx("th", { style: styles2.th, children: "Email" }),
1675
+ /* @__PURE__ */ jsx("th", { style: styles2.th, children: "Status" }),
1676
+ /* @__PURE__ */ jsx("th", { style: styles2.th, children: "Reward" }),
1677
+ /* @__PURE__ */ jsx("th", { style: styles2.th, children: "Date" })
1678
+ ] }) }),
1679
+ /* @__PURE__ */ jsxs("tbody", { children: [
1680
+ (!data?.referrals || data.referrals.length === 0) && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 4, style: styles2.emptyRow, children: "No referrals yet." }) }),
1681
+ data?.referrals.map((item) => {
1682
+ const sc = statusColors[item.status];
1683
+ const rc = rewardStatusColors[item.rewardStatus];
1684
+ return /* @__PURE__ */ jsxs("tr", { children: [
1685
+ /* @__PURE__ */ jsx("td", { style: styles2.td, children: item.referredEmail }),
1686
+ /* @__PURE__ */ jsx("td", { style: styles2.td, children: /* @__PURE__ */ jsx("span", { style: styles2.badge(sc.bg, sc.color), children: item.status }) }),
1687
+ /* @__PURE__ */ jsx("td", { style: styles2.td, children: /* @__PURE__ */ jsxs("span", { style: styles2.badge(rc.bg, rc.color), children: [
1688
+ item.rewardStatus,
1689
+ item.rewardAmount != null && ` ($${item.rewardAmount})`
1690
+ ] }) }),
1691
+ /* @__PURE__ */ jsx("td", { style: styles2.td, children: formatDate(item.createdAt) })
1692
+ ] }, item.id);
1693
+ })
1694
+ ] })
1695
+ ] })
1696
+ ] });
1697
+ }
1698
+ ReferralStats.displayName = "ReferralStats";
1699
+ function usePlans() {
1700
+ const client = useAccessClient();
1701
+ return useQuery({
1702
+ queryKey: ["azirid-access", "billing", "plans"],
1703
+ queryFn: () => client.get(client.paths.plans)
1704
+ });
1705
+ }
1706
+ function useSubscription() {
1707
+ const client = useAccessClient();
1708
+ return useQuery({
1709
+ queryKey: ["azirid-access", "billing", "subscription"],
1710
+ queryFn: () => client.get(client.paths.subscription),
1711
+ enabled: !!client.getAccessToken()
1712
+ });
1713
+ }
1714
+ function useCheckout(options) {
1715
+ const client = useAccessClient();
1716
+ const mutation = useMutation({
1717
+ mutationFn: (params) => client.post(client.paths.checkout, params),
1718
+ onSuccess: (data) => {
1719
+ if (options?.redirectOnSuccess !== false && data.url && data.provider !== "MANUAL_TRANSFER" && data.provider !== "PAYPHONE") {
1720
+ window.location.href = data.url;
1721
+ }
1722
+ options?.onSuccess?.(data);
1723
+ },
1724
+ onError: options?.onError
1725
+ });
1726
+ const checkout = useCallback(
1727
+ (params) => {
1728
+ mutation.mutate(params);
1729
+ },
1730
+ [mutation]
1731
+ );
1732
+ return useMemo(() => ({ ...mutation, checkout }), [mutation, checkout]);
1733
+ }
1734
+ function usePaymentProviders() {
1735
+ const client = useAccessClient();
1736
+ return useQuery({
1737
+ queryKey: ["azirid-access", "billing", "providers"],
1738
+ queryFn: () => client.get(client.paths.providers)
1739
+ });
1740
+ }
1741
+
1742
+ // src/utils/payphone-loader.ts
1743
+ var PAYPHONE_CSS_URL = "https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.css";
1744
+ var PAYPHONE_JS_URL = "https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.js";
1745
+ var loadPromise = null;
1746
+ function loadCss(href) {
1747
+ if (document.querySelector(`link[href="${href}"]`)) return;
1748
+ const link = document.createElement("link");
1749
+ link.rel = "stylesheet";
1750
+ link.href = href;
1751
+ document.head.appendChild(link);
1752
+ }
1753
+ function loadScript(src) {
1754
+ return new Promise((resolve, reject) => {
1755
+ if (document.querySelector(`script[src="${src}"]`)) {
1756
+ resolve();
1757
+ return;
1758
+ }
1759
+ const script = document.createElement("script");
1760
+ script.src = src;
1761
+ script.onload = () => resolve();
1762
+ script.onerror = () => reject(new Error(`Failed to load Payphone SDK: ${src}`));
1763
+ document.head.appendChild(script);
1764
+ });
1765
+ }
1766
+ function loadPayphoneSdk() {
1767
+ if (loadPromise) return loadPromise;
1768
+ loadPromise = (async () => {
1769
+ loadCss(PAYPHONE_CSS_URL);
1770
+ await loadScript(PAYPHONE_JS_URL);
1771
+ })();
1772
+ return loadPromise;
1773
+ }
1774
+ function PayphoneModal({ config, successUrl, onClose }) {
1775
+ const [loading, setLoading] = useState(true);
1776
+ const [error, setError] = useState(null);
1777
+ const initialized = useRef(false);
1778
+ useEffect(() => {
1779
+ if (initialized.current) return;
1780
+ initialized.current = true;
1781
+ loadPayphoneSdk().then(() => {
1782
+ setLoading(false);
1783
+ requestAnimationFrame(() => {
1784
+ if (typeof window.PPaymentButtonBox === "undefined") {
1785
+ setError("Payphone SDK failed to initialize");
1786
+ return;
1787
+ }
1788
+ new window.PPaymentButtonBox({
1789
+ token: config.token,
1790
+ clientTransactionId: config.clientTransactionId,
1791
+ amount: config.amount,
1792
+ amountWithoutTax: config.amountWithoutTax,
1793
+ currency: config.currency,
1794
+ storeId: config.storeId,
1795
+ reference: config.reference,
1796
+ responseUrl: successUrl
1797
+ }).render("pp-button-azirid");
1798
+ });
1799
+ }).catch(() => {
1800
+ setLoading(false);
1801
+ setError("Failed to load Payphone payment widget");
1802
+ });
1803
+ }, [config, successUrl]);
1804
+ return /* @__PURE__ */ jsx("div", { style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: cardStyle, onClick: (e) => e.stopPropagation(), children: [
1805
+ /* @__PURE__ */ jsx("h2", { style: titleStyle, children: "Payphone" }),
1806
+ loading && /* @__PURE__ */ jsx("p", { style: messageStyle, children: "Loading payment widget..." }),
1807
+ error && /* @__PURE__ */ jsx("p", { style: { ...messageStyle, color: "#ef4444" }, children: error }),
1808
+ /* @__PURE__ */ jsx("div", { id: "pp-button-azirid", style: { minHeight: "80px" } }),
1809
+ /* @__PURE__ */ jsx("p", { style: warningStyle, children: "Do not close this window until the payment is complete." }),
1810
+ /* @__PURE__ */ jsx("button", { type: "button", style: cancelStyle, onClick: onClose, children: "Cancel" })
1811
+ ] }) });
1812
+ }
1813
+ var overlayStyle = {
1814
+ position: "fixed",
1815
+ inset: 0,
1816
+ backgroundColor: "rgba(0,0,0,0.5)",
1817
+ display: "flex",
1818
+ alignItems: "center",
1819
+ justifyContent: "center",
1820
+ zIndex: 9999,
1821
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
1822
+ };
1823
+ var cardStyle = {
1824
+ backgroundColor: "#fff",
1825
+ borderRadius: "12px",
1826
+ padding: "24px",
1827
+ maxWidth: "480px",
1828
+ width: "90%",
1829
+ boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)"
1830
+ };
1831
+ var titleStyle = {
1832
+ fontSize: "18px",
1833
+ fontWeight: 700,
1834
+ color: "#111827",
1835
+ margin: "0 0 16px 0",
1836
+ textAlign: "center"
1837
+ };
1838
+ var messageStyle = {
1839
+ fontSize: "14px",
1840
+ color: "#6b7280",
1841
+ textAlign: "center",
1842
+ margin: "12px 0"
1843
+ };
1844
+ var warningStyle = {
1845
+ fontSize: "12px",
1846
+ color: "#d97706",
1847
+ textAlign: "center",
1848
+ margin: "16px 0 0 0"
1849
+ };
1850
+ var cancelStyle = {
1851
+ display: "block",
1852
+ width: "100%",
1853
+ marginTop: "12px",
1854
+ padding: "10px",
1855
+ border: "none",
1856
+ borderRadius: "8px",
1857
+ backgroundColor: "#f3f4f6",
1858
+ color: "#6b7280",
1859
+ fontSize: "14px",
1860
+ fontWeight: 500,
1861
+ cursor: "pointer",
1862
+ fontFamily: "inherit"
1863
+ };
1864
+ var intervalLabels = {
1865
+ MONTHLY: "/mo",
1866
+ YEARLY: "/yr",
1867
+ ONE_TIME: ""
1868
+ };
1869
+ function formatAmount(amount, currency) {
1870
+ try {
1871
+ return new Intl.NumberFormat(void 0, {
1872
+ style: "currency",
1873
+ currency,
1874
+ minimumFractionDigits: 0,
1875
+ maximumFractionDigits: 2
1876
+ }).format(amount / 100);
1877
+ } catch {
1878
+ return `${currency} ${(amount / 100).toFixed(2)}`;
1879
+ }
1880
+ }
1881
+ var styles3 = {
1882
+ grid: (columns) => ({
1883
+ display: "grid",
1884
+ gridTemplateColumns: `repeat(${columns}, 1fr)`,
1885
+ gap: "24px",
1886
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
1887
+ }),
1888
+ card: (isCurrentPlan) => ({
1889
+ border: isCurrentPlan ? "2px solid #6366f1" : "1px solid #e5e7eb",
1890
+ borderRadius: "12px",
1891
+ padding: "24px",
1892
+ backgroundColor: "#ffffff",
1893
+ display: "flex",
1894
+ flexDirection: "column",
1895
+ position: "relative"
1896
+ }),
1897
+ currentBadge: {
1898
+ position: "absolute",
1899
+ top: "-12px",
1900
+ left: "50%",
1901
+ transform: "translateX(-50%)",
1902
+ backgroundColor: "#6366f1",
1903
+ color: "#ffffff",
1904
+ fontSize: "12px",
1905
+ fontWeight: 600,
1906
+ padding: "2px 12px",
1907
+ borderRadius: "9999px",
1908
+ whiteSpace: "nowrap"
1909
+ },
1910
+ planName: {
1911
+ margin: "0 0 4px 0",
1912
+ fontSize: "20px",
1913
+ fontWeight: 600,
1914
+ color: "#111827"
1915
+ },
1916
+ planDescription: {
1917
+ margin: "0 0 16px 0",
1918
+ fontSize: "14px",
1919
+ color: "#6b7280",
1920
+ lineHeight: "1.5"
1921
+ },
1922
+ priceRow: {
1923
+ display: "flex",
1924
+ alignItems: "baseline",
1925
+ gap: "4px",
1926
+ marginBottom: "20px"
1927
+ },
1928
+ priceAmount: {
1929
+ fontSize: "36px",
1930
+ fontWeight: 700,
1931
+ color: "#111827",
1932
+ lineHeight: 1
1933
+ },
1934
+ priceInterval: {
1935
+ fontSize: "16px",
1936
+ color: "#6b7280"
1937
+ },
1938
+ featuresList: {
1939
+ listStyle: "none",
1940
+ padding: 0,
1941
+ margin: "0 0 24px 0",
1942
+ flex: 1
1943
+ },
1944
+ featureItem: {
1945
+ display: "flex",
1946
+ alignItems: "center",
1947
+ gap: "8px",
1948
+ padding: "6px 0",
1949
+ fontSize: "14px",
1950
+ color: "#374151"
1951
+ },
1952
+ checkmark: {
1953
+ color: "#10b981",
1954
+ fontSize: "16px",
1955
+ fontWeight: 700,
1956
+ flexShrink: 0
1957
+ },
1958
+ selectButton: (isCurrentPlan) => ({
1959
+ width: "100%",
1960
+ padding: "12px 24px",
1961
+ borderRadius: "8px",
1962
+ border: isCurrentPlan ? "1px solid #d1d5db" : "none",
1963
+ backgroundColor: isCurrentPlan ? "#ffffff" : "#111827",
1964
+ color: isCurrentPlan ? "#6b7280" : "#ffffff",
1965
+ fontSize: "14px",
1966
+ fontWeight: 600,
1967
+ cursor: isCurrentPlan ? "default" : "pointer",
1968
+ transition: "background-color 0.15s"
1969
+ }),
1970
+ skeleton: {
1971
+ backgroundColor: "#f3f4f6",
1972
+ borderRadius: "12px"
1973
+ },
1974
+ skeletonCard: {
1975
+ border: "1px solid #e5e7eb",
1976
+ borderRadius: "12px",
1977
+ padding: "24px",
1978
+ backgroundColor: "#ffffff"
1979
+ },
1980
+ skeletonLine: {
1981
+ backgroundColor: "#f3f4f6",
1982
+ borderRadius: "4px",
1983
+ marginBottom: "12px"
1984
+ },
1985
+ overlay: {
1986
+ position: "fixed",
1987
+ top: 0,
1988
+ left: 0,
1989
+ right: 0,
1990
+ bottom: 0,
1991
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
1992
+ display: "flex",
1993
+ alignItems: "center",
1994
+ justifyContent: "center",
1995
+ zIndex: 9999
1996
+ },
1997
+ modal: {
1998
+ backgroundColor: "#ffffff",
1999
+ borderRadius: "16px",
2000
+ padding: "32px",
2001
+ maxWidth: "480px",
2002
+ width: "90%",
2003
+ maxHeight: "80vh",
2004
+ overflow: "auto"
2005
+ },
2006
+ modalTitle: {
2007
+ margin: "0 0 8px 0",
2008
+ fontSize: "20px",
2009
+ fontWeight: 600,
2010
+ color: "#111827"
2011
+ },
2012
+ modalSubtitle: {
2013
+ margin: "0 0 24px 0",
2014
+ fontSize: "14px",
2015
+ color: "#6b7280"
2016
+ },
2017
+ bankDetailRow: {
2018
+ display: "flex",
2019
+ justifyContent: "space-between",
2020
+ padding: "8px 0",
2021
+ borderBottom: "1px solid #f3f4f6",
2022
+ fontSize: "14px"
2023
+ },
2024
+ bankDetailLabel: {
2025
+ color: "#6b7280",
2026
+ fontWeight: 500
2027
+ },
2028
+ bankDetailValue: {
2029
+ color: "#111827",
2030
+ fontWeight: 600,
2031
+ fontFamily: "monospace"
2032
+ },
2033
+ instructions: {
2034
+ margin: "16px 0",
2035
+ padding: "12px 16px",
2036
+ backgroundColor: "#f9fafb",
2037
+ borderRadius: "8px",
2038
+ fontSize: "14px",
2039
+ color: "#374151",
2040
+ lineHeight: "1.5"
2041
+ },
2042
+ closeButton: {
2043
+ width: "100%",
2044
+ padding: "12px 24px",
2045
+ borderRadius: "8px",
2046
+ border: "1px solid #d1d5db",
2047
+ backgroundColor: "#ffffff",
2048
+ color: "#374151",
2049
+ fontSize: "14px",
2050
+ fontWeight: 600,
2051
+ cursor: "pointer",
2052
+ marginTop: "16px"
2053
+ }
2054
+ };
2055
+ var PROVIDER_LABELS = {
2056
+ STRIPE: "Credit/Debit Card",
2057
+ PAYPAL: "PayPal",
2058
+ PAYPHONE: "Payphone",
2059
+ NUVEI: "Nuvei",
2060
+ MANUAL_TRANSFER: "Bank Transfer"
2061
+ };
2062
+ var PROVIDER_ICONS = {
2063
+ STRIPE: "\u{1F4B3}",
2064
+ PAYPAL: "\u{1F17F}\uFE0F",
2065
+ PAYPHONE: "\u{1F4F1}",
2066
+ NUVEI: "\u{1F4B3}",
2067
+ MANUAL_TRANSFER: "\u{1F3E6}"
2068
+ };
2069
+ function ProviderSelectModal({
2070
+ providers,
2071
+ isPending,
2072
+ onSelect,
2073
+ onClose
2074
+ }) {
2075
+ return /* @__PURE__ */ jsx("div", { style: styles3.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: styles3.modal, onClick: (e) => e.stopPropagation(), children: [
2076
+ /* @__PURE__ */ jsx("h2", { style: styles3.modalTitle, children: "Select payment method" }),
2077
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: providers.map((p) => /* @__PURE__ */ jsxs(
2078
+ "button",
2079
+ {
2080
+ type: "button",
2081
+ onClick: () => onSelect(p.provider),
2082
+ disabled: isPending,
2083
+ style: {
2084
+ display: "flex",
2085
+ alignItems: "center",
2086
+ width: "100%",
2087
+ padding: "12px 16px",
2088
+ border: "1px solid #e5e7eb",
2089
+ borderRadius: "8px",
2090
+ backgroundColor: "#fff",
2091
+ cursor: isPending ? "not-allowed" : "pointer",
2092
+ fontSize: "14px",
2093
+ fontWeight: 500,
2094
+ color: "#111827",
2095
+ fontFamily: "inherit"
2096
+ },
2097
+ children: [
2098
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "20px", marginRight: "12px" }, children: PROVIDER_ICONS[p.provider] }),
2099
+ /* @__PURE__ */ jsx("span", { children: PROVIDER_LABELS[p.provider] ?? p.provider })
2100
+ ]
2101
+ },
2102
+ p.provider
2103
+ )) }),
2104
+ /* @__PURE__ */ jsx("button", { type: "button", style: styles3.closeButton, onClick: onClose, children: "Cancel" })
2105
+ ] }) });
2106
+ }
2107
+ function TransferModal({
2108
+ data,
2109
+ onClose
2110
+ }) {
2111
+ const bankDetails = data.bankDetails;
2112
+ return /* @__PURE__ */ jsx("div", { style: styles3.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: styles3.modal, onClick: (e) => e.stopPropagation(), children: [
2113
+ /* @__PURE__ */ jsx("h2", { style: styles3.modalTitle, children: "Manual Transfer" }),
2114
+ /* @__PURE__ */ jsxs("p", { style: styles3.modalSubtitle, children: [
2115
+ "Transfer the amount below to subscribe to",
2116
+ " ",
2117
+ /* @__PURE__ */ jsx("strong", { children: data.plan?.name })
2118
+ ] }),
2119
+ /* @__PURE__ */ jsxs(
2120
+ "div",
2121
+ {
2122
+ style: {
2123
+ textAlign: "center",
2124
+ padding: "16px",
2125
+ backgroundColor: "#f9fafb",
2126
+ borderRadius: "8px",
2127
+ marginBottom: "20px"
2128
+ },
2129
+ children: [
2130
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "32px", fontWeight: 700, color: "#111827" }, children: data.plan ? formatAmount(data.plan.amount, data.plan.currency) : "" }),
2131
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: data.plan?.interval ? intervalLabels[data.plan.interval] ?? "" : "" })
2132
+ ]
2133
+ }
2134
+ ),
2135
+ bankDetails && Object.keys(bankDetails).length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
2136
+ /* @__PURE__ */ jsx(
2137
+ "div",
2138
+ {
2139
+ style: {
2140
+ fontSize: "14px",
2141
+ fontWeight: 600,
2142
+ color: "#111827",
2143
+ marginBottom: "8px"
2144
+ },
2145
+ children: "Bank Details"
2146
+ }
2147
+ ),
2148
+ Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxs("div", { style: styles3.bankDetailRow, children: [
2149
+ /* @__PURE__ */ jsx("span", { style: styles3.bankDetailLabel, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
2150
+ /* @__PURE__ */ jsx("span", { style: styles3.bankDetailValue, children: value })
2151
+ ] }, key))
2152
+ ] }),
2153
+ data.transferInstructions && /* @__PURE__ */ jsx("div", { style: styles3.instructions, children: data.transferInstructions }),
2154
+ /* @__PURE__ */ jsx(
2155
+ "p",
2156
+ {
2157
+ style: {
2158
+ fontSize: "13px",
2159
+ color: "#9ca3af",
2160
+ margin: "12px 0 0 0"
2161
+ },
2162
+ children: "After completing the transfer, submit your proof of payment. Your subscription will be activated once the transfer is verified."
2163
+ }
2164
+ ),
2165
+ /* @__PURE__ */ jsx("button", { type: "button", style: styles3.closeButton, onClick: onClose, children: "Close" })
2166
+ ] }) });
2167
+ }
2168
+ function PricingTable({
2169
+ className,
2170
+ style,
2171
+ successUrl,
2172
+ cancelUrl,
2173
+ columns = 3,
2174
+ onPlanSelect
2175
+ }) {
2176
+ const { data: plans, isLoading: plansLoading } = usePlans();
2177
+ const { data: subscription } = useSubscription();
2178
+ const { data: providers } = usePaymentProviders();
2179
+ const [transferData, setTransferData] = useState(
2180
+ null
2181
+ );
2182
+ const [payphoneData, setPayphoneData] = useState(null);
2183
+ const [pendingPlan, setPendingPlan] = useState(null);
2184
+ const [showProviderModal, setShowProviderModal] = useState(false);
2185
+ const { checkout, isPending: checkoutPending } = useCheckout({
2186
+ redirectOnSuccess: true,
2187
+ onSuccess: (data) => {
2188
+ setShowProviderModal(false);
2189
+ setPendingPlan(null);
2190
+ if (data.provider === "MANUAL_TRANSFER") {
2191
+ setTransferData(data);
2192
+ } else if (data.provider === "PAYPHONE" && data.widgetConfig) {
2193
+ setPayphoneData(data);
2194
+ }
2195
+ }
2196
+ });
2197
+ const doCheckout = (planId, provider) => {
2198
+ checkout({ planId, provider, successUrl, cancelUrl });
2199
+ };
2200
+ const handleSelect = (plan) => {
2201
+ if (subscription?.planId === plan.id && subscription.status === "ACTIVE")
2202
+ return;
2203
+ if (onPlanSelect) {
2204
+ onPlanSelect(plan);
2205
+ return;
2206
+ }
2207
+ if (providers && providers.length > 1) {
2208
+ setPendingPlan(plan);
2209
+ setShowProviderModal(true);
2210
+ return;
2211
+ }
2212
+ const provider = providers?.[0]?.provider;
2213
+ checkout({ planId: plan.id, provider, successUrl, cancelUrl });
2214
+ };
2215
+ if (plansLoading) {
2216
+ return /* @__PURE__ */ jsx("div", { className, style: { ...styles3.grid(columns), ...style }, children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxs("div", { style: styles3.skeletonCard, children: [
2217
+ /* @__PURE__ */ jsx(
2218
+ "div",
2219
+ {
2220
+ style: {
2221
+ ...styles3.skeletonLine,
2222
+ width: "60%",
2223
+ height: "20px"
2224
+ }
2225
+ }
2226
+ ),
2227
+ /* @__PURE__ */ jsx(
2228
+ "div",
2229
+ {
2230
+ style: {
2231
+ ...styles3.skeletonLine,
2232
+ width: "80%",
2233
+ height: "14px"
2234
+ }
2235
+ }
2236
+ ),
2237
+ /* @__PURE__ */ jsx(
2238
+ "div",
2239
+ {
2240
+ style: {
2241
+ ...styles3.skeletonLine,
2242
+ width: "40%",
2243
+ height: "36px",
2244
+ marginTop: "8px"
2245
+ }
2246
+ }
2247
+ ),
2248
+ /* @__PURE__ */ jsx("div", { style: { marginTop: "16px" }, children: [1, 2, 3].map((j) => /* @__PURE__ */ jsx(
2249
+ "div",
2250
+ {
2251
+ style: {
2252
+ ...styles3.skeletonLine,
2253
+ width: "90%",
2254
+ height: "14px"
2255
+ }
2256
+ },
2257
+ j
2258
+ )) }),
2259
+ /* @__PURE__ */ jsx(
2260
+ "div",
2261
+ {
2262
+ style: {
2263
+ ...styles3.skeletonLine,
2264
+ width: "100%",
2265
+ height: "44px",
2266
+ marginTop: "16px"
2267
+ }
2268
+ }
2269
+ )
2270
+ ] }, i)) });
2271
+ }
2272
+ const sortedPlans = plans ? [...plans].sort((a, b) => a.sortOrder - b.sortOrder) : [];
2273
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
2274
+ /* @__PURE__ */ jsx(
2275
+ "div",
2276
+ {
2277
+ className,
2278
+ style: { ...styles3.grid(columns), ...style },
2279
+ children: sortedPlans.map((plan) => {
2280
+ const isCurrentPlan = subscription?.planId === plan.id && subscription.status === "ACTIVE";
2281
+ return /* @__PURE__ */ jsxs("div", { style: styles3.card(isCurrentPlan), children: [
2282
+ isCurrentPlan && /* @__PURE__ */ jsx("span", { style: styles3.currentBadge, children: "Current Plan" }),
2283
+ /* @__PURE__ */ jsx("h3", { style: styles3.planName, children: plan.name }),
2284
+ plan.description && /* @__PURE__ */ jsx("p", { style: styles3.planDescription, children: plan.description }),
2285
+ /* @__PURE__ */ jsxs("div", { style: styles3.priceRow, children: [
2286
+ /* @__PURE__ */ jsx("span", { style: styles3.priceAmount, children: formatAmount(plan.amount, plan.currency) }),
2287
+ /* @__PURE__ */ jsx("span", { style: styles3.priceInterval, children: intervalLabels[plan.interval] })
2288
+ ] }),
2289
+ plan.features && plan.features.length > 0 && /* @__PURE__ */ jsx("ul", { style: styles3.featuresList, children: plan.features.map((feature, i) => /* @__PURE__ */ jsxs("li", { style: styles3.featureItem, children: [
2290
+ /* @__PURE__ */ jsx("span", { style: styles3.checkmark, "aria-hidden": "true", children: "\u2713" }),
2291
+ feature
2292
+ ] }, i)) }),
2293
+ /* @__PURE__ */ jsx(
2294
+ "button",
2295
+ {
2296
+ type: "button",
2297
+ onClick: () => handleSelect(plan),
2298
+ disabled: isCurrentPlan || checkoutPending,
2299
+ style: {
2300
+ ...styles3.selectButton(isCurrentPlan),
2301
+ ...checkoutPending && !isCurrentPlan ? { opacity: 0.6 } : {}
2302
+ },
2303
+ children: isCurrentPlan ? "Current Plan" : "Subscribe"
2304
+ }
2305
+ )
2306
+ ] }, plan.id);
2307
+ })
2308
+ }
2309
+ ),
2310
+ showProviderModal && pendingPlan && providers && providers.length > 1 && /* @__PURE__ */ jsx(
2311
+ ProviderSelectModal,
2312
+ {
2313
+ providers,
2314
+ isPending: checkoutPending,
2315
+ onSelect: (provider) => doCheckout(pendingPlan.id, provider),
2316
+ onClose: () => {
2317
+ setShowProviderModal(false);
2318
+ setPendingPlan(null);
2319
+ }
2320
+ }
2321
+ ),
2322
+ transferData && /* @__PURE__ */ jsx(
2323
+ TransferModal,
2324
+ {
2325
+ data: transferData,
2326
+ onClose: () => setTransferData(null)
2327
+ }
2328
+ ),
2329
+ payphoneData?.widgetConfig && /* @__PURE__ */ jsx(
2330
+ PayphoneModal,
2331
+ {
2332
+ config: payphoneData.widgetConfig,
2333
+ successUrl,
2334
+ onClose: () => setPayphoneData(null)
2335
+ }
2336
+ )
2337
+ ] });
2338
+ }
2339
+ PricingTable.displayName = "PricingTable";
2340
+ var defaultStyle = {
2341
+ padding: "12px 24px",
2342
+ borderRadius: "8px",
2343
+ border: "none",
2344
+ backgroundColor: "#111827",
2345
+ color: "#ffffff",
2346
+ fontSize: "14px",
2347
+ fontWeight: 600,
2348
+ cursor: "pointer",
2349
+ transition: "background-color 0.15s",
2350
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
2351
+ };
2352
+ function CheckoutButton({
2353
+ planId,
2354
+ successUrl,
2355
+ cancelUrl,
2356
+ className,
2357
+ style,
2358
+ children
2359
+ }) {
2360
+ const { checkout, isPending } = useCheckout({ redirectOnSuccess: true });
2361
+ return /* @__PURE__ */ jsx(
2362
+ "button",
2363
+ {
2364
+ type: "button",
2365
+ className,
2366
+ style: {
2367
+ ...defaultStyle,
2368
+ ...style,
2369
+ ...isPending ? { opacity: 0.6, cursor: "not-allowed" } : {}
2370
+ },
2371
+ disabled: isPending,
2372
+ onClick: () => checkout({ planId, successUrl, cancelUrl }),
2373
+ children: isPending ? "Loading..." : children ?? "Subscribe"
2374
+ }
2375
+ );
2376
+ }
2377
+ CheckoutButton.displayName = "CheckoutButton";
2378
+ var PROVIDER_LABELS2 = {
2379
+ STRIPE: { en: "Credit/Debit Card", es: "Tarjeta de cr\xE9dito/d\xE9bito" },
2380
+ PAYPAL: { en: "PayPal", es: "PayPal" },
2381
+ PAYPHONE: { en: "Payphone", es: "Payphone" },
2382
+ NUVEI: { en: "Nuvei", es: "Nuvei" },
2383
+ MANUAL_TRANSFER: { en: "Bank Transfer", es: "Transferencia bancaria" }
2384
+ };
2385
+ var PROVIDER_ICONS2 = {
2386
+ STRIPE: "\u{1F4B3}",
2387
+ PAYPAL: "\u{1F17F}\uFE0F",
2388
+ PAYPHONE: "\u{1F4F1}",
2389
+ NUVEI: "\u{1F4B3}",
2390
+ MANUAL_TRANSFER: "\u{1F3E6}"
2391
+ };
2392
+ function formatAmount2(amount, currency) {
2393
+ try {
2394
+ return new Intl.NumberFormat(void 0, {
2395
+ style: "currency",
2396
+ currency,
2397
+ minimumFractionDigits: 0,
2398
+ maximumFractionDigits: 2
2399
+ }).format(amount / 100);
2400
+ } catch {
2401
+ return `${currency} ${(amount / 100).toFixed(2)}`;
2402
+ }
2403
+ }
2404
+ function PayButton({
2405
+ planId,
2406
+ intentId,
2407
+ successUrl,
2408
+ cancelUrl,
2409
+ className,
2410
+ style,
2411
+ children,
2412
+ disabled,
2413
+ onSuccess,
2414
+ onError,
2415
+ onProviderSelect
2416
+ }) {
2417
+ const messages = useMessages();
2418
+ const billing = messages?.billing;
2419
+ const [showProviderModal, setShowProviderModal] = useState(false);
2420
+ const [showTransferModal, setShowTransferModal] = useState(false);
2421
+ const [transferData, setTransferData] = useState(null);
2422
+ const [payphoneData, setPayphoneData] = useState(null);
2423
+ const { data: providers, isLoading: providersLoading } = usePaymentProviders();
2424
+ const { checkout, isPending } = useCheckout({
2425
+ redirectOnSuccess: true,
2426
+ onSuccess: (data) => {
2427
+ if (data.provider === "MANUAL_TRANSFER") {
2428
+ setTransferData(data);
2429
+ setShowTransferModal(true);
2430
+ setShowProviderModal(false);
2431
+ } else if (data.provider === "PAYPHONE" && data.widgetConfig) {
2432
+ setPayphoneData(data);
2433
+ setShowProviderModal(false);
2434
+ }
2435
+ onSuccess?.(data);
2436
+ },
2437
+ onError
2438
+ });
2439
+ const handleClick = () => {
2440
+ if (!providers || providers.length === 0) return;
2441
+ if (providers.length === 1) {
2442
+ doCheckout(providers[0].provider);
2443
+ } else {
2444
+ setShowProviderModal(true);
2445
+ }
2446
+ };
2447
+ const doCheckout = (provider) => {
2448
+ onProviderSelect?.(provider);
2449
+ checkout({
2450
+ planId,
2451
+ intentId,
2452
+ provider,
2453
+ successUrl,
2454
+ cancelUrl
2455
+ });
2456
+ };
2457
+ const isDisabled = disabled || isPending || providersLoading || !planId && !intentId;
2458
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
2459
+ /* @__PURE__ */ jsx(
2460
+ "button",
2461
+ {
2462
+ type: "button",
2463
+ className,
2464
+ style: {
2465
+ padding: "10px 24px",
2466
+ fontSize: "14px",
2467
+ fontWeight: 600,
2468
+ color: "#fff",
2469
+ backgroundColor: isDisabled ? "#9ca3af" : "#111827",
2470
+ border: "none",
2471
+ borderRadius: "8px",
2472
+ cursor: isDisabled ? "not-allowed" : "pointer",
2473
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
2474
+ ...style
2475
+ },
2476
+ onClick: handleClick,
2477
+ disabled: isDisabled,
2478
+ children: isPending ? billing?.processing ?? "Processing..." : children ?? (billing?.pay ?? "Pay")
2479
+ }
2480
+ ),
2481
+ showProviderModal && providers && providers.length > 1 && /* @__PURE__ */ jsx(
2482
+ ProviderModal,
2483
+ {
2484
+ providers,
2485
+ isPending,
2486
+ onSelect: doCheckout,
2487
+ onClose: () => setShowProviderModal(false),
2488
+ labels: billing
2489
+ }
2490
+ ),
2491
+ showTransferModal && transferData && /* @__PURE__ */ jsx(
2492
+ TransferModal2,
2493
+ {
2494
+ data: transferData,
2495
+ onClose: () => {
2496
+ setShowTransferModal(false);
2497
+ setTransferData(null);
2498
+ },
2499
+ labels: billing
2500
+ }
2501
+ ),
2502
+ payphoneData?.widgetConfig && /* @__PURE__ */ jsx(
2503
+ PayphoneModal,
2504
+ {
2505
+ config: payphoneData.widgetConfig,
2506
+ successUrl,
2507
+ onClose: () => setPayphoneData(null)
2508
+ }
2509
+ )
2510
+ ] });
2511
+ }
2512
+ function ProviderModal({
2513
+ providers,
2514
+ isPending,
2515
+ onSelect,
2516
+ onClose,
2517
+ labels
2518
+ }) {
2519
+ return /* @__PURE__ */ jsx("div", { style: modalStyles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: modalStyles.card, onClick: (e) => e.stopPropagation(), children: [
2520
+ /* @__PURE__ */ jsx("h2", { style: modalStyles.title, children: labels?.selectPaymentMethod ?? "Select payment method" }),
2521
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: providers.map((p) => {
2522
+ const label = PROVIDER_LABELS2[p.provider];
2523
+ return /* @__PURE__ */ jsxs(
2524
+ "button",
2525
+ {
2526
+ type: "button",
2527
+ style: modalStyles.providerButton,
2528
+ onClick: () => onSelect(p.provider),
2529
+ disabled: isPending,
2530
+ children: [
2531
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "20px", marginRight: "12px" }, children: PROVIDER_ICONS2[p.provider] }),
2532
+ /* @__PURE__ */ jsx("span", { children: label?.en ?? p.provider })
2533
+ ]
2534
+ },
2535
+ p.provider
2536
+ );
2537
+ }) }),
2538
+ /* @__PURE__ */ jsx("button", { type: "button", style: modalStyles.cancelButton, onClick: onClose, children: labels?.cancel ?? "Cancel" })
2539
+ ] }) });
2540
+ }
2541
+ function TransferModal2({
2542
+ data,
2543
+ onClose,
2544
+ labels
2545
+ }) {
2546
+ const bankDetails = data.bankDetails;
2547
+ const plan = data.plan;
2548
+ const intent = data.intent;
2549
+ const displayAmount = plan ? formatAmount2(plan.amount, plan.currency) : intent ? formatAmount2(intent.amount * 100, intent.currency) : "";
2550
+ return /* @__PURE__ */ jsx("div", { style: modalStyles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: modalStyles.card, onClick: (e) => e.stopPropagation(), children: [
2551
+ /* @__PURE__ */ jsx("h2", { style: modalStyles.title, children: labels?.bankTransfer ?? "Bank Transfer" }),
2552
+ displayAmount && /* @__PURE__ */ jsxs(
2553
+ "div",
2554
+ {
2555
+ style: {
2556
+ textAlign: "center",
2557
+ padding: "16px",
2558
+ backgroundColor: "#f9fafb",
2559
+ borderRadius: "8px",
2560
+ marginBottom: "20px"
2561
+ },
2562
+ children: [
2563
+ /* @__PURE__ */ jsx("div", { style: { fontSize: "32px", fontWeight: 700, color: "#111827" }, children: displayAmount }),
2564
+ plan?.name && /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: plan.name }),
2565
+ intent?.description && /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: intent.description })
2566
+ ]
2567
+ }
2568
+ ),
2569
+ bankDetails && Object.keys(bankDetails).length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
2570
+ /* @__PURE__ */ jsx(
2571
+ "div",
2572
+ {
2573
+ style: {
2574
+ fontSize: "14px",
2575
+ fontWeight: 600,
2576
+ color: "#111827",
2577
+ marginBottom: "8px"
2578
+ },
2579
+ children: "Bank Details"
2580
+ }
2581
+ ),
2582
+ Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxs(
2583
+ "div",
2584
+ {
2585
+ style: {
2586
+ display: "flex",
2587
+ justifyContent: "space-between",
2588
+ padding: "6px 0",
2589
+ borderBottom: "1px solid #f3f4f6",
2590
+ fontSize: "13px"
2591
+ },
2592
+ children: [
2593
+ /* @__PURE__ */ jsx("span", { style: { color: "#6b7280" }, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
2594
+ /* @__PURE__ */ jsx("span", { style: { color: "#111827", fontWeight: 500 }, children: value })
2595
+ ]
2596
+ },
2597
+ key
2598
+ ))
2599
+ ] }),
2600
+ data.transferInstructions && /* @__PURE__ */ jsx(
2601
+ "div",
2602
+ {
2603
+ style: {
2604
+ padding: "12px",
2605
+ backgroundColor: "#eff6ff",
2606
+ borderRadius: "6px",
2607
+ fontSize: "13px",
2608
+ color: "#1e40af",
2609
+ lineHeight: 1.5,
2610
+ marginBottom: "16px"
2611
+ },
2612
+ children: data.transferInstructions
2613
+ }
2614
+ ),
2615
+ /* @__PURE__ */ jsx(
2616
+ "p",
2617
+ {
2618
+ style: {
2619
+ fontSize: "13px",
2620
+ color: "#9ca3af",
2621
+ margin: "12px 0 0 0"
2622
+ },
2623
+ children: "After completing the transfer, submit your proof of payment. Your access will be activated once the transfer is verified."
2624
+ }
2625
+ ),
2626
+ /* @__PURE__ */ jsx("button", { type: "button", style: modalStyles.cancelButton, onClick: onClose, children: "Close" })
2627
+ ] }) });
2628
+ }
2629
+ var modalStyles = {
2630
+ overlay: {
2631
+ position: "fixed",
2632
+ inset: 0,
2633
+ backgroundColor: "rgba(0,0,0,0.5)",
2634
+ display: "flex",
2635
+ alignItems: "center",
2636
+ justifyContent: "center",
2637
+ zIndex: 9999,
2638
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
2639
+ },
2640
+ card: {
2641
+ backgroundColor: "#fff",
2642
+ borderRadius: "12px",
2643
+ padding: "24px",
2644
+ maxWidth: "420px",
2645
+ width: "90%",
2646
+ boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)"
2647
+ },
2648
+ title: {
2649
+ fontSize: "18px",
2650
+ fontWeight: 700,
2651
+ color: "#111827",
2652
+ margin: "0 0 20px 0",
2653
+ textAlign: "center"
2654
+ },
2655
+ providerButton: {
2656
+ display: "flex",
2657
+ alignItems: "center",
2658
+ width: "100%",
2659
+ padding: "12px 16px",
2660
+ border: "1px solid #e5e7eb",
2661
+ borderRadius: "8px",
2662
+ backgroundColor: "#fff",
2663
+ cursor: "pointer",
2664
+ fontSize: "14px",
2665
+ fontWeight: 500,
2666
+ color: "#111827",
2667
+ transition: "background-color 0.15s",
2668
+ fontFamily: "inherit"
2669
+ },
2670
+ cancelButton: {
2671
+ display: "block",
2672
+ width: "100%",
2673
+ marginTop: "16px",
2674
+ padding: "10px",
2675
+ border: "none",
2676
+ borderRadius: "8px",
2677
+ backgroundColor: "#f3f4f6",
2678
+ color: "#6b7280",
2679
+ fontSize: "14px",
2680
+ fontWeight: 500,
2681
+ cursor: "pointer",
2682
+ fontFamily: "inherit"
2683
+ }
2684
+ };
2685
+ function usePayphoneConfirm(options) {
2686
+ const client = useAccessClient();
2687
+ return useMutation({
2688
+ mutationFn: (params) => client.post(client.paths.payphoneConfirm, params),
2689
+ onSuccess: options?.onSuccess,
2690
+ onError: options?.onError
2691
+ });
2692
+ }
2693
+ function PayphoneCallback({
2694
+ onSuccess,
2695
+ onError,
2696
+ className,
2697
+ style
2698
+ }) {
2699
+ const { mutate, isPending, isSuccess, isError, error, data } = usePayphoneConfirm({
2700
+ onSuccess,
2701
+ onError
2702
+ });
2703
+ const called = useRef(false);
2704
+ useEffect(() => {
2705
+ if (called.current) return;
2706
+ called.current = true;
2707
+ const params = new URLSearchParams(window.location.search);
2708
+ const id = params.get("id");
2709
+ const clientTransactionId = params.get("clientTransactionId");
2710
+ if (!id || !clientTransactionId) return;
2711
+ mutate({ id: Number(id), clientTransactionId });
2712
+ }, [mutate]);
2713
+ return /* @__PURE__ */ jsxs("div", { className, style: { textAlign: "center", padding: "32px", ...style }, children: [
2714
+ isPending && /* @__PURE__ */ jsxs("div", { children: [
2715
+ /* @__PURE__ */ jsx("p", { style: textStyle, children: "Confirming your payment..." }),
2716
+ /* @__PURE__ */ jsx("p", { style: subtextStyle, children: "Please do not close this page." })
2717
+ ] }),
2718
+ isSuccess && data && /* @__PURE__ */ jsx("div", { children: data.status === "confirmed" || data.status === "already_confirmed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
2719
+ /* @__PURE__ */ jsx("p", { style: { ...textStyle, color: "#059669" }, children: "Payment confirmed!" }),
2720
+ /* @__PURE__ */ jsx("p", { style: subtextStyle, children: "Your payment has been processed successfully." })
2721
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2722
+ /* @__PURE__ */ jsx("p", { style: { ...textStyle, color: "#d97706" }, children: "Payment was cancelled" }),
2723
+ /* @__PURE__ */ jsx("p", { style: subtextStyle, children: "The transaction was not completed." })
2724
+ ] }) }),
2725
+ isError && /* @__PURE__ */ jsxs("div", { children: [
2726
+ /* @__PURE__ */ jsx("p", { style: { ...textStyle, color: "#dc2626" }, children: "Payment confirmation failed" }),
2727
+ /* @__PURE__ */ jsx("p", { style: subtextStyle, children: error?.message ?? "An error occurred" })
2728
+ ] })
2729
+ ] });
2730
+ }
2731
+ var textStyle = {
2732
+ fontSize: "18px",
2733
+ fontWeight: 600,
2734
+ color: "#111827",
2735
+ margin: "0 0 8px 0"
2736
+ };
2737
+ var subtextStyle = {
2738
+ fontSize: "14px",
2739
+ color: "#6b7280",
2740
+ margin: 0
2741
+ };
2742
+ var statusConfig = {
2743
+ ACTIVE: { bg: "#d1fae5", color: "#065f46", label: "Active" },
2744
+ TRIALING: { bg: "#dbeafe", color: "#1e40af", label: "Trial" },
2745
+ PAST_DUE: { bg: "#fef3c7", color: "#92400e", label: "Past Due" },
2746
+ CANCELED: { bg: "#fee2e2", color: "#991b1b", label: "Canceled" },
2747
+ UNPAID: { bg: "#fee2e2", color: "#991b1b", label: "Unpaid" },
2748
+ INCOMPLETE: { bg: "#f3f4f6", color: "#6b7280", label: "Incomplete" }
2749
+ };
2750
+ var styles4 = {
2751
+ badge: {
2752
+ display: "inline-flex",
2753
+ alignItems: "center",
2754
+ gap: "6px",
2755
+ padding: "6px 12px",
2756
+ borderRadius: "9999px",
2757
+ fontSize: "13px",
2758
+ fontWeight: 500,
2759
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
2760
+ },
2761
+ dot: (color) => ({
2762
+ width: "6px",
2763
+ height: "6px",
2764
+ borderRadius: "50%",
2765
+ backgroundColor: color,
2766
+ flexShrink: 0
2767
+ }),
2768
+ skeleton: {
2769
+ display: "inline-block",
2770
+ width: "120px",
2771
+ height: "32px",
2772
+ borderRadius: "9999px",
2773
+ backgroundColor: "#f3f4f6"
2774
+ }
2775
+ };
2776
+ function SubscriptionBadge({ className, style }) {
2777
+ const { data: subscription, isLoading } = useSubscription();
2778
+ if (isLoading) {
2779
+ return /* @__PURE__ */ jsx("span", { className, style: { ...styles4.skeleton, ...style } });
2780
+ }
2781
+ if (!subscription) {
2782
+ return /* @__PURE__ */ jsx(
2783
+ "span",
2784
+ {
2785
+ className,
2786
+ style: {
2787
+ ...styles4.badge,
2788
+ backgroundColor: "#f3f4f6",
2789
+ color: "#6b7280",
2790
+ ...style
2791
+ },
2792
+ children: "No Plan"
2793
+ }
2794
+ );
2795
+ }
2796
+ const config = statusConfig[subscription.status];
2797
+ return /* @__PURE__ */ jsxs(
2798
+ "span",
2799
+ {
2800
+ className,
2801
+ style: {
2802
+ ...styles4.badge,
2803
+ backgroundColor: config.bg,
2804
+ color: config.color,
2805
+ ...style
2806
+ },
2807
+ children: [
2808
+ /* @__PURE__ */ jsx("span", { style: styles4.dot(config.color), "aria-hidden": "true" }),
2809
+ subscription.plan.name,
2810
+ " \xB7 ",
2811
+ config.label
2812
+ ]
2813
+ }
2814
+ );
2815
+ }
2816
+ SubscriptionBadge.displayName = "SubscriptionBadge";
2817
+ function useInvoices() {
2818
+ const client = useAccessClient();
2819
+ return useQuery({
2820
+ queryKey: ["azirid-access", "billing", "invoices"],
2821
+ queryFn: () => client.get(client.paths.invoices),
2822
+ enabled: !!client.getAccessToken()
2823
+ });
2824
+ }
2825
+ var statusColors2 = {
2826
+ PENDING: { bg: "#fef3c7", color: "#92400e" },
2827
+ PAID: { bg: "#d1fae5", color: "#065f46" },
2828
+ FAILED: { bg: "#fee2e2", color: "#991b1b" },
2829
+ REFUNDED: { bg: "#f3f4f6", color: "#6b7280" }
2830
+ };
2831
+ function formatDate2(dateStr) {
2832
+ try {
2833
+ return new Date(dateStr).toLocaleDateString(void 0, {
2834
+ year: "numeric",
2835
+ month: "short",
2836
+ day: "numeric"
2837
+ });
2838
+ } catch {
2839
+ return dateStr;
2840
+ }
2841
+ }
2842
+ function formatAmount3(amount, currency) {
2843
+ try {
2844
+ return new Intl.NumberFormat(void 0, {
2845
+ style: "currency",
2846
+ currency,
2847
+ minimumFractionDigits: 0,
2848
+ maximumFractionDigits: 2
2849
+ }).format(amount / 100);
2850
+ } catch {
2851
+ return `${currency} ${(amount / 100).toFixed(2)}`;
2852
+ }
2853
+ }
2854
+ var styles5 = {
2855
+ container: {
2856
+ border: "1px solid #e5e7eb",
2857
+ borderRadius: "12px",
2858
+ backgroundColor: "#ffffff",
2859
+ overflow: "hidden",
2860
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
2861
+ },
2862
+ header: {
2863
+ padding: "16px 24px",
2864
+ borderBottom: "1px solid #e5e7eb"
2865
+ },
2866
+ title: {
2867
+ margin: 0,
2868
+ fontSize: "16px",
2869
+ fontWeight: 600,
2870
+ color: "#111827"
2871
+ },
2872
+ table: {
2873
+ width: "100%",
2874
+ borderCollapse: "collapse",
2875
+ fontSize: "14px"
2876
+ },
2877
+ th: {
2878
+ padding: "12px 24px",
2879
+ textAlign: "left",
2880
+ fontSize: "12px",
2881
+ fontWeight: 500,
2882
+ color: "#6b7280",
2883
+ textTransform: "uppercase",
2884
+ letterSpacing: "0.05em",
2885
+ borderBottom: "1px solid #e5e7eb",
2886
+ backgroundColor: "#f9fafb"
2887
+ },
2888
+ td: {
2889
+ padding: "12px 24px",
2890
+ borderBottom: "1px solid #f3f4f6",
2891
+ color: "#374151"
2892
+ },
2893
+ badge: (bg, color) => ({
2894
+ display: "inline-block",
2895
+ padding: "2px 8px",
2896
+ borderRadius: "9999px",
2897
+ fontSize: "12px",
2898
+ fontWeight: 500,
2899
+ backgroundColor: bg,
2900
+ color
2901
+ }),
2902
+ link: {
2903
+ color: "#6366f1",
2904
+ textDecoration: "none",
2905
+ fontWeight: 500,
2906
+ fontSize: "13px"
2907
+ },
2908
+ skeleton: {
2909
+ backgroundColor: "#f3f4f6",
2910
+ borderRadius: "4px",
2911
+ height: "14px"
2912
+ },
2913
+ emptyRow: {
2914
+ padding: "24px",
2915
+ textAlign: "center",
2916
+ color: "#9ca3af",
2917
+ fontSize: "14px"
2918
+ }
2919
+ };
2920
+ function InvoiceList({ className, style }) {
2921
+ const { data: invoices, isLoading } = useInvoices();
2922
+ if (isLoading) {
2923
+ return /* @__PURE__ */ jsxs("div", { className, style: { ...styles5.container, ...style }, children: [
2924
+ /* @__PURE__ */ jsx("div", { style: styles5.header, children: /* @__PURE__ */ jsx("div", { style: { ...styles5.skeleton, width: "100px", height: "18px" } }) }),
2925
+ /* @__PURE__ */ jsx("div", { style: { padding: "24px" }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
2926
+ "div",
2927
+ {
2928
+ style: { ...styles5.skeleton, width: "100%", height: "16px", marginBottom: "16px" }
2929
+ },
2930
+ i
2931
+ )) })
2932
+ ] });
2933
+ }
2934
+ return /* @__PURE__ */ jsxs("div", { className, style: { ...styles5.container, ...style }, children: [
2935
+ /* @__PURE__ */ jsx("div", { style: styles5.header, children: /* @__PURE__ */ jsx("h3", { style: styles5.title, children: "Invoices" }) }),
2936
+ /* @__PURE__ */ jsxs("table", { style: styles5.table, children: [
2937
+ /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
2938
+ /* @__PURE__ */ jsx("th", { style: styles5.th, children: "Date" }),
2939
+ /* @__PURE__ */ jsx("th", { style: styles5.th, children: "Amount" }),
2940
+ /* @__PURE__ */ jsx("th", { style: styles5.th, children: "Status" }),
2941
+ /* @__PURE__ */ jsx("th", { style: styles5.th, children: "Invoice" })
2942
+ ] }) }),
2943
+ /* @__PURE__ */ jsxs("tbody", { children: [
2944
+ (!invoices || invoices.length === 0) && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 4, style: styles5.emptyRow, children: "No invoices yet." }) }),
2945
+ invoices?.map((invoice) => {
2946
+ const sc = statusColors2[invoice.status];
2947
+ return /* @__PURE__ */ jsxs("tr", { children: [
2948
+ /* @__PURE__ */ jsx("td", { style: styles5.td, children: formatDate2(invoice.createdAt) }),
2949
+ /* @__PURE__ */ jsx("td", { style: styles5.td, children: formatAmount3(invoice.amount, invoice.currency) }),
2950
+ /* @__PURE__ */ jsx("td", { style: styles5.td, children: /* @__PURE__ */ jsx("span", { style: styles5.badge(sc.bg, sc.color), children: invoice.status }) }),
2951
+ /* @__PURE__ */ jsx("td", { style: styles5.td, children: invoice.invoiceUrl ? /* @__PURE__ */ jsx(
2952
+ "a",
2953
+ {
2954
+ href: invoice.invoiceUrl,
2955
+ target: "_blank",
2956
+ rel: "noopener noreferrer",
2957
+ style: styles5.link,
2958
+ children: "View"
2959
+ }
2960
+ ) : /* @__PURE__ */ jsx("span", { style: { color: "#d1d5db" }, children: "\u2014" }) })
2961
+ ] }, invoice.id);
2962
+ })
2963
+ ] })
2964
+ ] })
2965
+ ] });
2966
+ }
2967
+ InvoiceList.displayName = "InvoiceList";
2968
+ function useLogin(options) {
2969
+ const { loginMutation } = useAzirid();
2970
+ const login = useCallback(
2971
+ (data) => {
2972
+ loginMutation.mutate(data, {
2973
+ onSuccess: options?.onSuccess,
2974
+ onError: options?.onError
2975
+ });
2976
+ },
2977
+ [loginMutation, options?.onSuccess, options?.onError]
2978
+ );
2979
+ return useMemo(() => Object.assign({}, loginMutation, { login }), [loginMutation, login]);
2980
+ }
2981
+ function useSignup(options) {
2982
+ const { signupMutation } = useAzirid();
2983
+ const signup = useCallback(
2984
+ (data) => {
2985
+ signupMutation.mutate(data, {
2986
+ onSuccess: options?.onSuccess,
2987
+ onError: options?.onError
2988
+ });
2989
+ },
2990
+ [signupMutation, options?.onSuccess, options?.onError]
2991
+ );
2992
+ return useMemo(() => Object.assign({}, signupMutation, { signup }), [signupMutation, signup]);
2993
+ }
2994
+ function useLogout(options) {
2995
+ const { logoutMutation } = useAzirid();
2996
+ const logout = useCallback(() => {
2997
+ logoutMutation.mutate(void 0, {
2998
+ onSuccess: options?.onSuccess,
2999
+ onError: options?.onError
3000
+ });
3001
+ }, [logoutMutation, options?.onSuccess, options?.onError]);
3002
+ return useMemo(() => Object.assign({}, logoutMutation, { logout }), [logoutMutation, logout]);
3003
+ }
3004
+ function useSession(options) {
3005
+ const client = useAccessClient();
3006
+ const query = useQuery({
3007
+ queryKey: ["azirid-access", "session"],
3008
+ queryFn: () => client.get(client.paths.me),
3009
+ retry: false,
3010
+ enabled: options?.enabled ?? true,
3011
+ refetchInterval: options?.refetchInterval,
3012
+ refetchOnWindowFocus: options?.refetchOnWindowFocus ?? false
3013
+ });
3014
+ return {
3015
+ ...query,
3016
+ isAuthenticated: query.isSuccess && query.data !== null
3017
+ };
3018
+ }
3019
+ function useMagicLink(options) {
3020
+ const client = useAccessClient();
3021
+ const request = useMutation({
3022
+ mutationKey: ["azirid-access", "magic-link", "request"],
3023
+ mutationFn: (data) => client.post(client.paths.magicLinkRequest, data),
3024
+ onSuccess: () => options?.onRequestSuccess?.(),
3025
+ onError: options?.onError
3026
+ });
3027
+ const verify = useMutation({
3028
+ mutationKey: ["azirid-access", "magic-link", "verify"],
3029
+ mutationFn: (data) => client.post(client.paths.magicLinkVerify, data),
3030
+ onSuccess: options?.onVerifySuccess,
3031
+ onError: options?.onError
3032
+ });
3033
+ return { request, verify };
3034
+ }
3035
+ function useSocialLogin(options) {
3036
+ const client = useAccessClient();
3037
+ return useMutation({
3038
+ mutationKey: ["azirid-access", "social-login"],
3039
+ mutationFn: async (data) => {
3040
+ const body = { ...data };
3041
+ if (client.appContext?.tenantId) {
3042
+ body.tenantId = client.appContext.tenantId;
3043
+ }
3044
+ return client.post(client.paths.socialLogin, body);
3045
+ },
3046
+ onSuccess: options?.onSuccess,
3047
+ onError: options?.onError
3048
+ });
3049
+ }
3050
+ function useChangePassword(options) {
3051
+ const client = useAccessClient();
3052
+ return useMutation({
3053
+ mutationKey: ["azirid-access", "change-password"],
3054
+ mutationFn: (data) => client.post(client.paths.changePassword, data),
3055
+ onSuccess: options?.onSuccess,
3056
+ onError: options?.onError
3057
+ });
3058
+ }
3059
+ function useRefresh(options) {
3060
+ const client = useAccessClient();
3061
+ return useMutation({
3062
+ mutationKey: ["azirid-access", "refresh"],
3063
+ mutationFn: async () => {
3064
+ await client.refreshSession();
3065
+ return { accessToken: client.getAccessToken() };
3066
+ },
3067
+ onSuccess: (data) => {
3068
+ options?.onSuccess?.(data);
3069
+ },
3070
+ onError: options?.onError
3071
+ });
3072
+ }
3073
+ function useBootstrap(options) {
3074
+ const client = useAccessClient();
3075
+ const query = useQuery({
3076
+ queryKey: ["azirid-access", "bootstrap"],
3077
+ queryFn: async () => {
3078
+ const response = await client.post(client.paths.bootstrap);
3079
+ if (response.authenticated) {
3080
+ client.setAccessToken(response.accessToken);
3081
+ options?.onAuthenticated?.(response);
3082
+ } else {
3083
+ options?.onUnauthenticated?.();
3084
+ }
3085
+ return response;
3086
+ },
3087
+ retry: false,
3088
+ enabled: options?.enabled ?? true,
3089
+ staleTime: Infinity,
3090
+ refetchOnWindowFocus: false
3091
+ });
3092
+ const isAuthenticated = query.isSuccess && query.data !== void 0 && query.data.authenticated === true;
3093
+ return {
3094
+ ...query,
3095
+ isAuthenticated
3096
+ };
3097
+ }
3098
+ function usePasskeys(options) {
3099
+ const client = useAccessClient();
3100
+ const queryClient = useQueryClient();
3101
+ const list = useQuery({
3102
+ queryKey: ["azirid-access", "passkeys"],
3103
+ queryFn: () => client.get(client.paths.passkeys),
3104
+ enabled: options?.listEnabled ?? false
3105
+ });
3106
+ const registerStart = useMutation({
3107
+ mutationKey: ["azirid-access", "passkeys", "register-start"],
3108
+ mutationFn: (data) => client.post(client.paths.passkeyRegisterStart, data),
3109
+ onError: options?.onError
3110
+ });
3111
+ const registerVerify = useMutation({
3112
+ mutationKey: ["azirid-access", "passkeys", "register-verify"],
3113
+ mutationFn: (data) => client.post(client.paths.passkeyRegisterVerify, data),
3114
+ onSuccess: () => {
3115
+ queryClient.invalidateQueries({ queryKey: ["azirid-access", "passkeys"] });
3116
+ options?.onRegisterSuccess?.();
3117
+ },
3118
+ onError: options?.onError
3119
+ });
3120
+ const register = useMutation({
3121
+ mutationKey: ["azirid-access", "passkeys", "register"],
3122
+ mutationFn: (data) => client.post(client.paths.passkeys, data),
3123
+ onSuccess: () => {
3124
+ queryClient.invalidateQueries({ queryKey: ["azirid-access", "passkeys"] });
3125
+ options?.onRegisterSuccess?.();
3126
+ },
3127
+ onError: options?.onError
3128
+ });
3129
+ const revoke = useMutation({
3130
+ mutationKey: ["azirid-access", "passkeys", "revoke"],
3131
+ mutationFn: (passkeyId) => client.post(
3132
+ `${client.paths.passkeys}/${passkeyId}/revoke`
3133
+ ),
3134
+ onSuccess: (data) => {
3135
+ queryClient.invalidateQueries({ queryKey: ["azirid-access", "passkeys"] });
3136
+ options?.onRevokeSuccess?.(data);
3137
+ },
3138
+ onError: options?.onError
3139
+ });
3140
+ const login = useMutation({
3141
+ mutationKey: ["azirid-access", "passkeys", "login"],
3142
+ mutationFn: async (data) => {
3143
+ const body = { ...data };
3144
+ if (client.appContext?.tenantId) {
3145
+ body.tenantId = client.appContext.tenantId;
3146
+ }
3147
+ return client.post(client.paths.passkeyLogin, body);
3148
+ },
3149
+ onSuccess: options?.onLoginSuccess,
3150
+ onError: options?.onError
3151
+ });
3152
+ const loginStart = useMutation({
3153
+ mutationKey: ["azirid-access", "passkeys", "login-start"],
3154
+ mutationFn: async (data) => {
3155
+ const body = {};
3156
+ if (client.appContext?.tenantId) {
3157
+ body.tenantId = client.appContext.tenantId;
3158
+ }
3159
+ if (data) {
3160
+ Object.assign(body, data);
3161
+ }
3162
+ return client.post(client.paths.passkeyLoginStart, body);
3163
+ },
3164
+ onError: options?.onError
3165
+ });
3166
+ const loginVerify = useMutation({
3167
+ mutationKey: ["azirid-access", "passkeys", "login-verify"],
3168
+ mutationFn: async (data) => {
3169
+ const body = { ...data };
3170
+ if (client.appContext?.tenantId) {
3171
+ body.tenantId = client.appContext.tenantId;
3172
+ }
3173
+ return client.post(client.paths.passkeyLoginVerify, body);
3174
+ },
3175
+ onSuccess: options?.onLoginSuccess,
3176
+ onError: options?.onError
3177
+ });
3178
+ return {
3179
+ list,
3180
+ registerStart,
3181
+ registerVerify,
3182
+ register,
3183
+ revoke,
3184
+ login,
3185
+ loginStart,
3186
+ loginVerify
3187
+ };
3188
+ }
3189
+ function useSubmitTransferProof(options) {
3190
+ const client = useAccessClient();
3191
+ const queryClient = useQueryClient();
3192
+ const mutation = useMutation({
3193
+ mutationFn: (data) => client.post(client.paths.submitTransferProof, data),
3194
+ onSuccess: (data) => {
3195
+ void queryClient.invalidateQueries({ queryKey: ["transferProofs"] });
3196
+ options?.onSuccess?.(data);
3197
+ },
3198
+ onError: options?.onError
3199
+ });
3200
+ const submit = useCallback(
3201
+ (data) => {
3202
+ mutation.mutate(data);
3203
+ },
3204
+ [mutation]
3205
+ );
3206
+ return useMemo(() => ({ ...mutation, submit }), [mutation, submit]);
3207
+ }
3208
+ function useTransferProofs() {
3209
+ const client = useAccessClient();
3210
+ return useQuery({
3211
+ queryKey: ["transferProofs"],
3212
+ queryFn: () => client.get(client.paths.transferProofs)
3213
+ });
3214
+ }
3215
+ function zodToFieldErrors(zodError) {
3216
+ return zodError.issues.map((issue) => ({
3217
+ field: issue.path.join("."),
3218
+ message: issue.message
3219
+ }));
3220
+ }
3221
+ function useFormState(initialValues, schema, onSubmit) {
3222
+ const [values, setValues] = useState(initialValues);
3223
+ const [errors, setErrors] = useState([]);
3224
+ const [isSubmitting, setIsSubmitting] = useState(false);
3225
+ const mountedRef = useRef(true);
3226
+ const handleChange = useCallback(
3227
+ (field) => (e) => {
3228
+ const next = { ...values, [field]: e.target.value };
3229
+ setValues(next);
3230
+ setErrors((prev) => prev.filter((err) => err.field !== field));
3231
+ },
3232
+ [values]
3233
+ );
3234
+ const setFieldValue = useCallback((field, value) => {
3235
+ setValues((prev) => ({ ...prev, [field]: value }));
3236
+ setErrors((prev) => prev.filter((err) => err.field !== field));
3237
+ }, []);
3238
+ const handleSubmit = useCallback(
3239
+ async (e) => {
3240
+ e.preventDefault();
3241
+ const result = schema.safeParse(values);
3242
+ if (!result.success) {
3243
+ setErrors(zodToFieldErrors(result.error));
3244
+ return;
3245
+ }
3246
+ setIsSubmitting(true);
3247
+ try {
3248
+ await onSubmit(values);
3249
+ } finally {
3250
+ if (mountedRef.current) {
3251
+ setIsSubmitting(false);
3252
+ }
3253
+ }
3254
+ },
3255
+ [values, schema, onSubmit]
3256
+ );
3257
+ const reset = useCallback(() => {
3258
+ setValues(initialValues);
3259
+ setErrors([]);
3260
+ setIsSubmitting(false);
3261
+ }, [initialValues]);
3262
+ return { values, errors, isSubmitting, handleChange, handleSubmit, setFieldValue, reset };
3263
+ }
3264
+ function usePasswordToggle() {
3265
+ const [visible, setVisible] = useState(false);
3266
+ const toggle = useCallback(() => setVisible((v) => !v), []);
3267
+ return { visible, toggle, type: visible ? "text" : "password" };
3268
+ }
3269
+
3270
+ // src/index.ts
3271
+ var SDK_VERSION = "0.6.0";
3272
+
3273
+ export { AziridProvider, BASE_PATHS, CheckoutButton, InvoiceList, LoginForm, PATHS, PayButton, PayphoneCallback, PricingTable, ReferralCard, ReferralStats, SDK_VERSION, SignupForm, SubscriptionBadge, buildPaths, changePasswordSchema, cn, createAccessClient, createLoginSchema, createSignupSchema, en, es, isAuthError, loginSchema, magicLinkRequestSchema, magicLinkVerifySchema, passkeyRegisterStartSchema, removeStyles, resolveMessages, signupSchema, socialLoginSchema, useAccessClient, useAzirid, useBootstrap, useBranding, useChangePassword, useCheckout, useFormState, useInvoices, useLogin, useLogout, useMagicLink, useMessages, usePasskeys, usePasswordToggle, usePaymentProviders, usePayphoneConfirm, usePlans, useReferral, useReferralStats, useRefresh, useSession, useSignup, useSocialLogin, useSubmitTransferProof, useSubscription, useTransferProofs };
3274
+ //# sourceMappingURL=index.js.map
3275
+ //# sourceMappingURL=index.js.map