@saas-support/react 0.2.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/react.cjs ADDED
@@ -0,0 +1,593 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("react"),$=require("./index.cjs"),X=require("react-dom"),D=n.createContext(null);function S(){const e=n.useContext(D);if(!e)throw new Error("useSaaSContext must be used within a <SaaSProvider>");return e}function Z({publishableKey:e,apiKey:a,baseUrl:r,appearance:l,children:t}){const[d]=n.useState(()=>new $.SaaSSupport({publishableKey:e,apiKey:a,baseUrl:r})),[i,u]=n.useState(null),[o,c]=n.useState(!1),[p,g]=n.useState(null);return n.useEffect(()=>{let b=!1;d.load().then(async()=>{if(b)return;const f=await d.auth.getUser(),x=await d.auth.getSettings();u(f),g(x),c(!0)});const m=d.auth.onAuthStateChange(f=>{b||u(f)});return()=>{b=!0,m(),d.destroy()}},[d]),s.jsx(D.Provider,{value:{client:d,user:i,isLoaded:o,appearance:l,settings:p},children:t})}const ss={colorPrimary:"#6366f1",colorPrimaryHover:"#4f46e5",colorBackground:"#ffffff",colorText:"#1a1a2e",colorTextSecondary:"#6b7280",colorInputBackground:"#f9fafb",colorInputBorder:"#d1d5db",colorError:"#ef4444",colorSuccess:"#22c55e",colorWarning:"#f59e0b",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',borderRadius:"8px"},es={colorPrimary:"#818cf8",colorPrimaryHover:"#6366f1",colorBackground:"#1e1e2e",colorText:"#e2e8f0",colorTextSecondary:"#94a3b8",colorInputBackground:"#2a2a3e",colorInputBorder:"#3f3f5e",colorError:"#f87171",colorSuccess:"#4ade80",colorWarning:"#fbbf24",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',borderRadius:"8px"};function P(e){const a=(e==null?void 0:e.baseTheme)==="dark"?es:ss,r=e==null?void 0:e.variables;return{colorPrimary:(r==null?void 0:r.colorPrimary)??a.colorPrimary,colorPrimaryHover:r!=null&&r.colorPrimary?rs(r.colorPrimary,10):a.colorPrimaryHover,colorBackground:(r==null?void 0:r.colorBackground)??a.colorBackground,colorText:(r==null?void 0:r.colorText)??a.colorText,colorTextSecondary:a.colorTextSecondary,colorInputBackground:(r==null?void 0:r.colorInputBackground)??a.colorInputBackground,colorInputBorder:(r==null?void 0:r.colorInputBorder)??a.colorInputBorder,colorError:(r==null?void 0:r.colorError)??a.colorError,colorSuccess:(r==null?void 0:r.colorSuccess)??a.colorSuccess,colorWarning:(r==null?void 0:r.colorWarning)??a.colorWarning,fontFamily:(r==null?void 0:r.fontFamily)??a.fontFamily,borderRadius:(r==null?void 0:r.borderRadius)??a.borderRadius}}function rs(e,a){const r=parseInt(e.replace("#",""),16),l=Math.max(0,(r>>16)-Math.round(2.55*a)),t=Math.max(0,(r>>8&255)-Math.round(2.55*a)),d=Math.max(0,(r&255)-Math.round(2.55*a));return`#${(l<<16|t<<8|d).toString(16).padStart(6,"0")}`}function M(e){return`
2
+ :host {
3
+ all: initial;
4
+ font-family: ${e.fontFamily};
5
+ color: ${e.colorText};
6
+ line-height: 1.5;
7
+ -webkit-font-smoothing: antialiased;
8
+ }
9
+
10
+ * { box-sizing: border-box; margin: 0; padding: 0; }
11
+
12
+ .ss-card {
13
+ background: ${e.colorBackground};
14
+ border-radius: ${e.borderRadius};
15
+ padding: 32px;
16
+ width: 100%;
17
+ max-width: 400px;
18
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
19
+ border: 1px solid ${e.colorInputBorder};
20
+ }
21
+
22
+ .ss-card-wide { max-width: 640px; }
23
+
24
+ .ss-title {
25
+ font-size: 22px;
26
+ font-weight: 700;
27
+ color: ${e.colorText};
28
+ text-align: center;
29
+ margin-bottom: 24px;
30
+ }
31
+
32
+ .ss-subtitle {
33
+ font-size: 14px;
34
+ color: ${e.colorTextSecondary};
35
+ text-align: center;
36
+ margin-top: -16px;
37
+ margin-bottom: 24px;
38
+ }
39
+
40
+ .ss-field { margin-bottom: 16px; }
41
+
42
+ .ss-label {
43
+ display: block;
44
+ font-size: 14px;
45
+ font-weight: 500;
46
+ color: ${e.colorText};
47
+ margin-bottom: 6px;
48
+ }
49
+
50
+ .ss-input {
51
+ width: 100%;
52
+ padding: 10px 12px;
53
+ font-size: 14px;
54
+ font-family: inherit;
55
+ border: 1px solid ${e.colorInputBorder};
56
+ border-radius: calc(${e.borderRadius} - 2px);
57
+ background: ${e.colorInputBackground};
58
+ color: ${e.colorText};
59
+ outline: none;
60
+ transition: border-color 0.15s;
61
+ }
62
+
63
+ .ss-input:focus {
64
+ border-color: ${e.colorPrimary};
65
+ box-shadow: 0 0 0 3px ${e.colorPrimary}22;
66
+ }
67
+
68
+ .ss-input.ss-input-error { border-color: ${e.colorError}; }
69
+
70
+ .ss-query-textarea {
71
+ resize: vertical;
72
+ min-height: 60px;
73
+ font-family: monospace;
74
+ }
75
+
76
+ .ss-error {
77
+ font-size: 13px;
78
+ color: ${e.colorError};
79
+ margin-top: 4px;
80
+ }
81
+
82
+ .ss-global-error {
83
+ font-size: 13px;
84
+ color: ${e.colorError};
85
+ background: ${e.colorError}11;
86
+ border: 1px solid ${e.colorError}33;
87
+ border-radius: calc(${e.borderRadius} - 2px);
88
+ padding: 10px 12px;
89
+ margin-bottom: 16px;
90
+ text-align: center;
91
+ }
92
+
93
+ .ss-success-msg {
94
+ font-size: 13px;
95
+ color: ${e.colorSuccess};
96
+ background: ${e.colorSuccess}11;
97
+ border: 1px solid ${e.colorSuccess}33;
98
+ border-radius: calc(${e.borderRadius} - 2px);
99
+ padding: 10px 12px;
100
+ margin-bottom: 16px;
101
+ text-align: center;
102
+ }
103
+
104
+ .ss-loading {
105
+ text-align: center;
106
+ padding: 24px;
107
+ color: ${e.colorTextSecondary};
108
+ font-size: 14px;
109
+ }
110
+
111
+ .ss-empty {
112
+ text-align: center;
113
+ padding: 24px;
114
+ color: ${e.colorTextSecondary};
115
+ font-size: 14px;
116
+ }
117
+
118
+ /* Buttons */
119
+
120
+ .ss-btn {
121
+ width: 100%;
122
+ padding: 10px 16px;
123
+ font-size: 14px;
124
+ font-weight: 600;
125
+ font-family: inherit;
126
+ border: none;
127
+ border-radius: calc(${e.borderRadius} - 2px);
128
+ cursor: pointer;
129
+ transition: background 0.15s, opacity 0.15s;
130
+ }
131
+
132
+ .ss-btn:disabled { opacity: 0.6; cursor: not-allowed; }
133
+
134
+ .ss-btn-primary {
135
+ background: ${e.colorPrimary};
136
+ color: #fff;
137
+ }
138
+
139
+ .ss-btn-primary:hover:not(:disabled) { background: ${e.colorPrimaryHover}; }
140
+
141
+ .ss-btn-danger {
142
+ background: ${e.colorError};
143
+ color: #fff;
144
+ }
145
+
146
+ .ss-btn-danger:hover:not(:disabled) { opacity: 0.9; }
147
+
148
+ .ss-btn-current {
149
+ background: ${e.colorInputBackground};
150
+ color: ${e.colorTextSecondary};
151
+ border: 1px solid ${e.colorInputBorder};
152
+ }
153
+
154
+ .ss-btn-sm {
155
+ width: auto;
156
+ padding: 6px 12px;
157
+ font-size: 12px;
158
+ }
159
+
160
+ .ss-btn-group {
161
+ display: flex;
162
+ gap: 8px;
163
+ margin-top: 16px;
164
+ }
165
+
166
+ .ss-btn-group .ss-btn { flex: 1; }
167
+
168
+ .ss-btn-org-switcher {
169
+ display: flex;
170
+ align-items: center;
171
+ gap: 8px;
172
+ background: ${e.colorInputBackground};
173
+ border: 1px solid ${e.colorInputBorder};
174
+ color: ${e.colorText};
175
+ padding: 8px 12px;
176
+ font-size: 14px;
177
+ font-family: inherit;
178
+ border-radius: calc(${e.borderRadius} - 2px);
179
+ cursor: pointer;
180
+ width: auto;
181
+ }
182
+
183
+ .ss-chevron { font-size: 10px; }
184
+
185
+ .ss-btn-social {
186
+ display: flex;
187
+ align-items: center;
188
+ justify-content: center;
189
+ gap: 10px;
190
+ width: 100%;
191
+ padding: 10px 16px;
192
+ font-size: 14px;
193
+ font-weight: 500;
194
+ font-family: inherit;
195
+ border: 1px solid ${e.colorInputBorder};
196
+ border-radius: calc(${e.borderRadius} - 2px);
197
+ background: ${e.colorInputBackground};
198
+ color: ${e.colorText};
199
+ cursor: pointer;
200
+ transition: background 0.15s;
201
+ margin-bottom: 8px;
202
+ }
203
+
204
+ .ss-btn-social:hover:not(:disabled) { background: ${e.colorInputBorder}; }
205
+ .ss-btn-social:disabled { opacity: 0.6; cursor: not-allowed; }
206
+ .ss-btn-social svg { width: 18px; height: 18px; flex-shrink: 0; }
207
+
208
+ .ss-divider {
209
+ display: flex;
210
+ align-items: center;
211
+ gap: 12px;
212
+ margin: 20px 0;
213
+ color: ${e.colorTextSecondary};
214
+ font-size: 13px;
215
+ }
216
+
217
+ .ss-divider::before,
218
+ .ss-divider::after {
219
+ content: '';
220
+ flex: 1;
221
+ height: 1px;
222
+ background: ${e.colorInputBorder};
223
+ }
224
+
225
+ .ss-footer {
226
+ text-align: center;
227
+ margin-top: 20px;
228
+ font-size: 14px;
229
+ color: ${e.colorTextSecondary};
230
+ }
231
+
232
+ .ss-link {
233
+ color: ${e.colorPrimary};
234
+ text-decoration: none;
235
+ cursor: pointer;
236
+ font-weight: 500;
237
+ }
238
+
239
+ .ss-link:hover { text-decoration: underline; }
240
+
241
+ .ss-spinner {
242
+ display: inline-block;
243
+ width: 16px;
244
+ height: 16px;
245
+ border: 2px solid transparent;
246
+ border-top-color: currentColor;
247
+ border-radius: 50%;
248
+ animation: ss-spin 0.6s linear infinite;
249
+ margin-right: 8px;
250
+ vertical-align: middle;
251
+ }
252
+
253
+ @keyframes ss-spin { to { transform: rotate(360deg); } }
254
+
255
+ /* UserButton / Dropdown */
256
+
257
+ .ss-user-btn { position: relative; display: inline-block; }
258
+
259
+ .ss-avatar {
260
+ width: 36px;
261
+ height: 36px;
262
+ border-radius: 50%;
263
+ background: ${e.colorPrimary};
264
+ color: #fff;
265
+ display: flex;
266
+ align-items: center;
267
+ justify-content: center;
268
+ font-size: 14px;
269
+ font-weight: 600;
270
+ cursor: pointer;
271
+ border: none;
272
+ font-family: inherit;
273
+ transition: box-shadow 0.15s;
274
+ }
275
+
276
+ .ss-avatar:hover { box-shadow: 0 0 0 3px ${e.colorPrimary}33; }
277
+
278
+ .ss-dropdown {
279
+ position: absolute;
280
+ top: calc(100% + 8px);
281
+ right: 0;
282
+ background: ${e.colorBackground};
283
+ border: 1px solid ${e.colorInputBorder};
284
+ border-radius: ${e.borderRadius};
285
+ padding: 8px 0;
286
+ min-width: 200px;
287
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
288
+ z-index: 9999;
289
+ }
290
+
291
+ .ss-dropdown-org { left: 0; right: auto; }
292
+
293
+ .ss-dropdown-header {
294
+ padding: 8px 16px 12px;
295
+ border-bottom: 1px solid ${e.colorInputBorder};
296
+ margin-bottom: 4px;
297
+ }
298
+
299
+ .ss-dropdown-email {
300
+ font-size: 13px;
301
+ color: ${e.colorTextSecondary};
302
+ word-break: break-all;
303
+ }
304
+
305
+ .ss-dropdown-item {
306
+ display: block;
307
+ width: 100%;
308
+ padding: 8px 16px;
309
+ font-size: 14px;
310
+ font-family: inherit;
311
+ color: ${e.colorText};
312
+ background: none;
313
+ border: none;
314
+ text-align: left;
315
+ cursor: pointer;
316
+ transition: background 0.1s;
317
+ }
318
+
319
+ .ss-dropdown-item:hover { background: ${e.colorInputBackground}; }
320
+ .ss-dropdown-item-danger { color: ${e.colorError}; }
321
+ .ss-dropdown-item-active { font-weight: 600; color: ${e.colorPrimary}; }
322
+
323
+ /* Badges */
324
+
325
+ .ss-badge {
326
+ display: inline-block;
327
+ padding: 2px 8px;
328
+ font-size: 11px;
329
+ font-weight: 600;
330
+ border-radius: 999px;
331
+ text-transform: uppercase;
332
+ letter-spacing: 0.3px;
333
+ background: ${e.colorInputBackground};
334
+ color: ${e.colorTextSecondary};
335
+ }
336
+
337
+ .ss-badge-active { background: ${e.colorSuccess}22; color: ${e.colorSuccess}; }
338
+ .ss-badge-trialing { background: ${e.colorPrimary}22; color: ${e.colorPrimary}; }
339
+ .ss-badge-past-due { background: ${e.colorError}22; color: ${e.colorError}; }
340
+ .ss-badge-paused { background: ${e.colorWarning}22; color: ${e.colorWarning}; }
341
+ .ss-badge-canceled { background: ${e.colorTextSecondary}22; color: ${e.colorTextSecondary}; }
342
+
343
+ /* Tabs */
344
+
345
+ .ss-tab-group {
346
+ display: flex;
347
+ border-bottom: 1px solid ${e.colorInputBorder};
348
+ margin-bottom: 24px;
349
+ }
350
+
351
+ .ss-tab-group-sm { margin-bottom: 16px; }
352
+
353
+ .ss-tab {
354
+ padding: 8px 16px;
355
+ font-size: 14px;
356
+ font-weight: 500;
357
+ font-family: inherit;
358
+ color: ${e.colorTextSecondary};
359
+ background: none;
360
+ border: none;
361
+ border-bottom: 2px solid transparent;
362
+ cursor: pointer;
363
+ transition: color 0.15s, border-color 0.15s;
364
+ }
365
+
366
+ .ss-tab:hover { color: ${e.colorText}; }
367
+
368
+ .ss-tab-active {
369
+ color: ${e.colorPrimary};
370
+ border-bottom-color: ${e.colorPrimary};
371
+ }
372
+
373
+ .ss-tab-content .ss-card { box-shadow: none; border: none; padding: 0; }
374
+
375
+ /* Tables */
376
+
377
+ .ss-table-container { overflow-x: auto; }
378
+
379
+ .ss-table {
380
+ width: 100%;
381
+ border-collapse: collapse;
382
+ font-size: 14px;
383
+ }
384
+
385
+ .ss-th {
386
+ text-align: left;
387
+ padding: 10px 12px;
388
+ font-weight: 600;
389
+ color: ${e.colorTextSecondary};
390
+ border-bottom: 2px solid ${e.colorInputBorder};
391
+ white-space: nowrap;
392
+ }
393
+
394
+ .ss-th-sortable { cursor: pointer; user-select: none; }
395
+ .ss-th-sortable:hover { color: ${e.colorText}; }
396
+
397
+ .ss-sort-indicator { font-size: 10px; }
398
+ .ss-sorted-asc, .ss-sorted-desc { color: ${e.colorPrimary}; }
399
+
400
+ .ss-td {
401
+ padding: 10px 12px;
402
+ border-bottom: 1px solid ${e.colorInputBorder};
403
+ color: ${e.colorText};
404
+ }
405
+
406
+ .ss-tr:hover .ss-td { background: ${e.colorInputBackground}; }
407
+
408
+ .ss-table-footer {
409
+ text-align: center;
410
+ padding: 8px;
411
+ font-size: 12px;
412
+ color: ${e.colorTextSecondary};
413
+ }
414
+
415
+ /* Pricing */
416
+
417
+ .ss-pricing-grid {
418
+ display: grid;
419
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
420
+ gap: 16px;
421
+ }
422
+
423
+ .ss-pricing-card {
424
+ background: ${e.colorBackground};
425
+ border: 1px solid ${e.colorInputBorder};
426
+ border-radius: ${e.borderRadius};
427
+ padding: 24px;
428
+ display: flex;
429
+ flex-direction: column;
430
+ }
431
+
432
+ .ss-pricing-card-current { border-color: ${e.colorPrimary}; }
433
+
434
+ .ss-pricing-header {
435
+ display: flex;
436
+ align-items: center;
437
+ gap: 8px;
438
+ margin-bottom: 12px;
439
+ }
440
+
441
+ .ss-pricing-name {
442
+ font-size: 18px;
443
+ font-weight: 600;
444
+ color: ${e.colorText};
445
+ }
446
+
447
+ .ss-pricing-price { margin-bottom: 12px; }
448
+
449
+ .ss-pricing-amount {
450
+ font-size: 32px;
451
+ font-weight: 700;
452
+ color: ${e.colorText};
453
+ }
454
+
455
+ .ss-pricing-interval {
456
+ font-size: 14px;
457
+ color: ${e.colorTextSecondary};
458
+ }
459
+
460
+ .ss-pricing-desc {
461
+ font-size: 14px;
462
+ color: ${e.colorTextSecondary};
463
+ margin-bottom: 16px;
464
+ }
465
+
466
+ .ss-pricing-features {
467
+ list-style: none;
468
+ flex: 1;
469
+ margin-bottom: 20px;
470
+ }
471
+
472
+ .ss-pricing-feature {
473
+ font-size: 14px;
474
+ color: ${e.colorText};
475
+ padding: 4px 0;
476
+ }
477
+
478
+ .ss-check { color: ${e.colorSuccess}; margin-right: 6px; }
479
+
480
+ /* Usage / Progress */
481
+
482
+ .ss-usage-item { margin-bottom: 16px; }
483
+
484
+ .ss-usage-header {
485
+ display: flex;
486
+ justify-content: space-between;
487
+ margin-bottom: 6px;
488
+ }
489
+
490
+ .ss-usage-metric {
491
+ font-size: 14px;
492
+ font-weight: 500;
493
+ color: ${e.colorText};
494
+ }
495
+
496
+ .ss-usage-value {
497
+ font-size: 14px;
498
+ color: ${e.colorTextSecondary};
499
+ }
500
+
501
+ .ss-progress-bar {
502
+ width: 100%;
503
+ height: 8px;
504
+ background: ${e.colorInputBackground};
505
+ border-radius: 4px;
506
+ overflow: hidden;
507
+ }
508
+
509
+ .ss-progress-fill {
510
+ height: 100%;
511
+ background: ${e.colorPrimary};
512
+ border-radius: 4px;
513
+ transition: width 0.3s;
514
+ }
515
+
516
+ .ss-progress-danger { background: ${e.colorError}; }
517
+
518
+ /* Chart */
519
+
520
+ .ss-chart-container { text-align: center; }
521
+
522
+ .ss-chart-title {
523
+ font-size: 16px;
524
+ font-weight: 600;
525
+ color: ${e.colorText};
526
+ margin-bottom: 12px;
527
+ }
528
+
529
+ /* Dashboard */
530
+
531
+ .ss-dashboard-grid {
532
+ display: grid;
533
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
534
+ gap: 16px;
535
+ }
536
+
537
+ .ss-widget {
538
+ background: ${e.colorBackground};
539
+ border: 1px solid ${e.colorInputBorder};
540
+ border-radius: ${e.borderRadius};
541
+ padding: 16px;
542
+ }
543
+
544
+ .ss-widget-header {
545
+ font-size: 14px;
546
+ font-weight: 600;
547
+ color: ${e.colorText};
548
+ margin-bottom: 12px;
549
+ }
550
+
551
+ /* Saved Queries */
552
+
553
+ .ss-saved-query-card {
554
+ padding: 12px 16px;
555
+ border: 1px solid ${e.colorInputBorder};
556
+ border-radius: calc(${e.borderRadius} - 2px);
557
+ margin-bottom: 8px;
558
+ cursor: pointer;
559
+ transition: border-color 0.15s;
560
+ }
561
+
562
+ .ss-saved-query-card:hover { border-color: ${e.colorPrimary}; }
563
+
564
+ .ss-saved-query-header {
565
+ display: flex;
566
+ align-items: center;
567
+ justify-content: space-between;
568
+ margin-bottom: 4px;
569
+ }
570
+
571
+ .ss-saved-query-name {
572
+ font-size: 14px;
573
+ font-weight: 600;
574
+ color: ${e.colorText};
575
+ }
576
+
577
+ .ss-saved-query-desc {
578
+ font-size: 13px;
579
+ color: ${e.colorTextSecondary};
580
+ margin-bottom: 8px;
581
+ }
582
+
583
+ .ss-saved-query-footer {
584
+ display: flex;
585
+ align-items: center;
586
+ justify-content: space-between;
587
+ }
588
+
589
+ .ss-saved-query-date {
590
+ font-size: 12px;
591
+ color: ${e.colorTextSecondary};
592
+ }
593
+ `}function w({children:e,appearance:a}){const r=n.useRef(null),[l,t]=n.useState(null);n.useEffect(()=>{var p;if(!r.current||r.current.shadowRoot){t(((p=r.current)==null?void 0:p.shadowRoot)??null);return}const i=r.current.attachShadow({mode:"open"}),u=P(a),o=document.createElement("style");o.textContent=M(u),i.appendChild(o);const c=document.createElement("div");i.appendChild(c),t(i)},[]),n.useEffect(()=>{if(!l)return;const i=l.querySelector("style");if(i){const u=P(a);i.textContent=M(u)}},[a,l]);const d=(l==null?void 0:l.querySelector("div"))??null;return s.jsx("div",{ref:r,style:{display:"contents"},children:d&&X.createPortal(e,d)})}function q(){const{client:e,user:a,isLoaded:r}=S();return{isLoaded:r,isSignedIn:!!a,user:a,signOut:n.useCallback(()=>e.auth.signOut(),[e]),getToken:n.useCallback(()=>e.auth.getToken(),[e])}}function as(){const{user:e,isLoaded:a}=S();return{user:e,isLoaded:a}}function z(){const{client:e}=S(),[a,r]=n.useState(!1),[l,t]=n.useState(null),d=n.useCallback(async(o,c)=>{r(!0),t(null);try{return await e.auth.signIn(o,c)}catch(p){return t(p instanceof Error?p.message:"Sign in failed"),null}finally{r(!1)}},[e]),i=n.useCallback(async o=>{r(!0),t(null);try{return await e.auth.signInWithOAuth(o)}catch(c){return t(c instanceof Error?c.message:"OAuth sign in failed"),null}finally{r(!1)}},[e]),u=n.useCallback(async(o,c)=>{r(!0),t(null);try{return await e.auth.submitMfaCode(o,c)}catch(p){return t(p instanceof Error?p.message:"MFA verification failed"),null}finally{r(!1)}},[e]);return{signIn:d,signInWithOAuth:i,submitMfaCode:u,isLoading:a,error:l,setError:t}}function F(){const{client:e}=S(),[a,r]=n.useState(!1),[l,t]=n.useState(null);return{signUp:n.useCallback(async(i,u)=>{r(!0),t(null);try{return await e.auth.signUp(i,u)}catch(o){return t(o instanceof Error?o.message:"Sign up failed"),null}finally{r(!1)}},[e]),isLoading:a,error:l,setError:t}}function U(){const{client:e}=S(),[a,r]=n.useState([]),[l,t]=n.useState(null),[d,i]=n.useState([]),[u,o]=n.useState(!1),[c,p]=n.useState(null),g=n.useCallback(async()=>{o(!0),p(null);try{const f=await e.auth.listOrgs();r(f)}catch(f){p(f instanceof Error?f.message:"Failed to load organizations")}finally{o(!1)}},[e]);n.useEffect(()=>{g()},[g]);const b=n.useCallback(async f=>{try{const x=await e.auth.getOrg(f);t(x);const y=await e.auth.listMembers(f);i(y)}catch(x){p(x instanceof Error?x.message:"Failed to load organization")}},[e]),m=n.useCallback(async(f,x)=>{try{const y=await e.auth.createOrg(f,x);return r(h=>[...h,y]),y}catch(y){return p(y instanceof Error?y.message:"Failed to create organization"),null}},[e]);return{orgs:a,selectedOrg:l,members:d,isLoading:u,error:c,refresh:g,selectOrg:b,createOrg:m}}const R='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>',O='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" fill="currentColor"/></svg>';function ts({appearance:e,signUpUrl:a,onSignUp:r}){const{appearance:l,settings:t}=S(),{signIn:d,signInWithOAuth:i,submitMfaCode:u,isLoading:o,error:c,setError:p}=z(),g=e??l,[b,m]=n.useState(""),[f,x]=n.useState(""),[y,h]=n.useState(!1),[j,v]=n.useState(""),[N,k]=n.useState(""),T=n.useCallback(async E=>{if(E.preventDefault(),y){await u(j,N);return}const B=await d(b,f);B&&$.isMfaRequired(B)&&(v(B.mfaToken),h(!0),p(null))},[b,f,y,j,N,d,u,p]),C=n.useCallback(async E=>{await i(E)},[i]),I=(t==null?void 0:t.googleEnabled)||(t==null?void 0:t.githubEnabled);return s.jsx(w,{appearance:g,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Sign in"}),!y&&s.jsxs(s.Fragment,{children:[(t==null?void 0:t.googleEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>C("google"),disabled:o,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:R}}),"Continue with Google"]}),(t==null?void 0:t.githubEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>C("github"),disabled:o,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:O}}),"Continue with GitHub"]}),I&&s.jsx("div",{className:"ss-divider",children:"or"})]}),c&&s.jsx("div",{className:"ss-global-error",children:c}),s.jsxs("form",{onSubmit:T,children:[y?s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-mfa-code",children:"Authentication code"}),s.jsx("input",{id:"ss-mfa-code",className:"ss-input",type:"text",inputMode:"numeric",autoComplete:"one-time-code",placeholder:"Enter 6-digit code",value:N,onChange:E=>k(E.target.value),autoFocus:!0})]}):s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-email",children:"Email"}),s.jsx("input",{id:"ss-email",className:"ss-input",type:"email",autoComplete:"email",placeholder:"you@example.com",value:b,onChange:E=>m(E.target.value),required:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-password",children:"Password"}),s.jsx("input",{id:"ss-password",className:"ss-input",type:"password",autoComplete:"current-password",placeholder:"Enter your password",value:f,onChange:E=>x(E.target.value),required:!0})]})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:o,children:[o&&s.jsx("span",{className:"ss-spinner"}),y?"Verify":"Continue"]})]}),y&&s.jsx("div",{className:"ss-footer",children:s.jsx("span",{className:"ss-link",onClick:()=>{h(!1),k(""),p(null)},children:"Back to sign in"})}),!y&&s.jsxs("div",{className:"ss-footer",children:["Don't have an account?"," ",r?s.jsx("span",{className:"ss-link",onClick:r,children:"Sign up"}):a?s.jsx("a",{className:"ss-link",href:a,children:"Sign up"}):s.jsx("span",{className:"ss-link",children:"Sign up"})]})]})})}function ns({appearance:e,signInUrl:a,onSignIn:r}){const{appearance:l,settings:t}=S(),{signUp:d,isLoading:i,error:u,setError:o}=F(),{signInWithOAuth:c}=z(),p=e??l,[g,b]=n.useState(""),[m,f]=n.useState(""),[x,y]=n.useState(""),[h,j]=n.useState(null),v=n.useCallback(async C=>{if(C.preventDefault(),j(null),m!==x){j("Passwords do not match");return}const I=(t==null?void 0:t.passwordMinLength)??8;if(m.length<I){j(`Password must be at least ${I} characters`);return}await d(g,m)},[g,m,x,t,d]),N=n.useCallback(async C=>{await c(C)},[c]),k=(t==null?void 0:t.googleEnabled)||(t==null?void 0:t.githubEnabled),T=h||u;return s.jsx(w,{appearance:p,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Create account"}),(t==null?void 0:t.googleEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>N("google"),disabled:i,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:R}}),"Continue with Google"]}),(t==null?void 0:t.githubEnabled)&&s.jsxs("button",{type:"button",className:"ss-btn-social",onClick:()=>N("github"),disabled:i,children:[s.jsx("span",{dangerouslySetInnerHTML:{__html:O}}),"Continue with GitHub"]}),k&&s.jsx("div",{className:"ss-divider",children:"or"}),T&&s.jsx("div",{className:"ss-global-error",children:T}),s.jsxs("form",{onSubmit:v,children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-signup-email",children:"Email"}),s.jsx("input",{id:"ss-signup-email",className:"ss-input",type:"email",autoComplete:"email",placeholder:"you@example.com",value:g,onChange:C=>b(C.target.value),required:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-signup-password",children:"Password"}),s.jsx("input",{id:"ss-signup-password",className:"ss-input",type:"password",autoComplete:"new-password",placeholder:"Create a password",value:m,onChange:C=>{f(C.target.value),j(null)},required:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-signup-confirm",children:"Confirm password"}),s.jsx("input",{id:"ss-signup-confirm",className:"ss-input",type:"password",autoComplete:"new-password",placeholder:"Confirm your password",value:x,onChange:C=>{y(C.target.value),j(null)},required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:i,children:[i&&s.jsx("span",{className:"ss-spinner"}),"Create account"]})]}),s.jsxs("div",{className:"ss-footer",children:["Already have an account?"," ",r?s.jsx("span",{className:"ss-link",onClick:r,children:"Sign in"}):a?s.jsx("a",{className:"ss-link",href:a,children:"Sign in"}):s.jsx("span",{className:"ss-link",children:"Sign in"})]})]})})}function os({appearance:e}){const{appearance:a}=S(),{user:r,signOut:l}=q(),t=e??a,[d,i]=n.useState(!1),u=n.useRef(null),o=n.useCallback(p=>{u.current&&!u.current.contains(p.target)&&i(!1)},[]);if(n.useEffect(()=>{if(d){const p=setTimeout(()=>{document.addEventListener("click",o)},0);return()=>{clearTimeout(p),document.removeEventListener("click",o)}}},[d,o]),!r)return null;const c=r.email.charAt(0).toUpperCase();return s.jsx(w,{appearance:t,children:s.jsxs("div",{className:"ss-user-btn",ref:u,children:[s.jsx("button",{type:"button",className:"ss-avatar",onClick:()=>i(!d),"aria-label":"User menu",children:c}),d&&s.jsxs("div",{className:"ss-dropdown",children:[s.jsx("div",{className:"ss-dropdown-header",children:s.jsx("div",{className:"ss-dropdown-email",children:r.email})}),s.jsx("button",{type:"button",className:"ss-dropdown-item ss-dropdown-item-danger",onClick:async()=>{i(!1),await l()},children:"Sign out"})]})]})})}function cs({appearance:e}){const{appearance:a}=S(),{user:r,signOut:l}=q(),t=e??a;return r?s.jsx(w,{appearance:t,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Profile"}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Email"}),s.jsx("input",{className:"ss-input",type:"email",value:r.email,disabled:!0,readOnly:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Provider"}),s.jsx("input",{className:"ss-input",type:"text",value:r.provider,disabled:!0,readOnly:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Email verified"}),s.jsx("input",{className:"ss-input",type:"text",value:r.emailVerified?"Yes":"No",disabled:!0,readOnly:!0})]}),s.jsx("div",{style:{marginTop:"24px"},children:s.jsx("button",{type:"button",className:"ss-btn ss-btn-primary",onClick:()=>l(),style:{background:"#ef4444"},children:"Sign out"})})]})}):null}function ls({appearance:e,onOrgChange:a}){const{appearance:r}=S(),{orgs:l,selectedOrg:t,selectOrg:d,isLoading:i}=U(),u=e??r,[o,c]=n.useState(!1),p=n.useRef(null),g=n.useCallback(m=>{p.current&&!p.current.contains(m.target)&&c(!1)},[]);if(n.useEffect(()=>{if(o){const m=setTimeout(()=>{document.addEventListener("click",g)},0);return()=>{clearTimeout(m),document.removeEventListener("click",g)}}},[o,g]),i||l.length===0)return null;const b=(t==null?void 0:t.name)??"Select organization";return s.jsx(w,{appearance:u,children:s.jsxs("div",{className:"ss-user-btn",ref:p,children:[s.jsxs("button",{type:"button",className:"ss-btn ss-btn-org-switcher",onClick:()=>c(!o),children:[b,s.jsx("span",{className:"ss-chevron",children:o?"▲":"▼"})]}),o&&s.jsx("div",{className:"ss-dropdown ss-dropdown-org",children:l.map(m=>s.jsx("button",{type:"button",className:`ss-dropdown-item ${(t==null?void 0:t.id)===m.id?"ss-dropdown-item-active":""}`,onClick:async()=>{c(!1),await d(m.id),a==null||a(m)},children:m.name},m.id))})]})})}function is(e,a="USD"){return new Intl.NumberFormat("en-US",{style:"currency",currency:a,minimumFractionDigits:e%100===0?0:2}).format(e/100)}function ds({plans:e,currentPlanId:a,onSelectPlan:r,interval:l,appearance:t}){const{appearance:d}=S(),i=t??d,u=l?e.filter(o=>o.interval===l||o.isFree):e;return s.jsx(w,{appearance:i,children:s.jsx("div",{className:"ss-pricing-grid",children:u.map(o=>{const c=o.id===a;return s.jsxs("div",{className:`ss-pricing-card ${c?"ss-pricing-card-current":""}`,children:[s.jsxs("div",{className:"ss-pricing-header",children:[s.jsx("h3",{className:"ss-pricing-name",children:o.name}),o.trialDays>0&&s.jsxs("span",{className:"ss-badge ss-badge-trialing",children:[o.trialDays,"-day trial"]}),o.isFree&&s.jsx("span",{className:"ss-badge ss-badge-active",children:"Free"})]}),s.jsx("div",{className:"ss-pricing-price",children:o.isFree?s.jsx("span",{className:"ss-pricing-amount",children:"Free"}):s.jsxs(s.Fragment,{children:[s.jsx("span",{className:"ss-pricing-amount",children:is(o.amountCents,o.currency)}),s.jsxs("span",{className:"ss-pricing-interval",children:["/",o.interval]})]})}),o.description&&s.jsx("p",{className:"ss-pricing-desc",children:o.description}),o.features.length>0&&s.jsx("ul",{className:"ss-pricing-features",children:o.features.map((p,g)=>s.jsxs("li",{className:"ss-pricing-feature",children:[s.jsx("span",{className:"ss-check",children:"✓"})," ",p]},g))}),s.jsx("button",{type:"button",className:`ss-btn ${c?"ss-btn-current":"ss-btn-primary"}`,disabled:c,onClick:()=>r(o.id),children:c?"Current plan":"Select plan"})]},o.id)})})})}function us(){const{client:e}=S();return{billing:e.billing}}function L(e){const{client:a}=S();return n.useMemo(()=>{if(e){const r=new $.Transport("https://api.saas-support.com/v1",{type:"portalToken",token:e});return new $.BillingClient(r)}return a.billing},[a,e])}function H(e,a){const r=L(a),[l,t]=n.useState(null),[d,i]=n.useState(!0),[u,o]=n.useState(null),c=n.useCallback(async()=>{i(!0),o(null);try{const p=await r.getCustomer(e);t(p)}catch(p){o(p instanceof Error?p.message:"Failed to load subscription")}finally{i(!1)}},[r,e]);return n.useEffect(()=>{c()},[c]),{customer:l,isLoading:d,error:u,refresh:c}}function W(e,a){const r=L(a),[l,t]=n.useState([]),[d,i]=n.useState(!0),[u,o]=n.useState(null),c=n.useCallback(async()=>{i(!0),o(null);try{const p=await r.getInvoices(e);t(p)}catch(p){o(p instanceof Error?p.message:"Failed to load invoices")}finally{i(!1)}},[r,e]);return n.useEffect(()=>{c()},[c]),{invoices:l,isLoading:d,error:u,refresh:c}}function _(e,a){const r=L(a),[l,t]=n.useState([]),[d,i]=n.useState(!0),[u,o]=n.useState(null),c=n.useCallback(async()=>{i(!0),o(null);try{const p=await r.getCurrentUsage(e);t(p)}catch(p){o(p instanceof Error?p.message:"Failed to load usage")}finally{i(!1)}},[r,e]);return n.useEffect(()=>{c()},[c]),{usage:l,isLoading:d,error:u,refresh:c}}const ps={active:"ss-badge-active"};function Q({customerId:e,portalToken:a,onChangePlan:r,onCancel:l,appearance:t}){const{appearance:d}=S(),{customer:i,isLoading:u,error:o}=H(e,a),c=t??d;return s.jsx(w,{appearance:c,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Subscription"}),u&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),o&&s.jsx("div",{className:"ss-global-error",children:o}),i&&!u&&s.jsxs(s.Fragment,{children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Customer"}),s.jsx("input",{className:"ss-input",value:i.name||i.email,disabled:!0,readOnly:!0})]}),s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",children:"Status"}),s.jsx("div",{children:s.jsx("span",{className:`ss-badge ${ps.active}`,children:"Active"})})]}),s.jsxs("div",{className:"ss-btn-group",children:[r&&s.jsx("button",{type:"button",className:"ss-btn ss-btn-primary",onClick:r,children:"Change plan"}),l&&s.jsx("button",{type:"button",className:"ss-btn ss-btn-danger",onClick:l,children:"Cancel subscription"})]})]})]})})}const gs={paid:"ss-badge-active",open:"ss-badge-trialing",draft:"ss-badge-paused",void:"ss-badge-canceled",uncollectible:"ss-badge-past-due"};function xs(e){return new Date(e).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})}function bs(e){return new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",minimumFractionDigits:2}).format(e/100)}function G({customerId:e,portalToken:a,appearance:r}){const{appearance:l}=S(),{invoices:t,isLoading:d,error:i}=W(e,a),u=r??l,o=[...t].sort((c,p)=>new Date(p.createdAt).getTime()-new Date(c.createdAt).getTime());return s.jsx(w,{appearance:u,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Invoices"}),d&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),i&&s.jsx("div",{className:"ss-global-error",children:i}),!d&&o.length===0&&s.jsx("p",{className:"ss-empty",children:"No invoices yet."}),!d&&o.length>0&&s.jsxs("table",{className:"ss-table",children:[s.jsx("thead",{children:s.jsxs("tr",{children:[s.jsx("th",{className:"ss-th",children:"Date"}),s.jsx("th",{className:"ss-th",children:"Amount"}),s.jsx("th",{className:"ss-th",children:"Status"}),s.jsx("th",{className:"ss-th",children:"PDF"})]})}),s.jsx("tbody",{children:o.map(c=>s.jsxs("tr",{className:"ss-tr",children:[s.jsx("td",{className:"ss-td",children:xs(c.createdAt)}),s.jsx("td",{className:"ss-td",children:bs(c.amountCents)}),s.jsx("td",{className:"ss-td",children:s.jsx("span",{className:`ss-badge ${gs[c.status]||""}`,children:c.status})}),s.jsx("td",{className:"ss-td",children:c.pdfUrl?s.jsx("a",{className:"ss-link",href:c.pdfUrl,target:"_blank",rel:"noopener noreferrer",children:"Download"}):"—"})]},c.id))})]})]})})}function V({customerId:e,limits:a,portalToken:r,appearance:l}){const{appearance:t}=S(),{usage:d,isLoading:i,error:u}=_(e,r),o=l??t;return s.jsx(w,{appearance:o,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Usage"}),i&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),u&&s.jsx("div",{className:"ss-global-error",children:u}),!i&&d.length===0&&s.jsx("p",{className:"ss-empty",children:"No usage data."}),!i&&d.map(c=>{const p=a==null?void 0:a[c.metric],g=p?Math.min(100,c.total/p*100):null;return s.jsxs("div",{className:"ss-usage-item",children:[s.jsxs("div",{className:"ss-usage-header",children:[s.jsx("span",{className:"ss-usage-metric",children:c.metric}),s.jsxs("span",{className:"ss-usage-value",children:[c.total.toLocaleString(),p?` / ${p.toLocaleString()}`:""]})]}),g!==null&&s.jsx("div",{className:"ss-progress-bar",children:s.jsx("div",{className:`ss-progress-fill ${g>90?"ss-progress-danger":""}`,style:{width:`${g}%`}})})]},c.metric)})]})})}function ms({customerId:e,portalToken:a,limits:r,onChangePlan:l,onCancel:t,appearance:d}){const{appearance:i}=S(),u=d??i,[o,c]=n.useState("subscription"),p=[{id:"subscription",label:"Subscription"},{id:"invoices",label:"Invoices"},{id:"usage",label:"Usage"}];return s.jsx(w,{appearance:u,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Billing"}),s.jsx("div",{className:"ss-tab-group",children:p.map(g=>s.jsx("button",{type:"button",className:`ss-tab ${o===g.id?"ss-tab-active":""}`,onClick:()=>c(g.id),children:g.label},g.id))}),s.jsxs("div",{className:"ss-tab-content",children:[o==="subscription"&&s.jsx(Q,{customerId:e,portalToken:a,onChangePlan:l,onCancel:t}),o==="invoices"&&s.jsx(G,{customerId:e,portalToken:a}),o==="usage"&&s.jsx(V,{customerId:e,portalToken:a,limits:r})]})]})})}function hs({customerId:e,portalToken:a,onApplied:r,appearance:l}){const{appearance:t}=S(),d=L(a),i=l??t,[u,o]=n.useState(""),[c,p]=n.useState(!1),[g,b]=n.useState(null),[m,f]=n.useState(null),x=n.useCallback(async y=>{if(y.preventDefault(),!!u.trim()){p(!0),b(null),f(null);try{const h=await d.applyCoupon(e,u.trim());f(`Coupon applied! ${h.discountType==="percent"?`${h.amount}% off`:`$${(h.amount/100).toFixed(2)} off`}`),o(""),r==null||r(h)}catch(h){b(h instanceof Error?h.message:"Invalid coupon code")}finally{p(!1)}}},[d,e,u,r]);return s.jsx(w,{appearance:i,children:s.jsxs("div",{className:"ss-card",children:[s.jsx("h2",{className:"ss-title",children:"Apply coupon"}),g&&s.jsx("div",{className:"ss-global-error",children:g}),m&&s.jsx("div",{className:"ss-success-msg",children:m}),s.jsxs("form",{onSubmit:x,children:[s.jsxs("div",{className:"ss-field",children:[s.jsx("label",{className:"ss-label",htmlFor:"ss-coupon-code",children:"Coupon code"}),s.jsx("input",{id:"ss-coupon-code",className:"ss-input",type:"text",placeholder:"Enter coupon code",value:u,onChange:y=>o(y.target.value),required:!0})]}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:c||!u.trim(),children:[c&&s.jsx("span",{className:"ss-spinner"}),"Apply"]})]})]})})}function fs(){const{client:e}=S();return{report:e.report}}function A(){const{client:e}=S(),[a,r]=n.useState(null),[l,t]=n.useState(!1),[d,i]=n.useState(null),u=n.useCallback(async o=>{t(!0),i(null);try{const c=await e.report.executeQuery(o);return r(c),c}catch(c){return i(c instanceof Error?c.message:"Query failed"),null}finally{t(!1)}},[e]);return{result:a,execute:u,isLoading:l,error:d}}function J(e){const{client:a}=S(),[r,l]=n.useState(null),[t,d]=n.useState(!0),[i,u]=n.useState(null),o=n.useCallback(async()=>{d(!0),u(null);try{const c=await a.report.listQueries(e);l(c)}catch(c){u(c instanceof Error?c.message:"Failed to load queries")}finally{d(!1)}},[a,e]);return n.useEffect(()=>{o()},[o]),{queries:(r==null?void 0:r.data)??[],meta:r==null?void 0:r.meta,isLoading:t,error:i,refresh:o}}function ys(e){const{client:a}=S(),[r,l]=n.useState(null),[t,d]=n.useState(!0),[i,u]=n.useState(null),o=n.useCallback(async()=>{d(!0),u(null);try{const c=await a.report.getDashboard(e);l(c)}catch(c){u(c instanceof Error?c.message:"Failed to load dashboard")}finally{d(!1)}},[a,e]);return n.useEffect(()=>{o()},[o]),{dashboard:r,isLoading:t,error:i,refresh:o}}function js(e,a,r="https://api.saas-support.com/v1"){const l=n.useMemo(()=>{const g=new $.Transport(r,{type:"embedToken",token:e});return new $.ReportClient(g)},[e,r]),[t,d]=n.useState(null),[i,u]=n.useState(!0),[o,c]=n.useState(null),p=n.useCallback(async()=>{u(!0),c(null);try{const g=await l.getDashboard(a);d(g)}catch(g){c(g instanceof Error?g.message:"Failed to load dashboard")}finally{u(!1)}},[l,a]);return n.useEffect(()=>{p()},[p]),{dashboard:t,reportClient:l,isLoading:i,error:o,refresh:p}}function Ss({onResult:e,mode:a="both",placeholder:r,appearance:l}){const{appearance:t}=S(),{execute:d,isLoading:i,error:u}=A(),o=l??t,[c,p]=n.useState(""),[g,b]=n.useState(a==="sql"?"sql":"nl"),m=n.useCallback(async f=>{if(f.preventDefault(),!c.trim())return;const y=await d(g==="sql"?{sql:c}:{naturalLanguage:c});y&&(e==null||e(y))},[c,g,d,e]);return s.jsx(w,{appearance:o,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[a==="both"&&s.jsxs("div",{className:"ss-tab-group ss-tab-group-sm",children:[s.jsx("button",{type:"button",className:`ss-tab ${g==="nl"?"ss-tab-active":""}`,onClick:()=>b("nl"),children:"Natural Language"}),s.jsx("button",{type:"button",className:`ss-tab ${g==="sql"?"ss-tab-active":""}`,onClick:()=>b("sql"),children:"SQL"})]}),u&&s.jsx("div",{className:"ss-global-error",children:u}),s.jsxs("form",{onSubmit:m,children:[s.jsx("div",{className:"ss-field",children:s.jsx("textarea",{className:"ss-input ss-query-textarea",placeholder:r??(g==="sql"?"SELECT ...":"Ask a question about your data..."),value:c,onChange:f=>p(f.target.value),rows:3})}),s.jsxs("button",{type:"submit",className:"ss-btn ss-btn-primary",disabled:i||!c.trim(),children:[i&&s.jsx("span",{className:"ss-spinner"}),"Run query"]})]})]})})}function Y({columns:e,rows:a,sortable:r=!0,maxRows:l,appearance:t}){const{appearance:d}=S(),i=t??d,[u,o]=n.useState(null),[c,p]=n.useState("asc"),g=n.useMemo(()=>u?[...a].sort((x,y)=>{const h=x[u],j=y[u];if(h==null&&j==null)return 0;if(h==null)return 1;if(j==null)return-1;if(typeof h=="number"&&typeof j=="number")return c==="asc"?h-j:j-h;const v=String(h),N=String(j);return c==="asc"?v.localeCompare(N):N.localeCompare(v)}):a,[a,u,c]),b=l?g.slice(0,l):g,m=x=>{r&&(u===x?p(y=>y==="asc"?"desc":"asc"):(o(x),p("asc")))};function f(x){return x==null?"":typeof x=="object"?JSON.stringify(x):String(x)}return s.jsx(w,{appearance:i,children:s.jsxs("div",{className:"ss-table-container",children:[s.jsxs("table",{className:"ss-table",children:[s.jsx("thead",{children:s.jsx("tr",{children:e.map(x=>s.jsxs("th",{className:`ss-th ${r?"ss-th-sortable":""} ${u===x?c==="asc"?"ss-sorted-asc":"ss-sorted-desc":""}`,onClick:()=>m(x),children:[x,u===x&&s.jsx("span",{className:"ss-sort-indicator",children:c==="asc"?" ▲":" ▼"})]},x))})}),s.jsx("tbody",{children:b.map((x,y)=>s.jsx("tr",{className:"ss-tr",children:e.map(h=>s.jsx("td",{className:"ss-td",children:f(x[h])},h))},y))})]}),l&&a.length>l&&s.jsxs("div",{className:"ss-table-footer",children:["Showing ",l," of ",a.length," rows"]})]})})}function vs(e,a="#6366f1"){const r=parseInt(a.replace("#","").slice(0,2),16),l=[];for(let t=0;t<e;t++){const d=(r+t*Math.floor(360/Math.max(e,1)))%360;l.push(`hsl(${d}, 65%, 55%)`)}return l}function Ns({labels:e,values:a,w:r,h:l,colors:t}){const d=Math.max(...a,1),i=40,u=r-i*2,o=l-i*2,c=Math.max(1,u/e.length-4);return s.jsxs("g",{children:[s.jsx("line",{x1:i,y1:l-i,x2:r-i,y2:l-i,stroke:"#ccc",strokeWidth:1}),a.map((p,g)=>{const b=p/d*o,m=i+u/e.length*g+2,f=l-i-b;return s.jsxs("g",{children:[s.jsx("rect",{x:m,y:f,width:c,height:b,fill:t[g%t.length],rx:2}),s.jsx("text",{x:m+c/2,y:l-i+14,textAnchor:"middle",fontSize:10,fill:"#666",children:e[g].length>8?e[g].slice(0,8)+"...":e[g]})]},g)})]})}function ws({labels:e,values:a,w:r,h:l,colors:t}){const d=Math.max(...a,1),i=40,u=r-i*2,o=l-i*2,c=e.length>1?u/(e.length-1):0,p=a.map((g,b)=>{const m=i+c*b,f=l-i-g/d*o;return`${m},${f}`});return s.jsxs("g",{children:[[.25,.5,.75,1].map(g=>{const b=l-i-g*o;return s.jsx("line",{x1:i,y1:b,x2:r-i,y2:b,stroke:"#eee",strokeWidth:1},g)}),s.jsx("polyline",{points:p.join(" "),fill:"none",stroke:t[0],strokeWidth:2}),a.map((g,b)=>{const m=i+c*b,f=l-i-g/d*o;return s.jsx("circle",{cx:m,cy:f,r:4,fill:t[0]},b)})]})}function ks({labels:e,values:a,w:r,h:l,colors:t}){const d=a.reduce((b,m)=>b+m,0)||1,i=r/2,u=l/2-20,o=Math.min(r,l)/2-40,c=2*Math.PI*o;let p=0;const g=a.map((b,m)=>{const f=b/d,x=f*c,y={dash:x,offset:p,color:t[m%t.length],label:e[m],pct:f};return p+=x,y});return s.jsxs("g",{children:[g.map((b,m)=>s.jsx("circle",{cx:i,cy:u,r:o,fill:"none",stroke:b.color,strokeWidth:o*.6,strokeDasharray:`${b.dash} ${c-b.dash}`,strokeDashoffset:-b.offset,transform:`rotate(-90 ${i} ${u})`},m)),s.jsx("g",{transform:`translate(${i-e.length*30}, ${l-20})`,children:g.slice(0,6).map((b,m)=>s.jsxs("g",{transform:`translate(${m*60}, 0)`,children:[s.jsx("rect",{width:10,height:10,fill:b.color,rx:2}),s.jsx("text",{x:14,y:9,fontSize:9,fill:"#666",children:b.label.length>6?b.label.slice(0,6)+"..":b.label})]},m))})]})}function K({type:e,data:a,title:r,width:l=400,height:t=300,appearance:d}){const{appearance:i}=S(),u=d??i,o=n.useMemo(()=>vs(a.labels.length),[a.labels.length]);return s.jsx(w,{appearance:u,children:s.jsxs("div",{className:"ss-chart-container",children:[r&&s.jsx("h3",{className:"ss-chart-title",children:r}),s.jsxs("svg",{viewBox:`0 0 ${l} ${t}`,width:"100%",style:{maxWidth:l},children:[e==="bar"&&s.jsx(Ns,{labels:a.labels,values:a.values,w:l,h:t,colors:o}),e==="line"&&s.jsx(ws,{labels:a.labels,values:a.values,w:l,h:t,colors:o}),e==="pie"&&s.jsx(ks,{labels:a.labels,values:a.values,w:l,h:t,colors:o})]})]})})}function $s({dashboardId:e,embedToken:a,baseUrl:r,refreshInterval:l,appearance:t}){const d=S(),i=t??(d==null?void 0:d.appearance),u=n.useMemo(()=>{if(a){const h=r??"https://api.saas-support.com/v1",j=new $.Transport(h,{type:"embedToken",token:a});return new $.ReportClient(j)}return d.client.report},[a,r,d]),[o,c]=n.useState([]),[p,g]=n.useState({}),[b,m]=n.useState(!0),[f,x]=n.useState(null),y=n.useCallback(async()=>{m(!0),x(null);try{const h=await u.getDashboard(e),j=JSON.parse(h.layoutJson||"[]");c(j);const v={};for(const N of j)try{const k=await u.listQueries({search:N.queryId,perPage:1});if(k.data.length>0&&k.data[0].generatedSql){const T=await u.executeQuery({sql:k.data[0].generatedSql});v[N.queryId]=T}}catch{}g(v)}catch(h){x(h instanceof Error?h.message:"Failed to load dashboard")}finally{m(!1)}},[u,e]);return n.useEffect(()=>{y()},[y]),n.useEffect(()=>{if(!l||l<=0)return;const h=setInterval(y,l*1e3);return()=>clearInterval(h)},[l,y]),s.jsx(w,{appearance:i,children:s.jsxs("div",{className:"ss-dashboard-grid",children:[b&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading dashboard..."]}),f&&s.jsx("div",{className:"ss-global-error",children:f}),!b&&o.map((h,j)=>{const v=p[h.queryId];if(!v)return null;const N=v.columns.length>=2?{labels:v.rows.map(k=>String(k[v.columns[0]]??"")),values:v.rows.map(k=>Number(k[v.columns[1]]??0))}:{labels:[],values:[]};return s.jsxs("div",{className:"ss-widget",children:[h.title&&s.jsx("h4",{className:"ss-widget-header",children:h.title}),h.chartType==="table"?s.jsx(Y,{columns:v.columns,rows:v.rows,maxRows:50}):s.jsx(K,{type:h.chartType||"bar",data:N,width:h.w,height:h.h})]},j)})]})})}function Cs(e){return new Date(e).toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})}function Es({onSelectQuery:e,onRunQuery:a,appearance:r}){const{appearance:l}=S(),{queries:t,isLoading:d,error:i}=J(),{execute:u,isLoading:o}=A(),c=r??l,p=n.useCallback(async g=>{if(!g.generatedSql)return;const b=await u({sql:g.generatedSql});b&&(a==null||a(b))},[u,a]);return s.jsx(w,{appearance:c,children:s.jsxs("div",{className:"ss-card ss-card-wide",children:[s.jsx("h2",{className:"ss-title",children:"Saved Queries"}),d&&s.jsxs("div",{className:"ss-loading",children:[s.jsx("span",{className:"ss-spinner"})," Loading..."]}),i&&s.jsx("div",{className:"ss-global-error",children:i}),!d&&t.length===0&&s.jsx("p",{className:"ss-empty",children:"No saved queries."}),!d&&t.map(g=>s.jsxs("div",{className:"ss-saved-query-card",onClick:()=>e==null?void 0:e(g),children:[s.jsxs("div",{className:"ss-saved-query-header",children:[s.jsx("span",{className:"ss-saved-query-name",children:g.name}),g.chartType&&s.jsx("span",{className:"ss-badge",children:g.chartType})]}),g.naturalLanguage&&s.jsx("p",{className:"ss-saved-query-desc",children:g.naturalLanguage}),s.jsxs("div",{className:"ss-saved-query-footer",children:[s.jsx("span",{className:"ss-saved-query-date",children:Cs(g.createdAt)}),s.jsx("button",{type:"button",className:"ss-btn ss-btn-sm ss-btn-primary",disabled:o||!g.generatedSql,onClick:b=>{b.stopPropagation(),p(g)},children:o?s.jsx("span",{className:"ss-spinner"}):"Run"})]})]},g.id))]})})}function Ts({embedToken:e,dashboardId:a,baseUrl:r="https://api.saas-support.com/v1",refreshInterval:l,appearance:t}){const d=n.useMemo(()=>{const x=new $.Transport(r,{type:"embedToken",token:e});return new $.ReportClient(x)},[e,r]),[i,u]=n.useState([]),[o,c]=n.useState(!0),[p,g]=n.useState(null),b=n.useMemo(()=>P(t),[t]),m=n.useMemo(()=>M(b),[b]),f=n.useCallback(async()=>{c(!0),g(null);try{const x=await d.getDashboard(a),y=JSON.parse(x.layoutJson||"[]"),h=await Promise.all(y.map(async j=>{try{const v=await d.listQueries({search:j.queryId,perPage:1});if(v.data.length>0&&v.data[0].generatedSql){const N=await d.executeQuery({sql:v.data[0].generatedSql});return{...j,result:N}}}catch{}return j}));u(h)}catch(x){g(x instanceof Error?x.message:"Failed to load dashboard")}finally{c(!1)}},[d,a]);return n.useEffect(()=>{f()},[f]),n.useEffect(()=>{if(!l||l<=0)return;const x=setInterval(f,l*1e3);return()=>clearInterval(x)},[l,f]),s.jsx("div",{ref:x=>{if(!x||x.shadowRoot)return;const y=x.attachShadow({mode:"open"}),h=document.createElement("style");h.textContent=m,y.appendChild(h);const j=document.createElement("div");y.appendChild(j)},style:{display:"contents"},children:s.jsxs("div",{className:"ss-dashboard-grid",children:[o&&s.jsx("div",{className:"ss-loading",children:"Loading dashboard..."}),p&&s.jsx("div",{className:"ss-global-error",children:p}),!o&&i.map((x,y)=>{if(!x.result)return null;const{columns:h,rows:j}=x.result;return s.jsxs("div",{className:"ss-widget",children:[x.title&&s.jsx("h4",{className:"ss-widget-header",children:x.title}),s.jsxs("table",{className:"ss-table",children:[s.jsx("thead",{children:s.jsx("tr",{children:h.map(v=>s.jsx("th",{className:"ss-th",children:v},v))})}),s.jsx("tbody",{children:j.slice(0,50).map((v,N)=>s.jsx("tr",{className:"ss-tr",children:h.map(k=>s.jsx("td",{className:"ss-td",children:String(v[k]??"")},k))},N))})]})]},y)})]})})}exports.SaaSError=$.SaaSError;exports.SaaSSupport=$.SaaSSupport;exports.isMfaRequired=$.isMfaRequired;exports.Chart=K;exports.CouponInput=hs;exports.DashboardView=$s;exports.DataTable=Y;exports.InvoiceHistory=G;exports.OrgSwitcher=ls;exports.PaymentPortal=ms;exports.PricingTable=ds;exports.QueryInput=Ss;exports.ReportEmbed=Ts;exports.SaaSContext=D;exports.SaaSProvider=Z;exports.SavedQueryList=Es;exports.SignIn=ts;exports.SignUp=ns;exports.SubscriptionStatus=Q;exports.UsageDisplay=V;exports.UserButton=os;exports.UserProfile=cs;exports.useAuth=q;exports.useBilling=us;exports.useDashboard=ys;exports.useEmbedDashboard=js;exports.useInvoices=W;exports.useOrg=U;exports.useQuery=A;exports.useReport=fs;exports.useSaaSContext=S;exports.useSavedQueries=J;exports.useSignIn=z;exports.useSignUp=F;exports.useSubscription=H;exports.useUsage=_;exports.useUser=as;